Tags

Categories

Creating a simple menu with scene transition in cocos2d

cocos2d for iPhone is a fast, free, flexible, community-supported and easy to use framework for making iPhone games.

In this first tutorial, we'll discuss how to create a main menu scene with transition to a second scene using cocos2d.

What you'll need:

A Mac with Xcode 3.0 or higher installed.

A recent version of the cocos2d framework installed. You can find it and installation instructions here.

Create a new cocos2d project

In Xcode, choose File -> New Project and select cocos2d Application from your list of templates.

Click "Choose", name the project "BestGameEver", and click "Save". If this is your first time using cocos2d, you might want to build and run the default HelloWorld application in the simulator. We won't be needing the HelloWorldScene, so let's just delete both the HelloWorldScene.h and HelloWorldScene.m file.

Next, open up the BestGameEverAppDelegate.m file and look for this line in the applicationDidFinishLaunching: method:

[[CCDirector sharedDirector] runWithScene: [HelloWorld scene]];

This is the scene that will load when your app launches. Change HelloWorld to MainMenuScene, which we're about to create:

[[CCDirector sharedDirector] runWithScene: [MainMenuScene scene]];

At the top of the file, change the HelloWorld import statement to import our MainMenuScene instead:

#import "MainMenuScene.h"

Create the new scenes

What we will be need are scenes for our main menu and for our game, so let's create those now. From the Xcode menu, click File -> New File… In the templates menu select Cocoa Touch Class and double-click Objective-C class.

Name the file MainMenuScene and be sure that "Also create MainMenuScene.h" is also checked. Repeat this process to create your GameScene.h and GameScene.m files.

Let's deal with the MainMenuScene first. Open up the MainMenuScene.h interface file and replace whatever is in it with the following:

#import "cocos2d.h"

@interface MainMenuScene : CCLayer

{

}

+(id) scene;

@end

This is the standard structure of scenes in cocos2d. First, we're importing the cocos2d class files. Next, we're setting up our interface section and declaring our MainMenuScene which will be a child of the cocos2d class CCLayer. Finally, we declare the class method that will return our scene.

Next up, the MainMenuScene.m implementation file. Select it, delete its contents, and replace with the following:

#import "MainMenuScene.h"

@implementation MainMenuScene

+(id) scene

{

CCScene *scene = [CCScene node];

MainMenuScene *layer = [MainMenuScene node];

[scene addChild: layer];

return scene;

}

-(id) init

{

if((self=[super init])){

}

return self;

}

- (void) dealloc

{

[super dealloc];

}

@end

Again, very similar to the HelloWorldScene.m. First, we're creating our scene which will contain all of our main menu's content. Then we're creating a MainMenuScene layer where we'll put our text, buttons, etc.

There is a bit of confusion between scenes and layers, so let me try to simplify it through an example. Think of scenes are containers for different views or screens in a game. You put your content on layers, and add these layers to the scene. For example, you might have a MainMenuScene, a LevelSelectScene, a GameScene, a GameOverScene, etc. In the GameScene you might add a background layer, a score layer, and a sprites layer.

The init method contains all the things you want to happen when the scene is loaded. For example, here you might want to add your buttons and title. Put everything between the:

if((self=[super init])){

}

return self;

The dealloc method is for memory management stuff we won't need to worry about for this tutorial.

Add a title to our scene

So our MainMenuScene looks like a menu page, let's give it a title and position it near the top of the screen:

In this simple tutorial we really don't need another layer, but let's make one anyway to help illustrate their purpose. First, we'll declare a new layer for our menu and add it as a child of our scene:

CCLayer *menuLayer = [[CCLayer alloc] init];

[self addChild:menuLayer];

This layer will contain all (one!) of our menu items. Next, we'll add a button/link to start our game using CCMenuItemImage. When the user touches the button, it will change to the selected image and when released, launch the game scene. We'll use some images for the button, so add these two images to your Resources group in Xcode:

Now, let's actually create the menu and add our startButton to it. Note that we're adding the menu to the menuLayer we just created.

CCMenu *menu = [CCMenu menuWithItems: startButton, nil];

[menuLayer addChild: menu];

Create the startGame: method

Everything looks good so far, but we'll need to define where to go when the startButton is pressed. To do that, add the following method below your init method, but before the @end statement of your MainMenuScene.m file:

- (void) startGame: (id) sender

