HTML and CSS Reference
In-Depth Information
Adding the Enemy Menu and the Show Range of the Game
In this part, you allow users to control monster creation manually. Thus you will add a menu item to the toolbar layer
to control this.
All of the menu items will be added to the tool layer that you already defined. The code to do this is shown in
Listing 24-11 through Listing 24-13.
Listing 24-11. Creating theGreen MonsterMenu Item in GameLayer.js
// add monster menu item of Green
var green = cc.Sprite.create ( s_Monster [ 0 ] ) ;
var greenSelected = cc.Sprite.create ( s_Monster [ 0 ] ) ;
greenSelected. setColor(cc.c4b( 125 , 125 , 125 , 125 ) ) ;
var menuMonsterGreen = cc. MenuItemSprite.create (
green ,
greenSelected ,
function ( ) {
this.addMonster ( Monster.createGreen ( ) ) ;
} , this ) ;
menuMonsterGreen. setPosition ( cc.p( 118 , -245*0.6 ) ) ;
The code in Listing 24-11 through Listing 24-13 should be added in initToolsBar () of GameLayer.js . Listing 24-11
shows that you created a green monster sprite with an image for normal status. You then made its selected status grey.
It then used the normal sprite and the grey sprite to create a menu item in the cc.MenuItemSprite.create() API.
The menu item will be added to the menu later. The callback function of the menu item is addMonster . It will create a
monster and add it to the game when clicked.
Similarly, you add the purple and orange monsters and set their position. Refer to GameLayer.js for the
implementation. You also need an item to show the attackable range of the tower. It is created by cc.MenuItemFont
(see Listing 24-12).
Listing 24-12. Creating a “Show Range” Menu Item in GameLayer.js
var menuShowRange = cc.MenuItemFont.create ( "Show Range" , function ( ) {
// callback function, for showing the attackablt range.
} , this ) ;
menuShowRange.setFontSize ( 14 ) ; // set font size.
menuShowRange.setPosition ( cc.pAdd ( menuMonsterGreen. getPosition ( ) , cc. p( -120 , 5 ) ) ) ;
After creating all of the menu items, you will use the cc.Menu.create() function to build the menu and add it to
the ToolBar layer. The code to do this is shown in Listing 24-13, and the result is shown in Figure 24-17 .
Listing 24-13. Creating a Menu with All Items in GameLayer.js
var menu = cc. Menu.create (
menuMonsterGreen ,
menuMonsterPurple ,
menuMonsterOrange ,
menuShowRange
) ;
toolLayer. addChild ( menu ) ;
 
Search WWH ::




Custom Search