Setting Zindex?

SDK Development Discussion
1

What is the best way here to draw the line under the rectangle ?

At the moment the line is always on top

-- Update function, called once per frame
function playdate.update()
    -- Clear the screen
    gfx.clear()

    -- Update sprites
    gfx.sprite.update()

    -- Draw the Game name at the top
    gfx.setImageDrawMode(gfx.kDrawModeFillBlack)
    gfx.setFont(font)
    gfx.drawTextAligned(message, screenWidth / 2, screenHeight / 4, kTextAlignment.center)

    -- Move the rectangle sprite across the screen
    local x, y = rectSprite:getPosition()
    x = x + 2              -- Move the sprite 2 pixels to the right each frame
    if x > screenWidth + rectWidth / 2 then
        x = -rectWidth / 2 -- Reset the position to the left edge once it goes off-screen
    end
    rectSprite:moveTo(x, y)

    -- Draw the line across the screen
    local lineY = screenHeight / 2 + 50
    gfx.setLineWidth(10)
    gfx.drawLine(0, lineY, screenWidth, lineY)

    -- Update timers
    playdate.timer.updateTimers()
end
2
  1. Draw it into another sprite that will be set to a lower z index
    or
  2. Draw it in the sprite background callback ref
3

second option sounds good but how might I implement that ?

4

this is what I did in the end

-- Background drawing callback function
local function backgroundDrawingCallback()
    -- Clear the screen
    gfx.clear()

    -- Draw the Game name at the top
    gfx.setImageDrawMode(gfx.kDrawModeFillBlack)
    gfx.setFont(font)
    gfx.drawTextAligned(message, screenWidth / 2, screenHeight / 4, kTextAlignment.center)

    -- Draw the line across the screen
    local lineY = screenHeight / 2 + 50
    gfx.setLineWidth(10)
    gfx.drawLine(0, lineY, screenWidth, lineY)
end

-- Set the background drawing callback
gfx.sprite.setBackgroundDrawingCallback(backgroundDrawingCallback)
5

While you can fiddle with it until you get the desired outcome, I agree with @matt that for consistent results and malleability I find it best to create a blank image, draw into that image (pushing context), and then set that as the image for a sprite. Sprites just have very convenient and easy-to-order drawing capabilities.

I used to draw my main menu every single frame because it was all just raw draw calls. Now the screen only updates when something needs to change. Cuts down on CPU time and gives you more headroom for other operations. Worth considering.

1 Like