logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Painting
Heart Disease
Horror Literature
Dating
Hiking & Backpacking
SF/Fantasy Books
Healthy Foods


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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.

  1. Open Texture Packer.

  2. 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.

  3. In the Output panel, set the Data Format to Kwik 2 (image sheet).

  4. 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.

  5. Texture Format: PNG

  6. 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.

  7. Set Dithering to FloydSteinberg + Alpha.

  8. In the Geometry panel, check the Allow Free Sizes option. Keep the other default settings.

  9. 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.

  10. Check the box for Crop.

  11. 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.

  12. 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.

|



Add Kwik+2+and+Texture+Packer+Sprite+Sheets to Twitter Add Kwik+2+and+Texture+Packer+Sprite+Sheets to Facebook Add Kwik+2+and+Texture+Packer+Sprite+Sheets to MySpace Add Kwik+2+and+Texture+Packer+Sprite+Sheets to Del.icio.us Digg Kwik+2+and+Texture+Packer+Sprite+Sheets Add Kwik+2+and+Texture+Packer+Sprite+Sheets to Yahoo My Web Add Kwik+2+and+Texture+Packer+Sprite+Sheets to Google Bookmarks Add Kwik+2+and+Texture+Packer+Sprite+Sheets to Stumbleupon Add Kwik+2+and+Texture+Packer+Sprite+Sheets to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Digital Art and Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Chalk Text Effect In Illustrator CS6

Sketch with Your Silhouette SSDE

Simple Drawing Tools in Silhouette Studio Designer

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2013 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor