Building a Game with the Cocos2d-html5 Library - HTML5 Game Development Insights - page 404

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.