Step 7: Developing Main Menu Screen for the game

Basic settings before creating any new classes
  • Window size
    • We can set the window size @ the function _tWinMain() in AppDelegate.cpp
    • Set as 800X600, If you have wider screen go for higher resolution
    • eglView.setFrameSize(800, 600); 
  • Window Title
    • We can set the window title by function setViewName. Set the name as BubbleBurst.
    • eglView.setViewName("Bubble Burst")
Now we go to the Main Menu. For this we have to create a main menu layer and attach it to a  main menu  scene. And the director will run this. Create 2 files MainmenuScene.h and MainmenuScene.cpp.
Download the code here for this tutorial.

Following is the contents of  MainmenuScene.h

#include "cocos2d.h"

class MainMenu : public cocos2d::CCLayer
// Here's a difference. Method 'init' in cocos2d-x returns bool, instead of returning 'id' in cocos2d-iphone
virtual bool init();

// there's no 'id' in cpp, so we recommand to return the exactly class pointer
static cocos2d::CCScene* scene();

// functions for click even handling
void onNewGame(CCObject* pSender);
void onOptions(CCObject* pSender);
void onQuit(CCObject* pSender);

// implement the "static node()" method manually


We had created MainMenu layer from CCLayer. And assigned three function for 3 buttons in the menu as designed by us in the beginning of this chapter. If you remember this is exactly similar to the HelloWorldScene class which is created automatically by the cocos2dx template.

Following is the contents of  MainmenuScene.cpp
#include "MainmenuScene.h"
#include "HelloWorldScene.h"

using namespace cocos2d;

CCScene* MainMenu::scene()
CCScene* scene = NULL;
// 'scene' is an autorelease object
scene = CCScene::create();
CC_BREAK_IF(! scene);

// 'layer' is an autorelease object
MainMenu *layer = MainMenu::create();
CC_BREAK_IF(! layer);

// add layer as a child to scene
} while (0);

// return the Main menu scene
return scene;

// on "init" you need to initialize your instance
bool MainMenu::init()
bool bRet = false;
CC_BREAK_IF(! CCLayer::init());

// Enable touch/click actions

// Main menu with 3 items
CCMenuItemFont* item1 = CCMenuItemFont::create( "New Game", this, menu_selector(MainMenu::onNewGame) );
CCMenuItemFont* item2 = CCMenuItemFont::create( "Options", this, menu_selector(MainMenu::onOptions) );
CCMenuItemFont* item3 = CCMenuItemFont::create( "Quit", this, menu_selector(MainMenu::onQuit) );

// combine to form a menu and allign Vertically
CCMenu* menu = CCMenu::create( item1, item2, item3, NULL );

// add this to the layer
this->addChild( menu, 1 );

bRet = true;
} while (0);

return bRet;

void MainMenu::onNewGame(CCObject* pSender)
// Will do this on next step

void MainMenu::onOptions(CCObject* pSender)
// Will do this on next step

void MainMenu::onQuit(CCObject* pSender)
// Exit game

scene() function will create a scene and return the pointer to the director.
And MainMenu::create() will create a MainMenu layer and you want to add it to the scene.

init() function will create a menu with 3 menu items( CCMenuItemFont ). And added to the layer for displaying on the screen. For click event of these three item, three function are added for handling the click event.

The MainMenu of our game BubbleBurst look like

Get the code for the tutorial here in my dropbox.
Go to tutorial Index

No comments:

Post a Comment