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.

1. 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.
   
2. Press N to open the Sidebar (if it's not already open) and click on the "Blendate" tab. Then click the Initialize button.
   
3. 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.
   
4. In the Configuration panel, ensure that both "Render Rotations" and "Render Animations" checkboxes are checked.
5. 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.
   
6. 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".
   
7. 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.
   
8. Go down to the Render panel. We need to specify both the "Spritesheet Directory" and the "JSON Metadata File" to our project source directory.
   
9. 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).
   
10. Open your project source directory. You should see... a lot of spritesheets created and a metadata JSON file.
    
11. 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. The blendate library attempts to abstract this by using a class BlendateRotatingAnimation. 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 the get(angle) method before drawing in order to get the closest
    animation.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

12. 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/).