Monthly Archives: April 2013

Accelerometer and cocos2d v2.x

I decided to mess around with the accelerometer a little using cocos2d. I started a new project in Xcode using the basic cocos2d template. I dragged over a few images from Vicki Wenderlich’s web site into my Resources folder and I’m ready to go.

In the AppDelegate.m file change [director_ setDisplayStats:YES]; to [director_ setDisplayStats:NO]; to get rid of the frame rate and all of those stats in the simulator. I also changed the top line from #import "IntroLayer.h" to #import HelloWorldLayer.h then I changed the line [director runWithScene: [IntroLayer scene]]; to [director runWithScene: [HelloWorldLayer scene]];. This makes the app go right to the HelloWorldLayer instead of going to the IntroLayer first.

Ok, in HelloWorldLayer.h change the @interface line to say @interface HelloWorldLayer : CCLayer {. Then add these two lines:
CCSprite *background;
CCSprite *monkey;

Then in the HelloWorldLayer.m delete everything from the init after the line if( (self=[super init]) ) { and add this to setup a background:
background = [CCSprite spriteWithFile:@"bg-jungle.png"];
background.anchorPoint = ccp(0,0);
[self addChild:background];

Build and Run and you should have a background image with no stats and no default stuff (hopefully) that the cocos2d template does for you.

Ok now what? This was all pretty simple so far. First we need to add a line to the init to enable the accelerometer:
self.AccelerometerEnabled = YES;

Ok that was easy. Add the monkey to your project now using this code:
-(void) monkey {
CGSize winSize = [[CCDirector sharedDirector] winSize];
monkey = [CCSprite spriteWithFile:@"monkey_arms_up.png"];
monkey.position = ccp(winSize.width/2, monkey.contentSize.height/2);
monkey.tag = 2;
[self addChild: monkey];

Make sure you add [self monkey]; to your init. Build and Run and you should have a monkey at the bottom of the screen in the middle.

Do you see the line above that says monkey.tag = 2;? In the +(CCScene *) scene method above, add this before the return scene;:
layer.tag = 1;

These tags are used later in the accelerometer method. In fact, let’s add that code now!

#define kPlayerSpeed 20
#define kHeroMovementAction 1
-(void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration
HelloWorldLayer *layer = (HelloWorldLayer *)[[[CCDirector sharedDirector] runningScene] getChildByTag:1];
CCSprite *player = (CCSprite *)[layer getChildByTag:2];

float destX, destY;
float currentX = player.position.x;
float currentY = player.position.y;
BOOL shouldMove = NO;

if(acceleration.y < -0.25) { destX = currentX + (acceleration.y * kPlayerSpeed); destY = currentY; shouldMove = YES; } else if (acceleration.y > 0.25) {
destX = currentX + (acceleration.y * kPlayerSpeed);
destY = currentY;
shouldMove = YES;

if(shouldMove) {
CGSize wins = [[CCDirector sharedDirector] winSize];
if(destX < 30) { id move = [CCMoveBy actionWithDuration:3 position:ccp(10,0)]; id action = [CCEaseBackOut actionWithAction:move]; [monkey runAction: action]; } else if (destX > wins.width - 30) {
id move = [CCMoveBy actionWithDuration:3 position:ccp(-10,0)];
id action = [CCEaseBackOut actionWithAction:move];
[monkey runAction: action];
} else {
CCAction *action = [CCMoveTo actionWithDuration:1 position: CGPointMake(destX, destY)];
[action setTag:kHeroMovementAction];
[player runAction:action];
} else {
[player stopActionByTag:kHeroMovementAction];

This code will make the monkey move right or left. Connect your iOS device then build and run to use it. The accelerometer does not work in the simulator. Most of this code was taken from the official cocos2d site where they showed how to use the accelerometer. I added a way to make the monkey bounce off the sides when he reaches the end so he doesn’t go off the screen.

Contact me via twitter at @jon01 if you have any questions! You can download the whole project from Github.