Director

The cc.Director is a shared (singleton) object that takes care of navigating between scenes. It is an important component for controlling the flow of the game. It knows which scene is currently active and allows you to change scenes by replacing the current scene or pushing a new one onto the scene stack. When you push a new scene onto the stack, cc.Director pauses the previous scene but keeps it in memory. Later, when you pop the top scene from the stack, the paused scene resumes from its last state. cc.Director is also responsible for initializing the scheduler, action manager, and touch dispatcher.

Scene

A scene (implemented with the cc.Scene object) is more or less an independent piece of the app workflow. (Some people call them “screens” or “stages.”) Your app can have many scenes, but only one of them can be active at a given time.

For example, you could have a game with the following scenes: Intro, Menu, Level 1, Level 2, Winning Scene, Losing Scene, and High Scores. You can think of each one of these scenes as a separate application that can be connected to other scenes with a small amount of “glue” code. For example, the Intro scene might go to the Menu scene when it finishes, and the scene for Level 1 might lead to the scene for Level 2 (if the player wins) or to the Losing scene (if the player loses). An example of how scenes might flow in a game is shown in Figure 24-1.

A Cocos2d cc.Scene is composed of one or more cc.Node objects, added as children to the scene. Subclasses of cc.Node, such as cc.Layer and cc.Sprite, give the scene its appearance and behavior. Typically, you implement your screens as subclasses of cc.Layer and add them to a blank instance of cc.Scene. Afterwards, you implement your other graphics and game objects as cc.Node and add them as children to the cc.Layer you created.

Because scenes are a subclass of cc.Node, they can be transformed manually or programatically by using cc.Action. See Actions at http://cocos2d-x.org/wiki/Actions for more information.

There is also a family of cc.Scene classes called transitions, implemented with the cc.TransitionScene class. These allow you to create special transition effects when switching from one scene to another, such as fading, and sliding in from the side.

Layer

A cc.Layer is a cc.Node, and it is often used as a container for displayable elements. Layers know how to draw themselves and may be semi-transparent, allowing players to see other layers behind them. cc.Layer is very useful in defining your game's appearance and behavior, so expect to spend a considerable amount of your programming time coding cc.Layer subclasses. A series of Cocos2d layers in a regular menu scene are shown in Figure 24-2.

The cc.Layer is where you define touch event handlers. By implementing a method to handle one of the touch events (cc.TouchBegan, cc.TouchMoved, cc.TouchEnded, or cc.TouchCancelled), a cc.Layer can react to the player's interaction. These touch events are propagated to all of the layers within a scene, from front to back, until the claimed layers catch the event and accept it.

While complex applications will require you to define custom cc.Layer subclasses, Cocos2d provides several predefined layers. Some examples include cc.Menu (a simple menu layer), cc.ColorLayer (a layer that draws a solid color), and cc.LayerMultiplex (a layer that lets you multiplex its children, activating one while disabling the others).

Layers may contain any cc.Node as a child, including cc.Sprite, cc.Label, and even other cc.Layer objects. Because layers are a subclass of cc.Node, they can be transformed manually or programatically by using cc.Action.

Sprite

A Cocos2d cc.Sprite is similar to sprites that you find in other game engines. It is a 2D image that can be moved, rotated, scaled, animated, or subjected to other transformations. Sprites (implemented using the cc.Sprite class) can have other sprites as children. When a parent is transformed, all of its children are transformed as well. Because sprites are a subclass of cc.Node, they can be transformed manually or programatically by using cc.Action.

Coordinate System

Cocos2d-html5 uses the same coordinate system as OpenGL, which is also called “the right-handed Cartesian coordinate system.” It is popular in the gaming industry; however, it is different from traditional top-left coordinate systems used in web page designs. The Cocos2d coordinate system is illustrated in Figure 24-3.

For a 2D game,

• The x-axis starts at the left side of the screen and increases to the right.
• The y-axis starts at the bottom of the screen and increases upwards.

The origin (x = 0, y = 0) is at the bottom-left corner of screen. It is the first quadrant of the right-handed Cartesian coordinate system.

