Tutorial Cocos2d Create Your Simple Game – 6: Adding “Pause Game”

This time the tutorial will be really simple, we are will add a “Pause Screen” to our game. This tutorial is following the “Create Your Simple Game” tutorial, I recommend you to be following from the FIRST tutorial HERE. Or check my PREVIEW Tutorial HERE. But if you are here only for the “Pause”,  it’s okay, any problems comment. :)

Adding a Pause Button

First of all we will need a “Pause Button“. Right click over the image bellow and “Save As” with the name of “pause.png”:

Add the this image “pause.png” to your “Resources/” group in XCode. (Drag and drop the file in the “Resources”)

Before we add the code to create the button inside of the init, we must import a new “Class”:

#import “PauseScene.h”

An error will show cause you yet didn’t create the PauseScene node.

Now with our “Pause Button”, we will add it to our Game Screen, so go to Game.m and inside of “-(id) init{}“:

CCMenuItem *Pause = [CCMenuItemImage itemFromNormalImage:@”pause.png”
selectedImage: @”pause.png”
target:self
selector:@selector(pause:)];
CCMenu *PauseButton = [CCMenu menuWithItems: Pause, nil];
PauseButton.position = ccp(460, 295);
[self schedule:@selector(tick:) interval:1.0f/60.0f];
[self addChild:PauseButton z:1000];

Here when we click over “Pause Button” it will call the function “pause”, but we just don’t have it yet, so add this “pause” function outside of the “init“:

-(void) pause: (id) sender{
[[CCDirector sharedDirector] pushScene:[PauseScene node]];
}

Now let’s create our PauseScene class.

Right click over your Project Group name, here is “Tutorial” and Select “New File”:

Select CCNode class from cocos2d and Next.

Subclass of CCLayer and Next again.

Save As: PauseScene and click Create.

PauseScene.h and PauseScene.m is now listed on your project, first let’s edit the PauseScene.h:

Add over the “@end” and outside of “@interface” this line to declare the scene:

+(id) scene;

Your “PauseScene.h” shall looks like:

And let’s head to the PauseScene.m

First let’s work over the scene, add this code bellow @implementation to declare a simple layer:

+(id) scene{
CCScene *scene=[CCScene node];

PauseScene *layer = [PauseScene node];

[scene addChild: layer];

return scene;
}

Now outside of (id) scene let’s create the init for the PauseScene:

-(id)init{
if( (self=[super init] )) {
CCLabelTTF *label = [CCLabelTTF labelWithString:@”Paused”
fontName:@”Courier New”
fontSize:30];
label.position = ccp(240,190);
[self addChild: label];
[CCMenuItemFont setFontName:@”Courier New”];
[CCMenuItemFont setFontSize:20];

CCMenuItem *Resume= [CCMenuItemFont itemFromString:@”Resume”
target:self
selector:@selector(resume:)];
CCMenuItem *Quit = [CCMenuItemFont itemFromString:@”Quit Game”
target:self selector:@selector(GoToMainMenu:)];

CCMenu *menu= [CCMenu menuWithItems: Resume, Quit, nil];
menu.position = ccp(249, 131.67f);
[menu alignItemsVerticallyWithPadding:12.5f];

[self addChild:menu];

}
return self;
}

We will Need the “Resume” and the “Quit” function, the “Quit will take us back to the Star Game Screen and the “Resume” will resume our game.

Outside of “init” add:

-(void) resume: (id) sender {

[[CCDirector sharedDirector] popScene];
}

-(void) GoToMainMenu: (id) sender {

[[CCDirector sharedDirector] sendCleanupToScene];
[[CCDirector sharedDirector] popScene];
[[CCDirector sharedDirector] replaceScene:[CCTransitionFade
transitionWithDuration:1
scene:[HelloWorldLayer node]]
];
}

Oh! and dont’t forget, for this pause call the “HelloWorldLayer” node (our Star Game Screen) and the Resume we will need import both scenes yet here in PauseScene.m:

#import “HelloWorldLayer.h”
#import “Game.h”

Your PauseScene.m shall looks like:

Well, that is all for this week Guys, in the Next Tutorial we will do a little of “Sound” and you can check it HERE!!!!. If you have any problem with the tutorial just comment bellow and I will try help, cya. :)