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.