The anchor point is used for both positioning and rotating of an object. The anchor point coordinate is a relative coordinate. For example, the anchor point in position (0, 0), which is always defined in Cocos2d shorthand as cc.p(0, 0), corresponds to the farthest bottom-left part of that object, while cc.p(0.5, 0.5) corresponds to the center of the object. When setting the position of the object, the object is positioned such that the anchor point will be at the coordinates specified in the setPosition() call. For example, Figure 24-4 shows the result of a blue circle sprite positioned with the code shown in Listing 24-1. Similarly, when rotating the object, it is rotated about the anchor point.

Listing 24-1. Sprite has an anchorPoint of cc.p(0, 0) and a Position of cc.p(0,0)

// create sprite
var sprite = cc.Sprite.create ( "bluecircle.png" ) ;
sprite.setAnchorPoint ( cc.p( 0 , 0 ) ) ; // Anchor Point
sprite.setPosition ( cc.p( 0 , 0 ) ) ;
this.addChild ( sprite ) ;

Action

Actions are like orders given to any cc.Node object. These actions usually modify some of the object's attributes, such as position, rotation, scale, and so forth. If these attributes are modified over a period of time, they are cc.IntervalAction actions; otherwise, they are cc.InstantAction actions. For example, the cc.MoveBy action modifies the position property during a certain time period, so it is a subclass of cc.IntervalAction. In another example, the following code snippet moves a sprite 50 pixels to the right and 10 pixels to the top over a period of 2 seconds:

sprite.runAction(cc.MoveBy.create(2, cc.p(50, 10)));

Animation

In Cocos2d, animations are bound to animated actions. You can use a sequence of images to create an animation. After the animation is created, you can use the code shown in Listing 24-2 to play the animation on a sprite.

Listing 24-2. Move a Sprite 50 Pixels to the Right and 10 Pixels to the Top over a Period of 2 Seconds

var animation = cc.Animation.create ( ) ;
for ( var i = 1 ; i < 15 ; i ++ ) {
    var frameName = "res/Images/grossini_dance_" + ( ( i < 10 ) ? ( "0" + i ) : i ) + ".png" ;
    animation.addSpriteFrameWithFile ( frameName ) ;
}
animation.setDelayPerUnit ( 2.8 / 14 ) ;
animation.setRestoreOriginalFrame ( true ) ;
var action = cc.Animate.create ( animation ) ;
sprite.runAction ( cc.Sequence.create ( action, action.reverse ( ) ) ) ;

Scheduler

The Scheduler is responsible for triggering the scheduled callbacks. There are two different types of callbacks (selectors) in Cocos2d:

• Update Selector: The update selector will be called on every frame. You can customize its priority: the lower the value, the earlier it is called.
• Custom Selector: A custom selector will be called on every frame, or with a customized interval of time.

Custom selectors should be avoided whenever possible. Update selectors are faster and consume less memory.

Touch Event

Cocos2d supports two different ways of handling touch events, which are described in CCTouchDelegateProtocol.js. There is the TargetedTouchDelegate event and the StandardTouchDelegate event.

TargetedTouchDelegate offers two benefits:

• You don’t have to deal with an event set, as the dispatcher does the job of splitting them. You get exactly one cc.Touch per call.
• You can claim a cc.Touch by returning true in onTouchBegan. Updates of claimed touches are sent only to the delegate(s) that claimed them. So if you get a move/ended/cancelled update, you can be certain that it's your touch. This frees you up from having to do numbers checks when using multi-touch.

StandardTouchDelegate also has two benefits:

• Splitting an event set is something that you must do. You can get each cc.Touch from the event set.
• You don’t need to state true or false in cc.TouchesBegan. All of your touch callbacks will be called when you touch the screen.

The difference between TargetedTouchDelegate and StandardTouchDelegate is as follows:

• TargetedTouchDelegate processes touch events one by one, while StandardTouchDelegate processes touch events in an event set. Thus when you need to process a multi-touch, you should choose StandardTouchDelegate.
• TargetedTouchDelegate has a higher priority to get a touch event than StandardTouchDelegate.
• TargetedTouchDelegate supports priority: the lower the value of the priority, the earlier it is to get the event. StandardTouchDelegate doesn’t support priority.
• TargetedTouchDelegeate can swallow touch events and prevent dispatching it to a low-priority one. You can set your priority and swallowsTouches parameters when you register your touch delegate with cc.registerTargetedDelegate(priority, swallowsTouches, delegate).

Review the Tests

Figure 24-8 shows what happens when you open the link named Test cases. It will show you all of the built-in tests that come with Cocos2d-html5.

