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).
Meet:
(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:
- CCAnimate+SequenceLoader.h
- CCAnimate+SequenceLoader.m
- CCAnimation+SequenceLoader.h
- CCAnimation+SequenceLoader.m
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 🙂
Sources:
http://www.publicspace.net/ABetterFinderRename/
http://reinerstileset.4players.de/monstersE.html
http://www.texturepacker.com/2010/12/11/using-texturepacker-with-3rd-party-tile-sets/
http://www.texturepacker.com/2010/12/16/improved-sprite-loader/
http://www.code-and-web.de/downloads/AnimationSequenceLoader/1.0/AnimationSequenceLoader.zip
Michelle Chen 