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.

1. 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 press 0 to see the camera viewpoint and then press and press S to scale it down.
   
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 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  clicking Camera.
   
4. In the Configuration panel, ensure the "Render Rotations" checkbox is checked and the "Render Animations" checkbox is unchecked.
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 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.
   
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. 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.
   
9. 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)
   
10. 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

11. Compile & run- hopefully you should see the car spinning!
    
12. 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/).