The tests are the best learning resources available. If you make changes to the source file, you will see the result immediately. It is a much faster way to learn and obtain the features that you need for your game than by trying to create everything from scratch by yourself.

Taking a Look at the Sample Games

There are two types of full game samples built-in with Cocos2d-html5. All of the source code is completely free and open to you. The following sections provide a short introduction to these sample games.

Creating the Tower Defence Project

As mentioned earlier, you can copy the template folder and then paste and rename it. You will create the game based on the template.

After the game folder is created, open up the index.html file and set the gameCanvas to 480×318 pixels. This is the design resolution of the game, which I will discuss later. You also need to set screen-orientation to landscape mode.

Cocos2d-html5 supports the features of multi-resolution adaptation, and all of your game’s coordinates are based on the design resolution, no matter the size of your browser’s window. It is easy for you to enable the multi-resolution adaptation feature. Listing 24-3 provides the code to do so.

Listing 24-3. The applicationDidFinishLaunching Function Enables the Multi-resolution Adaptation Feature in main.js.

applicationDidFinishLaunching : function ( ) {
    
    // initialize director
    var director = cc.Director.getInstance();
    
    // Set full screen mode to SHOW_ALL mode.
    cc.EGLView.getInstance().setDesignResolutionSize(480, 318,
       cc.RESOLUTION_POLICY.SHOW_ALL);
 
    // Resize the game canvas when browser size changed
    cc.EGLView.getInstance().resizeWithBrowserSize(true);
 
    // turn on display FPS
    director.setDisplayStats(this.config['showFPS']);
 
    // set FPS. the default value is 1.0/60 if you don't call this
    director.setAnimationInterval(1.0 / this.config['frameRate']);
 
    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        director.replaceScene(new this.startScene());
    }, this);
 
    return true;
}

The first half of the code in Listing 24-3 initializes the director, and it enables the multi-resolution adaptation feature of the engine and the auto resize event. It is enabled by default on the template. The setSearchPaths feature code should be removed, and you need to delete the HD and Normal folder under the res directory. Then copy all of the resources to the res directory.

There are five modes of multi-resolution adaptation.

1. EXACT_FIT: The entire application is visible in the specified area without trying to preserve the original aspect ratio.
2. NO_BORDER: The entire application fills the specified area without distortion, but possibly with some cropping, while maintaining the original aspect ratio of the application.
3. SHOW_ALL: The entire application is visible in the specified area without distortion while maintaining the original aspect ratio of the application. Borders can appear on two sides of the application.
4. FIXED_HEIGHT: The application takes the height of the design resolution and modifies the width of the internal canvas so that it fits the aspect ratio of the browser’s window.
5. FIXED_WIDTH: The application takes the width of the design resolution and modifies the height of the internal canvas so that it fits the aspect ratio of the browser’s window.

In this game, you’ll choose the SHOW_ALL mode. For more details about cocos2d multi-resolution adaptation, visit http://www.cocos2d-x.org/wiki/Multi_resolution_support.

The rest of the code turns on the statistics display, sets the frame rate, and preloads the resources.

After defining the game display, it is recommended that you configure your project setting in Cocos2d.js (see Listing 24-4).

Listing 24-4. Project Setting Configuration in Cocos2d.js

 ( function ( ) {
    var d = document ;
    var c = {
        COCOS2D_DEBUG : 2 , //0 to turn debug off, 1 for basic debug, and 2 for full debug
        box2d : false ,
        chipmunk : false ,
        showFPS : true ,
        loadExtension : false ,
        frameRate : 60 ,
        renderMode : 1 ,     //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)
        tag : 'gameCanvas' , //the dom element to run Cocos2d on
        engineDir : '../Cocos2d/' ,
        //SingleEngineFile:'../../lib/Cocos2d-html5-v2.2.2.min.js',
        appFiles : [
            'src/GameLayer.js' ,
            'src/GameMaps.js' ,
            "src/Monster.js" ,
            "src/Tower.js" ,
            'src/resource.js',
            "src/QuadTree.js",
            'src/SystemMenu.js',
            "src/GameOver.js"
            ]
        } ;
} ) ( ) ;

When you create your own JavaScript files for the game, remember to add them into the appFiles array. Similarly, you have to define all of your resources in resources.js and then preload them (see Listings 24-5A and 24-5B). Remember to add resources.js and other new JavaScript files into the appFiles array.

