Move a sprite with Cocos2d

This tutorial will teach you how to move a sprite in Cocos 2d.

If you don’t know how to animate a sprite read Animating a Sprite with Cocos2d first.

Lets start out with the code from Animating a Sprite with Cocos2d.

In the init method add the following.

CGSize windowSize = [[CCDirector sharedDirector] winSize];

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

NSMutableArray *animFrames = [NSMutableArray array];

CCSpriteFrame *frame1 = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@”EyesClosed.jpg”];

[animFrames addObject:frame1];

CCSpriteFrame *frame2 = [[CCSpriteFrameCache sharedSpriteFrameCache] spriteFrameByName:@”Eyesopened.jpg”];

[animFrames addObject:frame2];

CCAnimation *animation = [CCAnimation animationWithName:@”blink” delay:0.4f frames:animFrames];

CCSprite *sprite = [CCSprite spriteWithSpriteFrameName:@”EyesClosed.jpg”];


[self addChild:sprite];

id animate = [CCAnimate actionWithAnimation:animation restoreOriginalFrame:NO];

id repeat= [CCRepeatForever actionWithAction:animate];

[sprite runAction:repeat];

Remember if you copy, everything inside the “” should be red if it is not just retype the “”.

Now add this to the dealloc method.

[[CCSpriteFrameCache sharedSpriteFrameCache] removeUnusedSpriteFrames];

This gets us right where we where at the end of Animating a Sprite with Cocos2d.

Now lets move the sprite. First we need to change repeat from:

id repeat= [CCRepeatForever actionWithAction:animate];


id repeat= [CCRepeat actionWithAction:animate times:10];

Now animate will only repeat 10 times.

Next add the following lines after the id repeat line.

id move=[CCMoveTo actionWithDuration:3 position:ccp(sprite.contentSize.width/2,sprite.contentSize.height/2)];

id spawn=[CCSpawn actions:repeat, move,nil];

id move is an action that will last 3 seconds and will move what ever is running the action (in our case it is sprite) to the bottom left corner. CCSpawn will run the action at the same time. So spawn will run repeat and move at the same time.

Now we need to change the runAction from:

[sprite runAction:repeat];


[sprite runAction:spawn];

This just makes sprite run the spawn action instead.

Ok run the program. You should see your sprite move across the screen. If you notice though the animation continues to run after the move is done. Lets fix that now.


id repeat= [CCRepeat actionWithAction:animate times:10];


int timesRepeat= 3/0.8+1;

id repeat= [CCRepeat actionWithAction:animate times:timesRepeat];

timesRepeat takes the duration of the move 3 and divides it by the time it takes to play one animation 0.8 seconds (each frame is displayed for 0.4 seconds and we have 2 frames so delay*number of frames = how long it takes to play the animation). I added one to the end because with an integer it cuts of the decimal places so if your animation needs to add one animation loop add one if not leave it off. Then we needed to change repeat to use timesRepeat instead of 10.

Run your code and you should see everything working right.

Now lets move the sprite back.


[sprite runAction:spawn];


id moveBack=[CCMoveTo actionWithDuration:3 position:ccp(windowSize.width-sprite.contentSize.width/2,windowSize.height-sprite.contentSize.height/2)];

id spawn2=[CCSpawn actions:repeat, moveBack,nil];

[sprite runAction:[CCSequence actions:spawn,spawn2,nil]];

Ok you have seen most of this before except for CCSequence. CCSequence runs the actions in a sequence one right after the other.

Run again and you will see the sprite go from the top right to the bottom left and back again.

This concludes move a sprite with Cocos2d.


About criter88

I am 22 and currently working on building my own Iphone game with my sister and brother in law.
This entry was posted in cocos2d. Bookmark the permalink.

One Response to Move a sprite with Cocos2d

  1. Pingback: Animating a Sprite with Cocos2d | Britney's programming guide

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s