Lightweight AnimatedImage Library

Thought some folks here might find this little library I wrote helpful.

animated-image

The goal of AnimatedImage is to be able to plop in animated images in place of static images easily. No calls to update, etc. In fact, AnimatedImage behaves just like a built-in playdate.graphics.image. Any API playdate.graphics.image supports so does AnimatedImage, except it operates on the current frame. It does this by forwarding any call to the current frame image. It is more or less a drop-in replacement.

AnimatedImage is less than 100 lines of Lua, and most of that is just boilerplate getter/setter as AnimatedImage sits on top of playdate.graphics.image and playdate.graphics.animation.loop. Simply replace playdate.graphics.image.new with AnimatedImage.new to get started, and change the path from a static image to that of an image table or gif.

Grab the latest off GitHub. Public domain. Feel free to contribute. :slight_smile:

24 Likes

Since it does rely on animation.loop is there any requirements to add timer updates etc to the main playdate.update loop?

i.e. is it really as simple as just switch the underlying class? or is there more, like sprites.

Yeah the example is dead simple. No special calls to update etc. it’ll just draw the right frame. You can pause the animation and set the frame manually to draw a specific frame.

It forwards most calls to the current frame image so it for all purposes behaves like an image.

1 Like

very cool! thank you for this.

Kinda feel like image objects should just support animations seamlessly so if the path is an Image Table or gif, it works like this. With perhaps an isAnimated property, and a few animation specific functions like pause and setAnimationFrame. :man_shrugging:

3 Likes

Love this! Thank you!

1 Like

Plopped this on GitHub: GitHub - mierau/playdate-animatedimage: A dead simple and lightweight way to display animated images/gifs in your Playdate game.

1 Like

Curious if you've seen performance boosts from dropping this in? Or is it mostly to simplify the use of animated images?

Haven’t checked, though it wasn’t built as an optimization nor do I think it would be. It’s purely meant for convenience. You don’t want to manage a timer object, an image table. Perhaps you just want to quickly test an animation where you currently have a static image. I find this helpful in those situations.

1 Like

Totally. The less timers I have to think about, the better probably :grimacing:

This is great, thanks Dustin.

Not sure if this is outside the scope of your library, but I've added an extra option to allow animation frames to be drawn out-of-order. Handy for sprite sheets that contain a variety of different movements/actions.

It goes right before local animation_loop = ...

	if options.sequence ~= nil then
		local temp_imagetable = graphics.imagetable.new(#options.sequence)
		for i, v in ipairs(options.sequence) do
			temp_imagetable:setImage(i, image_table:getImage(v))
		end
		image_table = temp_imagetable
	end
2 Likes

Hey that's a nice addition. I'll look into adding it!

1 Like

Also handy:

function AnimatedImage:getImage()
	return self.image_table:getImage(self.loop.frame)
end

I’ve got my modified version here:

I’m really not sure about etiquette when it comes to stuff like this. Would you prefer I call it something else if it’s public?

Thanks Dustin it's very useful. Just wondering if we are able to know the animation has ended without having to know the index and doing a check?

That's fine. You could also submit a pull request to merge your change in vs having two separate repos for the same code. Or at the very least branch off mine. Not a big deal of course. :slight_smile:

1 Like

This is awesome! Thanks to your help I am one percent less code-rookie now (: Thank you.

1 Like

I have the same question as jmation. Wanting to basically perform an action when an animation has ended. I could hard-code a check against the last frame, knowing how long the animation is, but a :getEndFrame() would be amazing in addition to what's there.

Is there some other way of doing this I'm not thinking of?

Thank you so much for this, this is how I expect and hope animated images might work in the SDK proper in future :slight_smile: Super easy to work with.

Take a look at Nic's sequence library.

Latest download at GitHub, see end of the post below.

Thanks matt, I'll check it out :slight_smile:

Thanks for this! I used it to add a simple animation to my title screen, a timer resets its index so it loops with a delay. Removed a decent chunk of setup code