Using sprite sheets in CoronaSDK

A thing that is very common and useful in game development is the application of sprite sheets. Most of us make of this a day-to-day tool, but some don't know what it is or how to use it depending on the platform or because of any other problem.

So before we start I'm going to give quick defs.
- Sprite - its the assets representing an image in your game. Like an 1up mushroom from SMB.

- Sprite Sheet - its a group of sprites in a single file, can represent various animations or simply a group of static images used in the game. Like the zero sprite sheet bellow.

For the first demo we're going to use a classic character the jelly!

The jelly sprite sheet is equally divided, that way we don't need to care about specifying each frame individual settings.

Start importing the sprite classes from CoronaSDK, they are required to our code.



Each jelly sprite has 37x47 and we have 16 frames on our sheet so Corona needs to be informed of this, for that purpose we use a simple lua table.



Now we can call the graphics.newImageSheet using the sprite sheet filename and our table.



So we have our sheet with a few lines, now we need to specify the frames we want to display and create the image onscreen.



If you run now the simulator now the jelly will appear correctly in the screen but won't animate. Try to add sprite:play() after the scaling code line and watch our jelly flick like craze in the screen.

Lets improve our sample and change our animationData table to the following



Now our jelly feels more "natural". Why is that?

That happened when we added a time for our "walking_down" animation, if you play with it you can speed it up/down, don't forget that the time is given in miliseconds.

 Still we can't switch between animations.

For that purpose we need to improve our code with a couple of lines. Begin changing the animationData to



And to see the changes add some touch logic after the sprite:play() call (in fact you can even replace it)



When you touch left or right of our jelly sprite you'll see it change bettwen walking_left and walking_right animations. That was achieved using sprite:setSequence("animation_name") method.
After calling setSequence on a sprite is necessary to call play() if you want it to run the animation otherwise it will switch to the first frame (start parameter for example) and stay still.

Now it feels better uh, but wait! What if we move our jelly while animating?

Insert a transition call after onTouch sprite:play() line like that:



With these basic steps you added a sprite from a sprite sheet in the screen and made it move left and right.

Hey but it isn´t over yet! When the sprite sheet is like zero sample (from megaman, remeber?) we have to use more complex info on sheetSettings variable and also when we have non sequential animation we need to be more specific on our animationData variable.

Using short samples our animationData could have it walking_left animation re-written to



What we did here is jump through frames 5,2,7 and 3 always in that order for 800ms 2 times.

And to keep things simple, instead of given a gigantic sheet lets imagine sheetSettings can be re-written with every frame of our green jelly that we already know.



Even though this is useless in this case, we can use it for more complex sprite sheet images.

Last question before letting you code for yourself: How the hell am I supposed to build these sheets?

Well you can use some useful tools, let me give 2 hints:
- Texture Packer
- Zwoptex


Leave your questions and thoughts and happy coding!!