Basic Image Transformations

SDK Get Help
,
1

I am hoping someone can point me in the right direction on this. I just started learning Lua and I can't seem to figure this out even though I think it should be obvious. Can someone give me a very simple example of how to change an existing sprite's image? I understand how to assign the image like this:

-- I understand how to set up the image and assign it in my game's source file
-- gfx is the shortened version of playdate.graphics
 local playerImage = gfx.image.new("Images/playerImage")
 assert( playerImage )

-- This assigns the playerImage local variable to playerSprite
 playerSprite = gfx.sprite.new( playerImage )

-- This moves the playerSprite to the middle of the Playdate screen
 playerSprite:moveTo( 200, 130 )

-- This adds the playerSprite to the world
 playerSprite:add()

What I can't seem to figure out is how to easily change playerSprite, meaning the image for playerSprite starts as one thing and changes to something else. I have been looking here: Inside Playdate and in my Lua book and there isn't an example. The SDK guide is not really helpful because I am not seeing real code getting used, it has been hit and miss for me. The examples that come with the Playdate Simulator don't have basic image transformations, I just need something simple. How do I change playerSprite from playerImage in the images folder to something else? I have been at this for about two weeks and have made a lot of progress but I am struggling with images. I have some programming experience but I don't do it for a living so assume I am an idiot in your response. Any help is appreciated.

2

I am not sure what you want to do but I assume that you want to animate a sprite.

The usual way to do it is to create an image table. It is a file containing the frames of your animation:
sprite-chest-table-32-32

Its name must end by table-width-height. For example, this one is named chest-table-32-32.png.

You can load it by calling:

playerSprite.images = playdate.graphics.imagetable.new('chest')

Then you declare an update method for your sprite, and inside it you call setImage to change the current image:

local imageIndex = 0
function playerSprite:update() {
    imageIndex = imageIndex + 0.2
    if (imageIndex > self.images:getLength()) {
        imageIndex = imageIndex - self.images:getLength()
    }
    self:setImage(self.images:getImage(floor(imageIndex + 1)))
}

Something like that :sweat_smile:

1 Like
3

I do much the same thing as Daeke suggests. Except I have a bunch of bitmaps loaded at startup into an array. When it's time to animate the sprite, I advance it to the next array index, calling the image-setter on the sprite. At the end of the array it loops back to the 0th index.

It seems to work OK.

Along with my sprite, I have an update clock in milliseconds. During the spriteUpdate() I check if the sprite_update_time is less than the clock. If it is, the image is changes, and the sprite_update_time := clock + frame_delay to set the time for the next update.

The only "gotcha" with this is you need to update the image fix to the centre-position of the sprite, so changes in image dimensions of each frame don't make it wobble. If the frames are all the same size, obviously this doesn't matter.

4

Thanks, this is helpful. I still need to do some troubleshooting but I think I understand this a little better now. I think part of the problem is that I did not really breakout my sprites into a sub-class, they are all sort of mixed into the main.lua file in one heap. When I go back and look at some of the examples (Level 1-1 is good for anyone who reads this thread later) I can see what you both are talking about, it never occurred to me that the image table could be one file or that I could use an array and cycle through the images.