Andreas Löw of TexturePacker made this video about SpriteSheets and what every Game Developer should know.
This is a really big fat update for TexturePacker. I packed 25 new features inside it!
What do you get in detail?
Simply drag your flash files (.swf) onto TexturePacker and it extracts the images and builds a sprite sheet from them! Requires installed Flash Player Plugin.
This feature works on Windows & MacOS – Linux is currently not working well.
.pvr and .pvr.ccz QuickLook plugin on MacOS
No need to open TexturePacker to view your .pvr and .pvr.ccz files anymore. TexturePacker now contains a QuickView plugin so you can view the files right from finder!
Many people requested a way to save the default settings so that they don’t have to set exporter and other stuff on restarting. – Here it is! (Pro only)
Since many users build for Android I also added support for Linux – currently Ubuntu 10.x. It might still have some quirks (e.g. Flash does not yet work) but is a good start. I decided to build on Ubuntu since it seem to be the most used platform.
I also added a ton of new exporters such as
User interface improvements
I also added a lot of interface improvements to make work with TexturePacker easier.
- New layout of the left side panel allowing easier change of exporter
- Auto update sprite sheet when re-entering TexturePacker
- Sprite highlighting
- Reveal in Finder / Explorer
- Preferences to change checkerboard color and hightlight color
- New icons
- Backspace / delete to remove sprites
- Dialog to select the Flash Player plugin to use
- Drag your sprites here – to give new users a faster start
- Allowing free choice of texture data file name
- Fit button for zoom
- Folders inside a smart folder are now blue
- Auto populate file names from other names e.g. save blah.tps also sets blah.png and blah.plist
Here are some new image export features. Main function is support for flipped PVRs and RGB888 as output format.
- Option to use flipped PVR files
- Support for RGB888
- Unflip flipped pvrs in viewer
- Allow free size for PVR textures (might not work on all targets)
- Rotation support for AndEngine
- Default padding is now 2 – This effects the command line client!
- Corona exporter uses better module concept (http://blog.anscamobile.com/ 2011/09/a-better-approach-to-external-modules/)
With iPhone 4 and all, now we need two sets of art assets, one for SD and one for HD (for retina display). So my artist gives me the assets in HD, and I:
- Make a copy of the assets.
- Use A Better Finder Rename 8 to rename the copied assets’ file names (append the suffix @2x or -hd).
- Select all the original assets, right click, and open it in Preview. Once in Preview make sure all the assets are selected and then click Tools > Adjust Size (oh, the sizes of the assets should be uniform), and then you change then width and height to SD. And then Save All. (Source: http://www.usingmac.com/2008/6/10/batch-resize-images)
- And then, what step 4? We are done 🙂
Or, if you happen to be using Cocos2D, you can use TexturePacker, to create a SD spritesheet from a HD spritesheet, with only 1 click!
Open your TexturePacker file with HD images (texture and data file name should end with @2x or -hd), and then click on AutoSD,
and when you publish, you will automatically have an SD version.
There we go, only one step 🙂
First of all, thank you Andreas Loew for the TexturePacker and Physics Editor licenses.
This is not a tutorial per se, because a lot of information that I will include in this post are referenced from other people’s works, particularly Andreas’ (http://www.texturepacker.com/blog/).
So the question: How do we make animated sprites in Cocos2D using 3rd party sprites. I mentioned before TurboSquid as a good source for free 3D game assets, now I am telling you guys, that aside from free 3D game assets, a lot of 2D game assets are also available for free online, such as Reiner’s Tileset (all the assets that I’ll be using for is from Reiner’s Tileset).
So hop on over to Reiner’s Tileset, and find a character that you’d like, I picked this skeleton with a bow and arrow (he looks kind of cute).
(no, I haven’t named him)
There are a lot of animations included for this character, there’s idle, talking, kicking… animations.
I will be using Andreas’ code (on the TexturePacker website) to load my sprites into the game (check out the blog post: Improved Sprite Loader). You can download the code from that blog post. The CCAnimate+SequenceLoader code loads a sequence of sprites with given format, the start index of sprite must begin with 1 (for example, sprite_0001.png sprite_0002.png, ….the format for this sequence would be “sprite_%04d.png”).
But, but the one from Reiner’s Tileset starts with 0, such as kicking_s0000… One idea is simply ignore the first frame (delete it). Okay, kidding, or rename every file. But what if the animation has like 60 frames?
Good thing, there’s an app called Better Finder Renamer, just drag the files you want to rename and then specifiy the prefix and the Starts with value. So, for our case, I specified “skeleton_kicking_00”, and starts with 1.
Next step, use TexturePacker to create our spritesheet. Click on Add Sprites and select the animation frame files. If you notice the sprite frames have a brown background (which we don’t actually need), Andreas talked about this in another blog post (Using TexturePacker with 3rd party assets).
So just remember to check:
Also check Trim sprite names, so the resulting plist will remove the file extensions of the sprite frames.
Okay, now that we have the the spritesheets ready, some code bits. Add to your project:
And then in your code, #import “CCAnimate+SequenceLoader.h”” (I placed this in the init of my scene), and then:
[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile: @”skeleton.plist”];
skeleton = [CCSprite spriteWithSpriteFrameName: @”skeleton_idle_s0001”];
CGSize size = [[CCDirector sharedDirector] winSize]; skeleton.position = ccp(size.width/2, size.height/2-10);
CCAnimate *animation = [CCAnimate actionWithSpriteSequence: @”skeleton_kicking_s%04d” delay: 0.1f restoreOriginalFrame: NO];
[skeleton runAction: [CCRepeatForever actionWithAction: animation]];
[self addChild: skeleton];
And then you are done! 🙂
You now have an animated skeleton in your game 🙂