Rotating and animating a simple ship using Cocos2d and SneakyInput

First off I would like to thank Andreas for making his TexturePacker software available for free to development bloggers – http://www.texturepacker.com/ and Mike of  www.71squared.com for providing me with a copy of Particle Designer which I will do a separate blog on later once I have had time to play with it some more – http://particledesigner.71squared.com/

I have been playing with Cocos2d for a little while now and have read lots of tutorials, forum posts and blogs and have decided to share this post as I have not seen any posts about rotating a CCsprite in Cocos2d – http://www.cocos2d-iphone.org/  – using  the degrees from SneakyInput – https://github.com/sneakyness/SneakyInput and changing the sprite as it rotates using a spritesheet.

I am going to be using this spritesheet:

Here is a quick youTube click of how it all looks running:

If you want to follow along you can download the source code from here – http://dl.dropbox.com/u/60608455/Simple_Ship_With_Rotation.zip

In GameScene.m file, we just create our sprite cache:

[[CCSpriteFrameCache sharedSpriteFrameCache] addSpriteFramesWithFile:@”Simple_Ship.plist”];

then our player:

player = [[Player alloc] initWithGame:self];   –  this also sets our start frame for our sprite to display.

and then our joystick:

gameJoystick = [[JoyStick alloc] initWithGame:self];   –   I have set up a right hand side joystick as well which is not used as yet as I want to control my bullets separately to the player. I have included a simple skin for the joystick as well.  For some reason I have to create the texture cache again in the Joystick.m file as it can not see it otherwise.  If anyone knows how to get around this, please leave a comment.

All of this code I have found out about in other tutorials:

sharedSpriteFrameCache – http://www.learn-cocos2d.com/

SneakyInput Tutorial – http://www.qcmat.com/sneakyinput-joystick-dpad-and-buttons-for-cocos2d/

Changing the CCSprite display frame – http://www.cocos2d-iphone.org/wiki/doku.php/prog_guide:animation#using_sprite_sheets

Then in our update function all the magic happens:

Using CGSize winSize = [[CCDirector sharedDirector] winSize];

We put the player on the other side of the screen when it goes off the screen.

//Keep the Player on the iPad screen by putting player on other side of screen when it goes off the screen

if (player.playerSprite.position.y >= winSize.height+4) {

[player.playerSprite setPosition:ccp(player.playerSprite.position.x, -10)];

}

if (player.playerSprite.position.y <-10) {

[player.playerSprite setPosition:ccp(player.playerSprite.position.x, winSize.height+4)];

}

if (player.playerSprite.position.x >=winSize.width+4) {

[player.playerSprite setPosition:ccp(-10, player.playerSprite.position.y)];

}

if (player.playerSprite.position.x <-10) {

[player.playerSprite setPosition:ccp(winSize.width+4, player.playerSprite.position.y)];

}

Then using the degrees from our joystick we set the appropriate frame to display for our sprite.

int i = (int) gameJoystick.leftJoystick.degrees/6;         //work out the animation frame we need depending on the Joystick Degree

//Then we create the frame name using Simple_Ship and the value of the int i

NSString *playerframes = [NSString stringWithFormat:@”Simple_Ship00%02i.png”, i];

//Then get the frame to show

CCSpriteFrame *frame = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:playerframes];

//Then assign the frame to display to the player sprite

[player.playerSprite setDisplayFrame:frame];

Our animation has 61 frames going from 0 to 60. You need to include a frame 0 as there is a 0 degrees value.

Also I found out that your animation needs to go in a anti-clockwise direction as that is the way sneakyInput degrees goes.

I divide the degrees by 6 as there are 61 frames.

Have a play with the source code and if there is a better way of doing any thing please feel free to leave a comment with the details.