How to render rotating animations
blendate » Devlog
Rendering rotations
This tutorial shows how to create a series of spritesheets containing multiple frames of animation per rotation from your 3D object.
This approach is useful to display rigged models which can move dynamically in-game.
- Let's use a bearded man for this tutorial. It looks like the provided blend file doesn't have a light source, so if you'd like to add one you can press
Shift-A -> Light -> Sun
and then position it to face the man. - 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 a camera. There is one already provided in the blend file that we can use.
- In the Configuration panel, ensure that both "Render Rotations" and "Render Animations" checkboxes are checked.
- 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.
- We are going to render a series of animation frames at each rotation angle, so it's likely that we will end up with a lot of spritesheets. With that in mind, let's only do 10 for "Angle Increments".
- The bearded man has quite a few animations, so let's just pick a couple for this tutorial. Toggle off the "All Animations" checkbox and then only toggle "walk" and "run" on.
- 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. Make yourself a cup of tea, this might take a while (took ~35 mins on M2 macbook air).
- Open your project source directory. You should see... a lot of spritesheets created and a metadata JSON file.
- Now let's put our walking/running bearded man into our Playdate game. Since we have an
animation.loop
per angle, it makes it quite a bit more complex to handle. Theblendate
library attempts to abstract this by using a classBlendateRotatingAnimation
. You don't need to initialize this class yourself though, the interface is almost the exact same as before (bd:loadAnimation
to init) with the exception that we need to call theget(angle)
method before drawing in order to get the closestanimation.loop<br>
to that specific angle. Have a look at the example below:import("blendate") local SCREEN_WIDTH, SCREEN_HEIGHT = playdate.display.getSize() local bd <const> = Blendate("metadata.json") local walkAnim = bd:loadAnimation("images/man_", "walk") local runAnim = bd:loadAnimation("images/man_", "run") local frame = walkAnim:get(0).imageTable[1] local animWidth, animHeight = frame.width, frame.height local posX = SCREEN_WIDTH / 2 local posY = SCREEN_HEIGHT - animHeight function playdate.update() playdate.graphics.clear(playdate.graphics.kColorBlack) -- Determine if running based on A button local isRunning = playdate.buttonIsPressed(playdate.kButtonA) local currentSpeed = isRunning and 4 or 2 local currentAnim = isRunning and runAnim or walkAnim -- Update position based on crank angle local crankAngle = playdate.getCrankPosition() local radians = math.rad(crankAngle) posX = posX + math.cos(radians) * currentSpeed posY = posY + math.sin(radians) * currentSpeed -- Keep within screen bounds posX = math.max(0, math.min(posX, SCREEN_WIDTH - animWidth / 2)) posY = math.max(0, math.min(posY, SCREEN_HEIGHT - animHeight)) -- Draw animation currentAnim:get(crankAngle):draw(posX, posY) end
- Here's what the game above should look like. Press and hold A to make him run.
"Bearded man - Low poly animated" (https://skfb.ly/oqBtx) by Agor_2012 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 animations52 days ago
- How to render rotations53 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.