Listing 24-5A. Adding Background Tile Maps to the Resources Preloading Array in resources.js

var s_DtMapsTmx = "res/DtMaps.tmx" ;
var s_DtMapsImage = "res/DtMaps.png" ;
var g_resources = [
    //image
    { src : s_DtMapsImage } ,
    //tmx
    { src : s_DtMapsTmx }
] ;

Listing 24-5B. applicationDidFinishLaunching Function Preloads Resources in main.js

applicationDidFinishLaunching : function ( ) {
 
    //load resources
    cc. LoaderScene.preload ( g_resources , function ( ) {
        director. replaceScene ( new this.startScene ( ) ) ;
    } , this ) ;
 
    return true ;
}

The g_resouces will be preloaded when the engine executes the applicationDidFinishLaunching() function in main.js.

After preloading, the engine will call this.startScene() to launch the game. this.startScene is an operator and member of the class cocos2dApp. It will set the start scene SytemMenuScene to this.startScene in the ctor() function, which is your game main menu. Next, take a look at launching code on the last line of the main.js file. The game will be launched after executing this code.

var myApp = new cocos2dApp(SystemMenuScene);

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).

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 ,
        s_StartSelected ,
            function ( ) {
                // when clicked, launch the game play scene.
                cc.Director.getInstance( ).replaceScene( new GameScene ( ) ) ;
            } , this ) ;
        StartItem.setAnchorPoint ( cc.p( 0.5, 0.5 ) ) ;
 
        var menu = cc.Menu.create ( StartItem ) ;   // create the menu with the start menu item
        menu.setPosition( cc.p( 0 , 0 ) ) ;
        this.addChild ( menu , 1 ) ;
        StartItem.setPosition ( winSize.width / 2, winSize.height / 2 - 20 ) ;
    }
} ) ;

Now the game main menu layer is ready, and you can connect it to the main menu, as shown in Listing 24-7.

Listing 24-7. Connecting the SystemMenuLayer to SytemMenuScene in SystemMenu.js

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

Once the scene is created, an onEnter() function should be defined. It defines the SystemMenuLayer as its child. You can also define SystemMenuLayer in the ctor() function instead of the onEnter() function, because the ctor() function will be called automatically when the scene object is created.

Make sure that you add all of the resources in resources.js before using it, as you did in Listing 24-5A. The main menu will display on your screen.

Creating the Game Layer, Toolbar Layer, and Game Map Layer

Now it is time to create the game play scene. The first thing to do when creating a game play scene is to build a game layer. It contains all of the other layers, such as the Game Map layer, Tower layer, Monster layer, Bullet layer, and Toolbar layer.

You should create a GameLayer.js file and add it to appFiles array. The code to do this is provided in Listing 24-8.

Listing 24-8. Defining the Game Layer and Add Sub-layer to it (GameLayer.js)

// Extern GameLayer from standard cc.Layer.
var GameLayer = cc.Layer.extend({
  _maps:null,
  _winSize:null,
    init : function(){
            this._super();
            this._winSize = cc.Director.getInstance().getWinSize();
            // init game maps
            this.initMaps();   //Add and init your game map.
 
            // add tool bar
            this.initToolsBar();   //Add tool bar.
    },
    initMaps : function(){
            this._maps = GameMaps.create();
            this._maps.setPosition( cc.p( 0, 30));
            this.addChild(this._maps);  // Add game map to game layer.
    },
    initToolsBar : function(){
            var toolLayer = cc.Layer.create(); // We will add monsters menu items to this tool layer later.
            var sToolsBar = cc.Sprite.create(s_ToolsBar);
            sToolsBar.setPosition( cc.p( this._winSize.width / 2 , sToolsBar.getContentSize().height / 2));
            toolLayer.addChild(sToolsBar);
            this.addChild(toolLayer, 2);  // Add toolbar layer into game layer.
    }
});

You have created a toolbar layer and add it to game layer. You also defined a initMaps() for Game Map layer, now let’s implement it and add it to the Game layer.

As to Game Map layer, you use the Tile map editor Tiled to create the map (See Figure 24-15). You can download this powerful tool from www.mapeditor.org/download.html.

The map has three layers:

• tlBackgroud
• tlWayPoint
• tlStartPoint

tlWayPoint defines the path that the monsters will take, and tlStartPoint is the place where the monsters are born.

