Kwik 2 and Texture Packer Sprite Sheets

In a previous tutorial, we created a movie clip from three png images that make up a fly animation. A movie clip animation was a good choice for this animation because there were only three images in the sequence.

Many of you might want to use sprite sheets instead of movie clips for your Kwik storybook app, especially if your animation has many images. By creating a sprite sheet in a program such as Texture Packer, you will be able to combine and optimize all the images, called sprites, into one file called a sprite sheet. This sprite sheet will be a smaller image file and will use less of your device's memory when loaded into your app.

In this tutorial, we will use the same three images that we used to create the movie clip. But this time, we will create a sprite sheet and data file that we will use in our book app. We have already created the three sprite images for our fly animation and placed them in a folder named "fly". We will use Texture Packer from CodeAndWeb to generate our sprite sheet. Texture Packer is a very popular sprite sheet creator software that is used by many game developers.

fly_1.png
fly_2.png
fly_3.png

Our first step is to open Texture Packer and import the folder with the sprite images into the software. Then we will take a look at the options for optimizing our sprite sheet.

Open Texture Packer.
Click on the Add Folder icon at the top of the workspace. Browse to your fly folder and select it for import into the program.

You will see the folder and a list of the images in the folder listed in the Sprites panel on the right. If you place your cursor over one of the images, you will get some basic information such as the name, original size, position and path to the original file.
In the Output panel, set the Data Format to Kwik 2 (image sheet).
Give the Data File a name such as "flyAni" and use the browse button to set the location where Texture Packer will output your files. Notice that Texture Packer automatically adds the Texture File output setting to the same location.
Texture Format: PNG
Set the Image Format to RGBA4444.

The default Image Format is RGBA8888 which will give you a good quality image at the expense of file size. You may want to use this format for background images that need to appear in better quality on the screen.

For sprites that will be animated, we can set a lower format setting because the slightly lower quality will be difficult to notice in a moving image. We will reduce the Image Format to RGBA4444.

We can make up for any loss in image quality by using the FloydSteinberg + Alpha Dithering setting. This combination of Image Format and Dithering will give us better results and reduce our file size.
Set Dithering to FloydSteinberg + Alpha.
In the Geometry panel, check the Allow Free Sizes option. Keep the other default settings.
In the Layout panel, set the Border and Shape Padding to 0. Keep the Extrude set to 0.

If your sprites contain pixels from neighboring sprites, you may wish to add a little padding between them to prevent this. On the other hand, if the edges of your sprites are being cut off, you may wish to increase the Extrude feature.
Check the box for Crop.
If your png sprite images have a colored background, check the box for Heuristic Mask.

If your png sprite images have a colored background instead of a transparent background, we can automatically remove this color with the Heuristic Mask option.

Keep the other default setting in this panel.
Click Publish icon at the top.

You will see that Texture Packer has generated both the flyAni.png file containing all three of our sprites and the flyAni.lua file that Kwik will use to build the animation from the sprites.

Note: If you are having trouble getting your sprite sheets to work in your app, your first step is to get the latest build of both Kwik 2 and Corona SDK.

Note: If your sprite animation jumps a little, try changing the settings for the Border and Shape Padding back to 2. Then try unchecking the Crop option. This will leave more empty space between each sprite on the sprite sheet.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.

|