Now that we have exported our Photoshop^R 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 →

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.