Tiled will export two files: DtMaps.tmx and DtMaps.png. Add these files to the /TowerDefence/res/ folder. Cocos2d-html5 natively supports .tmx files, so it is easy for you to add the map to the scene.

Now let’s create the Game Map layer, step by step. First, you need to create a GameMaps.js file and add it to appFiles array. Then define the Game Map layer and add it to the Game layer. The sample code in Listing 24-9 shows you how to define a Game Map layer. Refer to GameMap.js for details of the setting.

Listing 24-9. Defining GameMaps Class in GameMaps.js

var GameMaps = cc.Layer.extend ( {
    _tiledMap : null ,
    _mapSize : null ,
    _mapContentSize : null ,
 
    init : function ( ) {
        this._super ( ) ;
        cc.log( "game maps init.");
        // init background tilemap
        this._tiledMap = cc.TMXTiledMap.create ( s_DtMapsTmx ) ;
        this.addChild ( this ._tiledMap ) ;
 
        // set background size
        var layer = this._tiledMap.getLayer ( "tlBackground" ) ;
        this._mapSize = layer.getLayerSize ( ) ;
        this._mapContentSize =layer.getContentSize ( ) ;
 
        // init start point
        this.initStartPoint ( ) ;
 
        // init way points
        this.initWayPoints ( ) ;
 
        cc.log("map size:" + this._mapSize.width + " " + this._mapSize.height ) ;
    }
} ) ;
 
GameMaps.create = function ( ) {
    var layer = new GameMaps ( ) ;
    layer.init();
    return layer;
};

cc.log() is an important debug API of Cocos2d, which you can use to print debug messages on Chrome debugger consoles. You can also debug game code step by step on the Chrome debugger or set a breakpoint on it.

As Listing 24-8 shows, you have added the toolbar layer and the Game Map layer to Game layer. Now that the Game layer is ready, you can connect it to the game scene, as shown in Listing 24-10.

Listing 24-10. Connecting the Game Layer to Game Scene in GameLayer.js

var GameScene = cc.Scene.extend({
    onEnter:function(){
        this._super();
        var layer = new GameLayer(); // Create the GameLayer.
        layer.init();
        this.addChild(layer);
    }
});

Now the game scene is ready to run, and it should look like Figure 24-16.

There are three numbers at the bottom-left corner. These numbers represent the following statistics:

• Draw calls
• Second per frame (SPF)
• Frame per second (FPS)

You should try to keep draw calls as few as possible and keep the updating time (SPF) as low as possible to get a high CPU idle time. For example, the cocos2d engine will cache the tile map automatically to improve performance, because the tile map is created by lots of tiles, and their position is always the same. This is why the draw calls only reads 4 with lots of tiles displayed on the screen. SPF will be indicated as 0 when it is less than 1ms.

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 ) ;

Creating Towers and Bullets

There are two different towers and two different types of bullets. The low-level tower attacks monsters with low-level bullets, while the high-level tower attacks monsters with high-level bullets.

The towers are created by four properties: tower building, weapon type, attackable range, and bullet speed. You will create a Monster layer to contain all of the monsters and add it to Game layer. The towers support positional movement with touch input and automatically generated bullets with monsters robotically attacking when they enter the attack range.

The towers need to register an input delegate when you want to use touch to control tower positions. You use TargetedTouchDelegate and enable the target type API cc.registerTargetedDelegate() to swallow the input event. Listing 24-14 provides the code to register touch for tower.

Listing 24-14. Register Touch for Towrers in Tower.js

var Tower = cc. Layer.extend ( {
      onEnter : function ( ) {
          this ._super ( ) ;
          cc.registerTargetedDelegate ( 0 , true , this ) ; //Register input delegate
      } ,
      onExit : function ( ) {
          this ._super ( ) ;
          cc.unregisterTouchDelegate ( this ) ;             // Unregister input delegate
      } ,
      onTouchBegan : function ( touch , event ) {
          // check rect
          if ( ! this.containsTouchLocation ( touch ) )
              return false ;
          this ._curPosition.x = this.getPositionX ( ) ;
          this ._curPosition.y = this.getPositionY ( ) ;
          this ._beganTouch = touch. getLocation ( ) ;
          return true ;
      } ,
      onTouchMoved : function ( touch , event ) {
          var touchPoint = touch. getLocation ( ) ;
          var moveTouch = cc.pSub ( touchPoint , this ._beganTouch ) ;
          this.setPosition ( cc.pAdd ( this ._curPosition , moveTouch ) ) ;
      } ,
      onTouchEnded : function ( touch , event ) {
          // check position
          var location = this ._gameLayer. checkTowerLocation ( this.getPosition ( ) ) ;
          if ( ! location ) {
              // If it is a invalid location, set to previous position.
              this.setPosition ( this ._curPosition ) ;
           } else {
               // Set the tower to new position.
              this.setPosition ( location ) ;
           }
           this ._curPosition.x = 0;
           this ._curPosition.y = 0;
       }
} ) ;

