I can't figure out animation loops

SDK Get Help
,
1

I'm trying to animate an image/sprite using an animation loop but it isn't displaying my images correctly. I have 12 images named pill-extend-table-1.png through -12.png. If I print the frame that the loop is currently on, it seems to be looping correctly. The image, however, just appears as a mask instead of the actual image. What I mean by this is that it is just a plain white image without any of the detail it should have, and it isn't animating (since it's just plain white).

Here is the class I am using:

import "CoreLibs/sprites"
import "CoreLibs/graphics"
import "CoreLibs/animation"

local gfx <const> = playdate.graphics

class("Pill").extends(gfx.sprite)

function Pill:init()
    Ball.super.init(self)

    self.transform = {
        x = 155,
        y = 180,
        yspeed = 2,
    }
    self.type = "pill"

    self.imageTable = gfx.imagetable.new("images/pills/extend/pill-extend")
    self.animationLoop = gfx.animation.loop.new(500, self.imageTable, true)
    self:moveTo(self.transform.x, self.transform.y)
    self:setCollideRect(0, 0, 16, 8)
    self:add()
end

function Pill:update()
    print(self.animationLoop.frame)
    self.animationLoop:draw(self.transform.x, self.transform.y)
end

and you can see the mask of the image here (it's the pill shaped object):
playdate-20220805-212359

Here is what one of the frames actually looks like:
pill-extend-table-6

and here is what the animation is supposed to look like:
pill-extend-table-1

If there's a better way to animate sprites then I'm all ears. The docs have a section for animating sprites but that seemed to mean "animation" as in "movement" instead of animating frames.

2

Are you using the right drawing mode? I suspect you may have changed it to kDrawModeFillWhite when drawing your text.

To find out, add this at the beginning of Pill:update():

gfx.setImageDrawMode(gfx.kDrawModeCopy)

If that fixes it, then the real fix is to wrap your draw calls. Save your graphics context before you make changes and restore it after drawing, so that settings from other parts of your game don't interfere:

-- draw some text
gfx.pushContext()
gfx.setImageDrawMode(gfx.kDrawModeFillWhite)
gfx.drawText(...)
gfx.popContext()

Once you've made that change, subsequent drawing won't inherit the draw mode (or color, stroke width, etc.).

3

Ayyy that worked. Thanks for the help once again, Dan!

playdate-20220805-224957

1 Like