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.

Screen Shot 2013-01-26 at 4.42.06 AM

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.

Screen Shot 2013-01-26 at 3.22.08 AM

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

Screen Shot 2013-01-26 at 3.22.53 AM

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”.

Screen Shot 2013-01-26 at 3.23.25 AM

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”

Screen Shot 2013-01-26 at 3.25.32 AM

Select the CCNode class and click Next.

Screen Shot 2013-01-26 at 3.25.51 AM

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

Screen Shot 2013-01-26 at 3.26.07 AM

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.

Screen Shot 2013-01-26 at 3.26.28 AM

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

Screen Shot 2013-01-26 at 3.26.51 AM

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:

Screen Shot 2013-01-26 at 3.40.24 AM

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:

Screen Shot 2013-01-26 at 3.41.00 AM

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:

Screen Shot 2013-01-26 at 3.45.42 AM

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.

Imagem

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”.

Screen Shot 2013-01-26 at 3.57.38 AM

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:

Screen Shot 2013-01-26 at 4.39.23 AM

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

Screen Shot 2013-01-26 at 4.18.31 AM

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

Screen Shot 2013-01-26 at 4.19.31 AM

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:

Screen Shot 2013-01-26 at 4.22.37 AM

Now Let’s run the Simulator again. 🙂

Screen Shot 2013-01-26 at 4.42.06 AM

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. 🙂

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

  1. Do you mind if I quote a few of your posts as long as I
    provide credit and sources back to your website?
    My blog site is in the exact same niche as yours and my visitors would definitely benefit from some of the information you provide here.
    Please let me know if this ok with you. Thanks a lot!

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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