After registration of touch, you will have an input event in OnTouchBegan, OnTouchMoved, and OnTouchEnded. The code shows that the tower will move to the new position when the position is in a valid location. Please refer to Tower.js for implementation.

There are two types of bullets. The difference between them is that the low-level bullet will disappear after it hits a monster, and it can only hurt one monster at a time. Conversely, high-level bullets can go through and hurt all of the monsters.

High-level bullets extend from cc.Node, coming from a high-level tower and are removed when a lifetime is over. It has lifetime property and attack function. (Refer to Tower.js for the implementation.) The high-level bullets will be added to the bullet layer.

Low-level bullets are created when monsters come within the attack range of low-level towers. Low-level bullets are simply a sprite with a MoveTo action, and every bullet will hit one monster and then disappear. Thus you don’t need to check the collision of low-level bullets, you just add them to game layer instead of the bullet layer (refer to the Tower.js file). The code of low-level bullets is shown in Listing 24-15.

Listing 24-15. Low-level Bullets in Tower.js

var bullet = cc.Sprite.create ( s_Bullet ) ;
bullet. setPosition (
    cc. pAdd ( this.getPosition ( ), this ._sBall. getPosition ( ) ) ) ;
this ._gameLayer. addChild ( bullet ) ;
 
var move = cc. MoveTo.create ( 0.1 , monster. getSprite ( ).getPosition ( ) ) ;
bullet. runAction ( cc. Sequence.create (
    move ,
    cc. CallFunc.create ( function ( ) {
        bullet. removeFromParent ( ) ;      // auto removing call back.
    } , bullet )
) ) ;
monster. lostBlood ( 20 ) ;                 // it will shoot at monsters always.

The low-level bullets use cc.Sequence to create a series of actions, which will be executed in order. The cc.CallFunc function enables bullets to remove themselves when the action sequence is completed.

Creating Enemies and Actions

It is time to set up the enemies and make them move in the direction defined in the tile map tlWayPoint layer. There are three types of monsters, and all of them can display themselves and update the hit points. (Refer to Monster.js for the implementation.)

Monsters can be created both automatically and manually. The ToolBar allows you to create monsters manually, and you will use a schedule to add monsters to the game automatically. Listing 24-16 provides the code to accomplish this.

Listing 24-16. Adding the First Monster, and Starting a Schedule for Automatically Adding Monsters in GameLayer.js

var GameLayer = cc. Layer.extend ( {
    init : function ( ) {
    this.addMonster ( Monster.createOrange ( ) ) ;
    this.schedule ( this.autoAddMonster , 2 ) ;  // Add a monster every 2 seconds.
    } ,
} ) ;

The code will add a monster randomly every two seconds. Monsters will move on the path defined with cc.CardinalSplineTo, as shown in Listing 24-17.

Listing 24-17. The addMonster Function in GameLayer.js

