How do i create animation with my sprite with a sprite map?

SDK Get Help
1

I have an image which is width 150 and height 50 that contains 3 frames of animation. Each frame is 50 x 50.
I want to mask the other frames while just showing one to give the illusion of animation.
I made a Countdown class that extends Sprites
The way I did it was I added a ClipRect to the image and I move the image while the ClipRect stays still.
The problem is i can't use moveTo and i feel like i'm losing out on other sprite functions because if I move the sprite it goes out of sync with the mask. I had to write a custom move. here is the code

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

--frameW and frameH are the width and height of a frame
--the image is an image map of multiple frames

function Countdown:init(frameW, frameH,image)
    Scene.super.init(self)
    self.currentFrame = 1

    --Load Image
   local newImage =  playdate.graphics.image.new(image)
   self.frameW = frameX
   self.frameH = frameY

    --Get Image Data for calculations
    self:setImage(newImage)
    self.newImageW, self.newImageH  = self:getImage():getSize()
    self:setCenter(0, 0)

   end

function Countdown:setFrame(frame)
    self.currentFrame = frame
end

function Countdown:drawUpdate(x,y)
    local frame =  self.currentFrame - 1  
    local spriteX = x - (self.frameW * frame)
    local spriteY = y
    self:moveTo(spriteX,y)
    local clipBoxCord = playdate.geometry.rect.new(x , y, self.frameW , self.frameH)
    self:setClipRect(clipBoxCord)

end

And in the main file
I just call :add() and :setFrame(1) or 2 3 etc. And :drawUpdate in the update script

This thing works but i just dont like how its written there must be a better way

2

I think what you are looking for is Image Table.

2 Likes
3

thank you, can't believe i missed that in the docs. thank you