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
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

PNG Sequence for TexturePacker


Now that we have exported our PhotoshopR animation as a PNG sequence, we are ready to import the PNGs into TexturePacker to create a sprite sheet and property list. But you might be asking yourself about the solid black background added to the PNGs when exported from Photoshop. TexturePacker will take care of that for us also.

Let's import our PNG sequence into TexturePacker. Open TexturePacker and click on the Add Folder icon at the top of the workspace. Browse to the folder containing the PNG sequence. One nice thing about TexturePacker is that once you import via the Add Folder option, TP will automatically update the sprites to reflect any new images you might add to that folder.

By default, the Data Format is set to Cocos2D but can also be set to most of the popular game development frameworks. As you can see, in the right panel, we have the individual PNGs listed and in the center panel, we can see the imported images. However, we only see 7 of the 10 images displayed. This is because 4 of the images from the animation are duplicates but in reverse order.

ball4.png is the same as ball6.png
ball3.png is the same as ball7.png
ball2.png is the same as ball8.png
ball1.png is the same as ball9.png

These images are called aliases in TexturePacker. To save memory and CPU, TexturePacker automatically makes a note of the duplicate images and only adds one from each set of duplicate images to the sprite sheet. You can tell which images are aliases by the small stack icon in the upper left corner of the images.

You can place your mouse over each image and a popup will display the name of the image, or list the aliases, along with the original size, the trimmed size and the rotation setting. At the bottom of the right panel, you will see the estimated size of your sprite sheet and the amount of memory it will use.

If we exported our sprite sheet with the default settings, it would be a big 4096 kb. But we can make some changes to the defaults which will reduce the size of our sprite sheet.

← Back | Next →

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

|


Add PNG+Sequence+for+TexturePacker to Twitter Add PNG+Sequence+for+TexturePacker to Facebook Add PNG+Sequence+for+TexturePacker to MySpace Add PNG+Sequence+for+TexturePacker to Del.icio.us Digg PNG+Sequence+for+TexturePacker Add PNG+Sequence+for+TexturePacker to Yahoo My Web Add PNG+Sequence+for+TexturePacker to Google Bookmarks Add PNG+Sequence+for+TexturePacker to Stumbleupon Add PNG+Sequence+for+TexturePacker 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 © 2014 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
Getting Started Photoshop Elements by TeachUcomp

Scalloped Circle and Illustrator Shape Builder

Honeycomb Xmas Ornament SVG Cut Design

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 © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor