How to render cutscenes


Rendering cutscenes

This tutorial shows how to create a cutscene consisting of multiple frames as a playdate video (pdv)

  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. Click on the Camera, then press N to open the Sidebar (if it's not already open) and click on the "Blendate" tab. Then click the Initialize button.
  3. Choose an animation to play for the bearded man in the action editor- let's try playing his "death" animation.
  4. Feel free to add other assets to the scene as well if you'd like. This is different to the previous tutorials because now we're rendering whatever the camera sees- it's not specific to a object anymore. If you'd like to have a white background in your video for example, add some Planes and position them behind the bearded man.
  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. Go down to the Render panel. If you'd like to edit the frames yourself before making the video, you will be able to find them in the "Frames Directory". In our case though, we don't need to do any post-processing, so we'll just fill in the video output filepath.
  7. Click "Render" then wait for the "Render Complete" message. You should see the bearded man animate through the frames as it goes.
  8. Open your project source directory. You should see a pdv file created.
  9. Now let's put our fighting bearded man into our playdate game. For more information, see the official documentation.
    local disp = playdate.display
    local gfx = playdate.graphics
    disp.setRefreshRate(0)
    local video = gfx.video.new("output")
    video:useScreenContext()
    video:renderFrame(0)
    local lastframe = 0
    local startTime = playdate.getCurrentTimeMilliseconds() / 1000
    function playdate.update()
        -- Calculate which frame to show based on elapsed time
        local currentTime = playdate.getCurrentTimeMilliseconds() / 1000
        local elapsedTime = currentTime - startTime
        local frame = math.floor(elapsedTime * video:getFrameRate()) % video:getFrameCount()
        if frame ~= lastframe then
            video:renderFrame(frame)
            lastframe = frame
        end
    end
    
  10. Compile & run. The video should play and loop automatically.



    "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.