Animating sprites

What is the best way to do sprite animations?
Where you step through tiles.
Is there a component or shader for this?

What I did was first, load the image onto a canvas and then split it into multiple canvasses using regular JavaScript. You can create a texture from a canvas in Wonderland. The difficulties I ran into were that I didn’t want to load the same image over and over for all objects that used that animated texture and it needed to work for multiple different shaders to be reusable. I now use pretty much the same component in every game that needs this (with minor adjustments).

This Gist contains the component as well as the cache.
Wonderland Component doing Flipbook Animation (

Here’s an example of how I use the component.

Make sure the image is in the static folder so it is available to be downloaded separately by the component.

1 Like

Thank you!
Can I check that in your solution, each sprite sub-tile occupies one Wonderland texture?
So the example in the screenshot with 6-columns 5-rows tile would occupy 30 textures?

I think it does, but it shouldn’t take up more space because every texture is only a piece of the first one.

1 Like