Creating the first scene – the main menu

Our first scene happens to be the opening screen of the game—the main menu. It is what the users will see when the game has finished loading. This scene is defined in mainmenu.js in the source for this project. This is what it looks like:

var MainMenu = cc.Layer.extend({

  init:function () {
    this._super();

    return true;
  }
});

var MainMenuScene = cc.Scene.extend({
  onEnter:function () {
    this._super();
    var layer = new MainMenu();
    layer.init();
    this.addChild(layer);
  }
});

As you can see, we have two entities here; an object called MainMenu, which is of type cc.Layer, and a class called MainMenuScene, which extends the cc.Scene class. Understandably, if you've worked on Cocos2d-x before, this is the way the various screens within a game are structured into scenes and layers. If you do need to brush up on some Cocos2d node graph basics, feel free to pay a visit to the following link:

http://www.cocos2d-x.org/wiki/Scene_Graph

Now that we have created a cc.Scene class and a cc.Layer class, it's time to create some basic UI elements. We add a title and a play button to our main menu and add some color to the background. Hence, the following code is added to the init function of MainMenu:

// create a coloured layer as background
var background = cc.LayerColor.create(cc.c4b(25, 0, 51, 255), this.screenSize.width, this.screenSize.height);
this.addChild(background);
 
// create a label to display the name of the game
var titleLabel = cc.LabelTTF.create("ColourSmash", "Comic Sans MS", 64);
titleLabel.setPosition(cc.p(this.screenSize.width * 0.5, this.screenSize.height * 0.8));
this.addChild(titleLabel, 1);
 
// create a play button to move to the game world
var playButton = cc.MenuItemSprite.create(cc.Sprite.create(s_Play));
playButton.setCallback(this.onPlayClicked, this);
playButton.setPosition(cc.p(this.screenSize.width * 0.5, this.screenSize.height * 0.5));
 
// create a menu that will contain the button above
var menu = cc.Menu.create(playButton);
menu.setPosition(0,0);
this.addChild(menu, 1);

Notice how the callback is set for the play button. In Cocos2d-html5, we need not specify the kind of function pointer that we're setting into the callback. Since all functions are objects in JavaScript, we need to pass the handler function, and the class it belongs to, as parameters to the setCallback function. The handler function that will take us to the GameWorld is given as follows:

onPlayClicked:function(){
  // ask the director to change the running scene
  cc.Director.getInstance().replaceScene(cc.TransitionFade.create(0.5, new GameWorldScene()));
}

Note

An important difference in the API of Cocos2d-x and Cocos2d-html5 is the absence of selector types in the latter. Whether a function has to be passed as a schedule_selector, a callfunc_selector, or a menu_selector, the API requires only the reference to the function.

The code for the play button's callback is pretty straightforward. It just tells the director to replace the current scene with GameWorldScene and include a smooth fade transition.

That completes a simple version of our MainMenu, but how will this scene be displayed in the first place? To answer that question, we navigate to the bottom of the main.js file and pass an object of our MainMenuScene class as an argument to the cocos2dApp class' constructor:

var myApp = new cocos2dApp(MainMenuScene);

This will set MainMenuScene as the first scene that will be displayed when the web application has loaded.

Tip

Downloading the example code

You can download the example code files from your account at http://www.packtpub.com for all the Packt Publishing books you have purchased. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.