Cocos2D : Actions

In our previous cocos2d tutorial we looked at Scenes and Layers, we added a background layer and put a Sprite onto the foreground. In this tutorial we will create some actions on the sprite. Also we will detect a touch on the sprite, which will trigger a different action. I will use the previous project so lets's open it, or otherwise download it here. We remove the previously created background, as we no longer need it for this tutorial. Go to HelloWorldLayer.m and remove the following lines in the CCSCene method.

CCSprite *background = [CCSprite spriteWithFile:@"cartoon_landscape.png"]; 
background.anchorPoint = ccp(0,0);
[layer addChild:background z:-1];

Also, in the init method remove the following lines.

CCSprite *goat = [CCSprite spriteWithFile:@"cartoon_goat.png"]; 
goat.position = ccp(250,250);
[self addChild:goat];

Create a property of our goat in HelloWorldLayer.h

@property (nonatomic, strong) CCSprite *goat;

In the init method in HelloWorldLayer.m, load the sprite and move it to a point with CCMoveTo. The movement will take 2 seconds.

if( (self=[super init]) ) { 
self.goat = [CCSprite spriteWithFile:@"cartoon_goat.png"];
self.goat runAction:[CCMoveTo actionWithDuration:2.0 position:ccp(200,200)]];

[self addChild:self.goat];

Build and Run, the goat will move.

Let's make the goat rotate a full 360 degrees, insert the following line after the CCMoveTo line

[self.goat runAction:[CCRotateBy actionWithDuration:2.0 angle:360]];

Build and Run , the goat will move and rotate simultaneously.

What if we first want the movement, followed by the rotation. Here the CCSequence can be of help. First delete the following lines

[self.goat runAction:[CCMoveTo actionWithDuration:2.0 position:ccp(200,200)]]; 
[self.goat runAction:[CCRotateBy actionWithDuration:2.0 angle:360]];

We create some id's to make the call to CCSequence easier. Enter the following lines

id moveToAction = [CCMoveTo actionWithDuration:2.0 position:ccp(200,200)]; 
id rotateByAction = [CCRotateBy actionWithDuration:2.0 angle:360];

[self.goat runAction:[CCSequence actions:moveToAction, rotateByAction, nil]];

Build and Run, now the goat first will move and the will rotate.

We want the goat to continuous move over the screen, for this we create a helper method. First remove the rotateByAction id, as we no longer need it

id rotateByAction = [CCRotateBy actionWithDuration:2.0 angle:360];

Create a id of callback and change the CCSequence line

id callback = [CCCallFunc actionWithTarget:self selector:@selector(animationLoop)]; 
[self.goat runAction:[CCSequence actions:moveToAction, callback, nil]];

In HelloWorldLayer.m create a method named animationLoop. In this method we put define a action on the sprite, so it will move to a random position on the screen.


// Random point on screen
CGSize windowSize = [[CCDirector sharedDirector] winSize];
int x = arc4random() % (int)windowSize.width;
int y = arc4random() % (int)windowSize.height;

id moveToAction = [CCMoveTo actionWithDuration:2.0 position:ccp(x,y)];
id callback = [CCCallFunc actionWithTarget:self selector:@selector(animationLoop)];

[self.goat runAction:[CCSequence actions:moveToAction, callback, nil]];

Build and Run, the goat will move continuously.