HTML and CSS Reference
In-Depth Information
Creating Main Menu Scene for the Game
The main menu scene will display the title of the game, the game theme, and a start button that allows you to begin
the game (see Figure
24-14
).
Figure 24-14.
HalloweenDefence main menu
It is very easy to create the game. It is built on one layer that contains two sprites and a menu item. Now let's
create a
SystemMenu.js
file and add it to
appFiles
array. Then, let's extend a
SystemMenuLayer
from
cc.Layer
and
then add sprites and menu items to it. The code for doing this is provided in Listing 24-6.
Listing 24-6.
Defining
SystemMenuLayer
Class in
SystemMenu.js
var SystemMenuLayer = cc.Layer.extend ( { //extend a SystemMenuLayer from standard cc.Layer
init : function ( ) {
this._super ( ) ;
var winSize = cc.Director.getInstance( ).getWinSize ( ) ;
// init background
var background = cc.Sprite.create ( s_StartBG ) ;
background.setPosition ( winSize. width / 2, winSize.height / 2 ) ; //set the position to
screen center
this.addChild ( background , 0 ) ; // add the background image to the layer
// init title
var title = cc.Sprite.create ( s_HalloweenDefence ) ;
title.setPosition ( winSize.width / 2, winSize.height * 3 / 4 ) ;
this.addChild ( title , 1 ) ;
// add start button
// create the menu item with normal image and selected image, and set the callback function.
var StartItem = cc.MenuItemImage.create (
s_Start ,