addMonster : function ( monster ) {
    if ( ! this._monsterLayer ) {
        this._monsterLayer = cc.Layer.create ( ) ;
        this.addChild ( this ._monsterLayer ) ;
    }
    this ._monsterLayer.addChild ( monster , 1 ) ;
         
    var array = this._maps.getWayPositions ( ) ; // Get the way point frome tlWayPoint layer.
    var action1 = cc.CardinalSplineTo.create ( 20 , array , 0 ) ;   // create the action.
    var remove = cc.CallFunc.create ( function ( ) {
 
        // You will lose when monster passed the gate. We will create the GameOverScene later.
        cc.Director.getInstance().replaceScene(new GameOverScene(false));
        this.removeFromParent ( ) ;
        // cc.log("remove monster");
    } , monster ) ;
monster.showRange ( HD .SHOW_RANGE ) ;
monster.getSprite ( ).runAction ( cc.Sequence.create ( action1 , remove ) ) ;

It will create a monster layer and then add the monsters to it. After adding monster layer to the game layer, your screen should look like the one shown in Figure 24-18.

Monsters will be removed when they die or after completing the cc.CardinalSplineTo action. If the monster completes the journey, you will lose the game, and see the GameOverScene. When the monster dies, you will receive a score equal to monster’s hit points. If the score is higher than 2,000, you will win and also see the GameOverScene. I will discuss creating the GameOverScene later in this chapter.

Simple Collision Detection

Monsters and high-level bullets will move all over the screen. Sometimes the unlucky monster will get hit, and so you need to add collision detection to the game.

The prototype for collision detection in this game is known as QuadTree. Visit http://en.wikipedia.org/wiki/Quadtree to learn more about it, and refer to QuadTree.js for the implementation. QuadTree recursively splits the screen into four regions, and it checks the collision in each region. If objects in one region are larger than the maximum defined number, the region will be split again. The code to invoke QuadTree initially is as follows:

this ._quad = new Quadtree ( 0 , cc. rect ( 0 , 0 , this ._winSize. width , this ._winSize. height ) ) ;

With the Update function of GameLayer, you use QuadTree to check whether or not the monster is attackable. The code to do this is shown in Listing 24-18.

Listing 24-18. Checking Monster Attackability in GameLayer.js

this ._quad.clear ( ) ;
for ( var i = 0 ; i < monsters.length ; i ++ ) {
    this ._quad.insert ( monsters [ i ] ) ;
}
for ( var i = 0 , iLen = towers.length ; i < iLen ; i ++ ) {
    var tower = towers [ i ] ;
    var list = [ ] ;
    this ._quad.retrieve ( list , tower ) ;    // Get the check list
    // cc.log("length:" + list.length);
    for ( var j = 0 , jLen = list.length ; j < jLen ; j ++ ) {
        towers [ i ].checkAttack ( list [ j ] ) ;   // Check attackable
    }
}

In this game, the collision range of monsters and bullets is a circle shape, so you use circle-to-circle collision detection. It only needs to get the distance between monster and bullet, and check whether it is smaller than the sum of the bullet radius and the monster radius.

Adding Music and Sound Effects

For music and sound effects, you need to preload them and play them when desired. Note that you need at least two audio formats to support all browsers (mp3 and ogg, for instance). If you choose to play an mp3 or ogg file, the engine will choose the file that is supported by the installed browser. The code defining sound effects is shown in Listing 24-19.

Listing 24-19. Defining Sound Effects in resource.js

var s_AttackEffect_mp3 = "res/Music/AttackEffect.mp3" ;
var s_AttackEffect_ogg = "res/Music/AttackEffect.ogg" ;
var g_resources = [
    ... ...
    //effect
    { src : s_AttackEffect_mp3 } ,
    { src : s_AttackEffect_ogg }
] ;

After defining a sound effect in resource.js, you can play it when desired. The cc.AudioEngine is a singleton object in Cocos2d, and you can call it to play sound effects directly. The code for playing sound effects is as follows:

cc.AudioEngine.getInstance().playEffect(s_AttackEffect_mp3)
// play mp3 or ogg--you don’t need both.

You also should add a “Sound” menu item on ToolBar to control the on/off function for audio.

Creating the Game Over Scene

This is the final part of the game. The method for creating the game over scene is almost the same as that for creating the main menu, as learned previously. It shows you whether you win or lose, your score, and a start button. The win and lose game over screens are shown in Figure 24-19.

Now create a GameOver.js file and add it to appFiles array. The game over scene contains only one GameOverLayer. The GameOverLayer can be created as shown in Listing 24-20.

Listing 24-20. Defining the GameOverLayer in GameOver.js

var GameOverLayer = cc. Layer.extend ( {
    init : function ( win ) {
        this._super ( ) ;
        var backgroudImage = null ;
        var titleImage = null ;
        var winSize = cc.Director.getInstance ( ).getWinSize ( ) ;
 
        if ( win ) {
            // Congratulations, you win
            backgroudImage = s_StartBG ;
            titleImage = s_Win ;
        } else {
           // Oh, no, you lose
           backgroudImage = s_LoseBG ;
           titleImage = s_Lose ;
        }
        // init background
        var background = cc.Sprite.create ( backgroudImage ) ;
        background.setPosition ( winSize. width / 2, winSize.height / 2 ) ;
        this.addChild ( background , 0 ) ;
 
        // init title
        var title = cc. Sprite.create ( titleImage ) ;
        title.setPosition ( winSize. width / 2, winSize.height * 3 / 4 ) ;
        cc.log ( winSize.width / 2 ) ;
        cc.log ( winSize.height / 2 ) ;
        this.addChild ( title , 1 ) ;
         
        // add the score on the screen
        score = cc.LabelTTF . create ( "Score:" + HD. SCORE , "Arial" , 28 ) ;
        score.setAnchorPoint ( cc. p( 0.5 , 0.5 ) ) ;
        score.setHorizontalAlignment ( cc. TEXT_ALIGNMENT_CENTER ) ;
        this.addChild ( score , 100 ) ;
        score.setPosition ( winSize. width / 2, winSize.height / 2 + 30 ) ;
        ... ...
        // add start button here
    } ) ;

You will notice that setPosition accepts two types of parameters: x and y or cc.p().

After creating GameOverLayer, connect it to GameOverScene, as shown in Listing 24-21.

Listing 24-21. Connecting the GameOverLayer to GameOverScene in GameOver.js

var GameOverScene = cc.Scene.extend ( {
    ctor : function ( win ) {
        //cc.log(win)
        this._super ( ) ;
        var layer = new GameOverLayer ( ) ;
        layer.init ( win ) ;
        this.addChild ( layer ) ;
    }
} ) ;

As the code in Listing 24-21 shows, the GameOverScene will be created with a different background and a different title according to the win parameter.

Deploying the Game

After finishing the game coding, you can package all of the JavaScript files into a single obfuscated file for security. Before packaging, you should add all of your JavaScript files to build.xml, which is found in the /root/Cocos2d-html5-v2.2.2/HalloweenDefence folder.

Open Terminal app. Use the cd command to switch to the directory where build.xml is stored, and execute ant, as shown in Listing 24-22. The resulting screen appears in Figure 24-20.

Listing 24-22. Packaging JavaScript Files

cd ∼/work/HalloweenDefence/Cocos2d-html5-v2.2.2/HalloweenDefence
ant

The ant tool will be executed with build.xml, and it will call the Google closure compiler to release the file HalloweenDefence.js in the same folder. Then you can configure the project to load this single file.

There are two loading modes in Cocos2d.js. What you need to do is to delete the “delete section” and uncomment the commented section. Read the comments in Listings 24-23 and 24-24 carefully.

Listing 24-23. Multi-File Loading Mode in cocos2d.js

window. addEventListener ( 'DOMContentLoaded' , function ( ) {
    //first load engine file if specified
    var s = d.createElement ( 'script' ) ;
    /*********Delete this section if you have packed all files into one*******/
    if ( c.SingleEngineFile && ! c.engineDir ) {
        s.src = c.SingleEngineFile ;
    }
    else if ( c.engineDir && ! c.SingleEngineFile ) {
        s.src = c.engineDir + 'platform/jsloader.js' ;
    }
    else {
        alert ( 'You must specify either the single engine file OR the engine directory in "Cocos2d.js"' ) ;
    }
    /*********Delete this section if you have packed all files into one*******/
        //s.src = 'HalloweenDefence.js'; //IMPORTANT: Un-comment this line if you have packed all files into one
    d.body.appendChild ( s ) ;
    document.ccConfig = c ;
    s.id = 'Cocos2d-html5' ;
    //else if single file specified, load singlefile
} ) ;

Listing 24-24. Single-File Loading Mode in cocos2d.js

window. addEventListener ( 'DOMContentLoaded' , function ( ) {
    //first load engine file if specified
    var s = d.createElement ( 'script' ) ;
    s.src = 'HalloweenDefence.js' ; //IMPORTANT: Un-comment this line if you have packed all files into one
    d.body.appendChild ( s ) ;
    document. ccConfig = c ;
    s.id = 'Cocos2d-html5' ;
    //else if single file specified, load singlefile
} ) ;

After changing the loading file to HalloweenDefence.js, the game will load this obfuscated file. You also can use Texture Packer to package all of the game images into sprite sheets, which are supported by Cocos2d-html5 natively. The last thing you need to do is to deploy the HalloweenDefence folder or full project folder to the web server folder and visit it via the browsers. Enjoy!