How to render animations


Rendering rotations

This tutorial shows how to create a spritesheet containing multiple frames of an animation from your 3D object.

This approach is useful to display animations using rigged armatures. NB Currently Blendate doesn't support animations inside nested collections- it can only work with armatures.

  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 the "Render Rotations" checkbox is unchecked and the "Render Animations" checkbox is 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. The bearded man has quite a few animations, so let's just pick one for this tutorial. Toggle off the "All Animations" checkbox and then toggle all animations except "fight" off as well.
  7. Go down to the Render panel. We need to specify both the "Spritesheet Directory" and the "JSON Metadata File" to our project source directory.
  8. Click "Render" then wait for the "Spritesheet Rendering Complete!" message. You should see the bearded man animate through the frames as it goes.
  9. Open your project source directory. You should see 2 spritesheets created and a metadata JSON file.
  10. Now let's put our fighting bearded man into our playdate game:
    import("blendate")
    local SCREEN_WIDTH, SCREEN_HEIGHT = playdate.display.getSize()
    local bd <const> = Blendate("metadata.json")
    local fightAnim = bd:loadAnimation("images/man_", "fight")
    function playdate.update()
        playdate.graphics.clear(playdate.graphics.kColorBlack)
        fightAnim:draw(SCREEN_WIDTH / 2, SCREEN_HEIGHT - fightAnim.imageTable[1].height)
    end
  11. Compile & run- there he is!!



    "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

Leave a comment

Log in with itch.io to leave a comment.