Tutorial Cocos2d Create Your Simple Game – 2: Creating the “Start Game Screen” for your iPod/iPhone/iPad Game

Hello Guys, today we are going to learn how to create a “Start Game Screen for your iPod/iPhone/iPad game with Cocos2d.

Before Begin, you must have  XCode and Cocos2d installed in your iMac computer and if you haven’t, you can read my previous tutorial and install it. JUST CLICK HERE.

Let’s begin.

First of all open your XCode and Create a new Project, this screen bellows will pop up, choose cocos2d on the left part bellow of: “iOS, Application, Framework & Library, Other” and choose again cocos2d  clicking on the icon.

Click “Next” and in the Screen bellow, fill the “Product Name”, that could be Your Game’s name.

Click “Next” Again and in the Screen bellow mean that XCode will keep a version control, so if you make something VERY WRONG while you are programming your game, you will be able to back for some old version, so it is good to keep the box checked and click in “Create”.

Well, after our Project is Created, let’s begin creating our “Game Screen”, the Scene where our Game will be running. Click over “File”->”New”->”New File”

Select the CCNode class and click Next.

In the Screen bellow keep the Subclass of “CCLayer”. and click Next. It will extends CCLayer to your class.

Save As: Game

It will be the name of the main Scene of the Game, where the “Adventure” takes place. Oh and keep the Targets checked for your “Project” here is Tutorial.

The “Game” will be created like the image bellow.

Like you see have 2 files:

Game.h

Game.m

Go to

–Game.m lets add the firstScene id like the code bellow

+(id) firstScene{
CCScene *firstScene = [CCScene node];
Game *layer = [Game node];
[firstScene addChild: layer];
return firstScene;
}

The code shall looks like:

Let’s go now Inside Game.h

Here don’t forget to check if import cocos 2d is on the top:

#import “cocos2d.h”

and one more important thing check if the “@interface Game” is linked with CCLayer like this:

@interface Game : CCLayer {

}

bellow (and outside) from the “interface Game” Let’s add the “firstScene” with this line bellow:

+(id) firstScene;

That is or method for the our game scene and the code will looks like:

Now lets head to the HellowWorldLayer.m file

First of all, add the:

#import “Game.h”

Bellow of your #import “HelloWorldLayer.h”

Now let’s look for the init method, is here where everything shall begin. 🙂

Looks inside the “if( (self=[super init])) {} and delete everything inside of this place, this is just the auto-generated “Hello world” and you are not gonna use it. 🙂

Your init shall look now to something like this:

So, let’s add the background of our Start Screen:

add inside of the “if( (self=[super init] )) {}”

CCSprite *bg =[CCSprite spriteWithFile:@”background.png”];

bg.position=ccp(0,0);
bg.anchorPoint = ccp(0, 0);
[self addChild:bg z:0];

Ok, but what is this background.png? 🙂

The program will looks into the Resources folder for the file background.png, so let’s add this background.png to our Resources folder.

I picked this picture fromthe first site(here) that i found wallpapers for ipod. 🙂 Save it to your computer with the name of background.png and go to finder, copy or drag it to your Resources in XCode and in the imagem vellow just “Finish it”.

Well, time for add the “Menu” for the Start a New Game.

first of all let’s choose our font and size:

[CCMenuItemFont setFontName:@"Courier New"];
[CCMenuItemFont setFontSize:18];

So time to add the Menu Items first.
CCMenuItemFont *newGame = [CCMenuItemFont itemFromString:@”New Game”
target:self
selector:@selector(startGameplay:)];

[newGame setColor:ccBLACK];
CCMenuItemFont *options = [CCMenuItemFont itemFromString:@”Options”
target:self
selector:@selector(startGameplay:)];
[options setColor:ccBLACK];

Now let’s build the Menu.

CCMenu *menu = [CCMenu menuWithItems: newGame, options, nil];
menu.position=ccp(240,100);

[menu alignItemsVerticallyWithPadding:15];

[self addChild:menu];

now your if( (self=[super init])) {}” is ready

check bellow of this “if”, if the “return self;” is there and let’s create now the “startGame” method bellow of the init:

-(void) startGame: (id) sender {
[[CCDirector sharedDirector]
replaceScene:[CCTransitionFade transitionWithDuration:1 scene:[Game node]]];
}

Your HelloWorldLayer.m shall look something like this:

Now, we are ready to test our Start Screen, just click over the Run button.

wait for a couple of seconds and if just followed this tutorial, your project should look like this:

ugly?

okay, the wallpaper and the position is for a “landscape” orientation, so lets turn our device simulator. Stop running the simulator and go to your project clicking over your project name, above the folder and in “Supported Device Orientations click in “Landscape Left or Right”. 🙂

Like this:

Now Let’s run the Simulator again. 🙂

Very better, right?

Well guys, thanks for reading this tutorial, my next tutorial will be coming soon, maybe next sunday February, 03. And if you see any mistakes from me or have any questions, problems for running, just comment bellow and I will TRY help you. 🙂

In the Tutorial 3 We are creating a simple “Joystick Pad” for our game. Click HERE to read it. 🙂