How to render rotations
blendate » Devlog
Rendering rotations
This tutorial shows how to create a spritesheet containing multiple rotation angles of your 3D object, allowing you to display it from different viewpoints in your Playdate game.
This approach is useful for objects that need to be viewed from multiple angles, such as characters, vehicles, or interactive items.
- Let's use a car for this tutorial. Click
File -> Import -> Wavefront (.obj)
to import it. If you're using the default camera, it might be too big to fit in the frame, so press0
to see the camera viewpoint and then press and pressS
to scale it down. - Press
N
to open the Sidebar (if it's not already open) and click on the "Blendate" tab. Then click the Initialize button. - In the Configuration panel, click the eyedropper next to "Camera (Required)" and select the camera you want to use for rendering. If you don't have a camera in your scene, you can add one using
Shift-A
and clickingCamera
. - In the Configuration panel, ensure the "Render Rotations" checkbox is checked and the "Render Animations" checkbox is unchecked.
- Go to the Preview panel and click the "Render Preview" button to see a preview. Tweak any of the other settings to style it to your liking.
- The default rotation angle is 45 degrees. This might be fine for an old school RPG, but we want something more fluid so bring the it down to 2. As you do this, you'll see the estimated spritesheets increase. It looks like 5 spritesheets will be used to store all 180 ;frames.
- Go down to the Render panel. We need to specify both the "Spritesheet Directory" and the "JSON Metadata File" to our project source directory.
- Click "Render" then wait for the "Spritesheet Rendering Complete!" message. It might take a few minutes. If you'd like to monitor progress, you can check the console logs or look inside your working directory for the temporary rendered frames.
- Now, let's put this image in our Playdate game. Open your project source directory. You should see 5 spritesheets created and a metadata JSON file (this tells Blendate how to use the 5 spritesheets to create the animation)
- You can use the blendate lua library to load the car animation into your game. Here's a simple example:
import("blendate") local screenWidth = playdate.display.getWidth() local screenHeight = playdate.display.getHeight() local bd <const> = Blendate("metadata.json") local anim = bd:loadRotation("images/chassi") function playdate.update() playdate.graphics.clear() anim:draw((screenWidth - anim.imageTable[1].width) / 2, (screenHeight - anim.imageTable[1].height) / 2) end
- Compile & run- hopefully you should see the car spinning!
- Here's an example with some simple car logic:
import("blendate") local gfx <const> = playdate.graphics local bd <const> = Blendate("metadata.json") local SCREEN_WIDTH, SCREEN_HEIGHT = playdate.display.getSize() local carAnimation = bd:loadRotation("images/chassi") local CONFIG = { MAX_SPEED = 4, FRICTION = 0.98, ACCELERATION = 0.1, STEERING_SPEED = 6, ANGLE_OFFSET = 45, } local car = { x = SCREEN_WIDTH / 2, y = SCREEN_HEIGHT / 2, angle = 0, speed = 0 } local function updateCar() -- Steering with crank local diff = (playdate.getCrankPosition() - car.angle) % 360 if diff > 180 then diff = diff - 360 end car.angle = (car.angle + diff / CONFIG.STEERING_SPEED) % 360 -- Physics and movement car.speed = math.min(car.speed + CONFIG.ACCELERATION, CONFIG.MAX_SPEED) * CONFIG.FRICTION local moveRad = math.rad(car.angle) car.x += math.cos(moveRad) * car.speed car.y -= math.sin(moveRad) * car.speed end function playdate.update() gfx.clear() updateCar() local img = carAnimation.imageTable[math.floor(((car.angle + CONFIG.ANGLE_OFFSET) % 360) / 2) + 1] img:draw(car.x - img.width / 2, car.y - img.height / 2) end
"Hatchback simple car" (https://skfb.ly/oOqGq) by rafadalepi is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
Get blendate
Buy Now$35.00 USD or more
blendate
Blender add-on for pre-rendered 3D graphics on Playdate
Status | In development |
Category | Tool |
Author | osuika |
Tags | Blender, Playdate |
More posts
- Using custom dither patterns14 days ago
- How to render cutscenes45 days ago
- How to render rotating animations52 days ago
- How to render animations52 days ago
- How to render a single static image53 days ago
- Overview53 days ago
- Installation53 days ago
Leave a comment
Log in with itch.io to leave a comment.