2d Skeletal Animation with Cocos2d
I’ve been toying around with several ideas for 2d side scroller games lately, but really don’t feel like creating tons of sprite sheets for all the animations. Having studied 3d modeling and animation in college, I decided, what I need is a skeletal structure – so then I can create my character pieces and just have some basic animation. This should effectively give me consistent animations across multiple characters, and also make the character creation process easier with templates for Head, Torso, Arms and Legs. Outside of that, it’s just a matter of customizing all of my animations with Cocos2d CCActions.
So, I just extend the CCNode class for my Skeleton, set it up with various Sockets (arms and legs), along with my Skeleton base -then add all of my bones hierarchically.
Here’s a bit of sample code from my method where I build the skeleton system.
-(void) setupSkeleton
{
skeleton = [CCNode node];
[self addChild:skeleton];
torso = [CCNode node];
[skeleton addChild:torso z:5];
leftArmSocket = ccp(-5,20);
rightArmSocket = ccp(5,20);
leftLegSocket = ccp(-5, -25);
rightLegSocket = ccp(5, -25);
CCSprite * head = [CCSprite spriteWithFile:@"SkeletonHead.png"];
[torso addChild:head z: 5];
head.position = ccp(10,50);
CCSprite * base = [CCSprite spriteWithFile:@"SkeletonBody.png"];
[torso addChild:base z: 2];
/* Left Arm */
lArmSocket = [CCNode node];
[torso addChild:lArmSocket z:3];
lArmSocket.position = leftArmSocket;
lArm = [CCSprite spriteWithFile:@"SkeletonArm.png"];
[lArmSocket addChild:lArm];
lArm.anchorPoint = ccp(0.5,1.0);
/* Right Arm */
rArmSocket = [CCNode node];
[torso addChild:rArmSocket z:0];
rArmSocket.position = rightArmSocket;
rArmSocket.rotation = -55;
rArm = [CCSprite spriteWithFile:@"SkeletonArm.png"];
[rArmSocket addChild:rArm];
rArm.anchorPoint = ccp(0.5,1.0);
/* Left Leg */
lLegSocket = [CCNode node];
[skeleton addChild:lLegSocket z:1];
lLegSocket.position = leftLegSocket;
lLeg = [CCSprite spriteWithFile:@"SkeletonLeg.png"];
[lLegSocket addChild:lLeg];
lLeg.anchorPoint = ccp(0.5,1.0);
/* Right Leg */
rLegSocket = [CCNode node];
[skeleton addChild:rLegSocket];
rLegSocket.position = rightLegSocket;
rLeg = [CCSprite spriteWithFile:@"SkeletonLeg.png"];
[rLegSocket addChild:rLeg];
rLeg.anchorPoint = ccp(0.5,1.0);
}
So, there’s that… hopefully I’ll build this out so that by extending the Skeleton class I can set all of my sprites first, and THEN setup the skeleton – but I’m just getting some of the basic mechanics out of the way first.
So, hopefully someone out there finds this interesting. I’ll try and post some updates when I’m able and maybe some sample video as I go.
How to use CCLabelBMFont as a CCMenuItem in a CCMenu
I’m finally getting around to setting up some stats/menus/labels in my app and hit a little bit of a hurdle that I wanted to document in case it helps anyone else out. How to use CCLabelBMFont as a CCMenuItem in a CCMenu.
First you’ll need your .fnt added to your Resources (I used hiero – the java based font creator to turn a .ttf into .fnt and .png). Then just use the code below to add your label label and point your menu item’s label to it. Works like a charm!
CCLabelBMFont *menuItemLabel = [CCLabelBMFont labelWithString:@"Play" fntFile:@"font.fnt"]; CCMenuItemLabel *menuItem = [CCMenuItemLabel itemWithLabel:menuItemLabel target:self selector:@selector(playMethod:)];
CCMenu *menu = [CCMenu menuWithItems:menuItem, nil]; [self addChild:menu];
Objective-C Method for getting random CGPoints
Here’s a pretty simple method for generating random CGPoints (great for using to randomize positions of enemies or obstacles on level load).
Just add this in your interface:
-(CGPoint) randomPoint;
And this in your implementation:
-(CGPoint) randomPoint
{
CGSize winSize = [CCDirector sharedDirector].winSize;
int maxY = winSize.height;
int maxX = winSize.width;
return ccp(arc4random() % maxX, arc4random() % maxY);
}
Enjoy!
How to reorder sprites (CCSprite) zindex/zorder in Cocos2d
So I found myself with multiple sprites not knowing when they were stepping on top of each other. We don’t want that do we? Here’s a quick solution, and for a small project without a ton of sprites it seems to do the trick just fine without any noticeable performance hits.
Just put the following in your tick or update (or wherever you loop through all your sprites).
int newZ = (sprite.position.y * -1) + 1000;
[self reorderChild:sprite z:newZ];
A little explanation, all this does is set the sprites zOrder based on it’s position.y, we multiply it by -1 to make it negative and then add 1000 because the position.y is calculated from bottom to top and we want our lower positioned sprites to take on a greater zOrder value.
Hope that helps! If you have another solution please share it below!
iOS/Objective C Development Update
So, in all honesty – it’s going pretty slow. Partially because I have so many distractions going on right now, but also because there’s a good learning curve when learning Objective C when coming from PHP – mainly in the syntax. I do feel like I’ve made some great progress so far though. I’ve been learning a lot of the basics when setting up a game as well as just a general application. Hopefully I’ll have something to show for it soon. I’ve also had the realization that there aren’t enough tutorials – and the ones that are out there are usually just replications of other tutorials that exist.
Furthermore, I’ve been frustrated to find that a few books I would love to read reference deprecated methods (specifically thinking of cocos2d here). Have I mentioned I’m playing with cocos2d? Actually, I haven’t. Cocos2d is a 2d game engine for iPhone/iPad. It’s free to use and seems to have a great community of developers – though I haven’t gotten up the guts to post my questions yet for fear of ridicule at my newbness, haha.
Well, enough about that – hope to show off what I’ve been working on soon and have an app in the app store within the next 2 months. Thanks for reading!
Learning Objective-C
So, for a while now I’ve been itching to really dive into iPhone development. In the past I’ve only tinkered and played around, but I decided – it might be time to get serious. I’ve used Titanium Appcelorator enough to see that it’s amazing for jumping right into creating an iPhone app, but I always thought in the back of my mind that I really wanted to learn to use the iPhone SDK and to discover the full capabilities. The only drawback, I don’t have any experience with programming in C. So, after lots of google searches and running through a few tutorials I decided to give the iOS Reference Library a go – and I found a great article I’d like to share with you all. Learning Objective-C: A Primer. It starts of by explaining different extensions you’ll encounter and then moving right into Classes/Methods/Properties/Strings and Protocols/etc.
My first reading through already has me feeling as though I have a great foundational understanding of Objective-C and how it might be different from say, PHP. I’m great about starting new projects and losing interest or moving on to another project because I get excited about it, but I’m hoping to make enough progress with learning Objective-C that it will become yet another tool in my development toolbox.
Update:
Just wanted to say – Learn Objective-C at CocoaDevCentral.com is the best, clearest and most easy to follow tutorial I’ve read about Objective-C thus far.
iPhone SDK 3.1.3 Download for Leopard (if you don’t have Snow Leopard!)
I ran into a bit of an issue last night. I needed to upgrade from iPhones OS SDK 3.0 to 3.1.3 (I hadn't because I hadn't had a need in the past 8 months). Well, upon trying to use Appcelerator I discovered that it requires the iPhone SDK to be >3.0… alright, head on over to apple but alas… there’s no way to download 3.1.3! Doesn't it figure, I’m still running Leopard, and 3.2 is Snow Leopard ONLY. Pft. So, after much searching I finally managed to find a download link for the iPhone SDK 3.1.3.
Download iPhone SDK 3.1.3 and Xcode 3.1.4 – last verified 9-10-10
If this post helped you out, please leave a comment below. I love knowing that it's been so beneficial to everyone that found themselves in the same predicament I was in!