ATTENTION: For a full class on how to use different types of sprite sheets in Kwik, check the FREE lesson from the Official Training here.

Sprite sheets are commonly used in games and storybooks. A sheet is basically an image file with a bunch of images, representing one (or several) animation sequence. To learn more why to use them, I strongly recommend the amazing video made by Andreas Löw, from Code and Web, creator of Texture Packer (more on that below) and Physics Editor, two great tools for the Kwik user arsenal:

SpriteSheets – TheMovie – Part 1 by Code’n’Web

SpriteSheets – TheMovie – Part 2 by Code’n’Web

Same size frames sheet

Two kinds of sheets can be created. A same size frame sheet contains all elements (frames) with the same dimensions. In the example below, there are 8 cats with the same size of 512×256 pixels, making the sprite sheet file size of 1024×1024 pixels.

Kwiksher’s Sprite Sheet Exporter for Photoshop
You can create a same size frame sheet file using the free Sprite Sheet Exporter script, installed with Kwik. For more info on how to use it, check this video:

It is a good practice to set your frames multiples of 8 for better texture memory performance. For example, instead of creating a 15×15 pixels frame, set the canvas for 16×16 pixels.

Optimized frames sheet

An optimized frame sheet contains all elements (frames) in different positions, to avoid any empty space (saving memory). In the example below, you can see several images mixed, making the sprite sheet file size of 476×496 pixels.

The example was created with Texture Packer. Using this software is relatively simple. You drag all the desired images there and it will create an optimized file for Kwik 2 (don’t forget to set the Data Format to Kwik 2):

Working with sprite sheets in a Kwik project

I will not spend much time here because there is a place to learn it: Sprite Sheet Replacement is the online documentation for this feature. The basis are:

a) if you are using a same size frame sheet created by the Sprite Sheet Exporter or any other tool:

• draw an empty rectangle in a layer (you may use a real image but it may have the exact size of each frame in your sprite sheet file). Please notice that if you are using a shape, Photoshop will usually add the pixels for the borders too. For example, a 400×400 rectangle with border of 2 points will end up being an image of 402×402 pixels);
• go to Toolset Layer and Replacements and select Sprite sheet replacement. When the following window appears, browse to the location of the sprite sheet file (usually a .png file) and enter the dimensions of each frame and the full size of the sheet file, under the Manual entry… panel. You need to enter also all other info (Start frame, Frame Count, …)

b) if you are using an optimized file from Texture Packer or Animo:

• draw an empty rectangle in a layer (you may use a real image but it may have the exact size of each frame in your sprite sheet file). Please notice that if you are using a shape, Photoshop will usually add the pixels for the borders too. For example, a 400×400 rectangle with border of 2 points will end up being an image of 402×402 pixels);
• go to Toolset Layer and Replacements and select Sprite sheet replacement. When the above window appears, browse to the location of the sprite sheet file (usually a .png file). In the Import from external tool panel, locate the Lua file created by Texture Packer or Animo (it has the same name of the sprite sheet image file). You need to enter also all other info (Start frame, Frame Count, …)

Greg Pugh created a nice tutorial on how to integrate your Flash sheets, exported with Animo, with Kwik (originally here: http://gpanimationsblog.com/2012/12/11/tutorial-importing-flash-animations-into-kwik-2/):

Please share your comments and findings!

Alex