{

[[CCDirector sharedDirector] replaceScene:[GameScene scene]];

}

As you can see, we're replacing the current scene with our GameScene. We'll need to import our GameScene.h file now, so add an import statement to the top of the MainMenuScene.m file:

#import "GameScene.h"

Great, but our GameScene is blank so let's add some content to it.

Add GameScene content

Just so we don't launch to a black screen and you think this whole tutorial is a big lie, add the following to your GameScene.h file:

28 Comments

Luise |
July 6th, 2010

Thanks, that was a great help!!!

Sola |
October 18th, 2010

Thanks I have been searching for this. Ran into a problem though.

While compiling, it gives me the following error: ld: duplicate symbol _OBJC_METACLASS_$_MainMenuScene in /Users/akoredenitan/Desktop/MainMenuScene/build/Debug-iphonesimulator/libcocos2d libraries.a(MainMenuScene.o) and /Users/akoredenitan/Desktop/MainMenuScene/build/MainMenuScene.build/Debug-iphonesimulator/MainMenuScene.build/Objects-normal/i386/MainMenuScene.o”

@Sola Are you able to build and run the cocos2d “Hello World” sample project ok? If so, did you import your MainMenuScene.h in your implementation file? Also, if you want to post your code I can take a look.

Sola |
October 20th, 2010

By import do u mean I add the main menu into the class folder. If so I did that.
Sorry I am a newbie in this so basically still finding my way around.

Sola |
October 20th, 2010

I have managed to create the menu. I followed your instructions but rather than replace the HelloWorldScene, I made it my default Scene, I removed the label that was there initially and replaced with a background of my choosing so I think its okay. Also managed to add sound to it though I would love to be able to control the sound because it starts playing immediately the scene loads (I want it to wait a few seconds after scene loads before the sound is initialized.)

Thank you for the response earlier forgot to thank you for the quick response. I would also like to know if you have other similar tutorials available.

This doesn’t work. It will work if I put it all into the init function. But that seems rather messy. Seems like a scope problem, but I can’t seem to get around it. Any thoughts much appreciated. Thank you for the excellent tutorial.

Thanks , finally understood what is scene and layers and how to use it . can u tell how to load hd and non hd images from Plist , any link to some site would also be great.

Gaurav |
June 27th, 2011

Hi , after the transition on my second scene i have placed the label but its not appearing what can i do? thanks

Greg |
July 4th, 2011

THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU

This is the ONLY tutorial I’ve found that is:

1 – complete
2 – ACTUALLY WORKS

Thank you so much!!! I’ve literally spent ALL day going through tutorials that don’t work for menus, and this is the ONLY complete and accurate one on the internet. This just made my day!!! You’re the best!!!

I’ve looked through tons of books too, and none of them teach menus in Cocos2D, so HELLA props to you for creating this tutorial.

Greg |
July 4th, 2011

THANK YOU THANK YOU THANK YOU THANK YOU THANK YOU

This is the ONLY tutorial I’ve found that is:

1 – complete
2 – ACTUALLY WORKS

Thank you so much!!! I’ve literally spent ALL day going through tutorials that don’t work for menus, and this is the ONLY complete and accurate one on the internet. This just made my day!!! You’re the best!!!

I’ve looked through tons of books too, and none of them teach menus in Cocos2D, so HELLA props to you for creating this tutorial.

Bengamen |
August 6th, 2011

Thx alot,
this will help me out !

Wesley Bastos |
August 6th, 2011

Very good tutorial!

Paul |
August 18th, 2011

Could you show me what should be in each file? I got a lot of errors. Was I supposed to create another file named GameScene?

The code works for me, but once i call my Box2D Game Scene, I get more that 200 compile errors, which all revolve around stuff that is expected to be implemented. Both parts work fine independently. Does anybody know how to glue them together ;)?!

Hendrik |
February 3rd, 2012

I figured out what the problem was. I was using another tutorial, which implemented the ContactListener of Box2D in Objective-c++. After renaming MainMenuScene.m to MainMenuScene.mm, the errors disappeared!

Seanie323 |
February 28th, 2012

After entering all the code. i can build and run the project but it keeps crashing before i run it

The Tutorial is great and it is helping me as a programmer, but after I followed everything, I recieved this error saying: Assigning to CCdirectorIOS * from incompatible type ‘void’. The error is coming from AppDelegate.m . Can someone give my any advice how to fix this please ? Thank You