14 | Cocos2D-JS | How import a tilemap

[Gurigraphics]

14 | How import a tilemap

Game.resources.js

Import the tileset.png and map.tmx

Game.res = {
    HelloWorld_png : "res/HelloWorld.png",
    map_png : "res/tileset.png",
    map_tmx : "res/map.tmx"
};

Game.g_resources = []; 

for ( var i in Game.res ) {
    Game.g_resources.push( Game.res[i] );
}  

Game.layers.js

Create a layer and add the tilemap to layer

Game.layers[1].extend = cc.Layer.extend({
    init: function () {      
        this._super(); 
        var game = this;
        Game.layers[1].start( game );  
    }
});    
 
Game.layers[1].start = function( game ){

    layer = cc.LayerColor.create(new cc.Color(0,0,0,250), 960, 640); // R+G+B+Opacity+X+Y
    game.addChild(layer); // add layer to game

    var map = new cc.TMXTiledMap(Game.res.map_tmx);
    layer.addChild(map, 0); 
}; 

Some tilemap methods

// console.log( map.getMapSize().width ) // 40
// console.log( map.getMapSize().height ) // 30

// console.log( map.getTileSize().width ) // 16
// console.log( map.getTileSize().height )// 16

// console.log( map.getContentSize().width ) // 640
// console.log( map.getContentSize().height ) // 480

// console.log( map.getTileSize() ) // {width: 16, height: 16}
// console.log( map.getMapSize() ) // {width: 30, height: 40}
// console.log( map.getContentSize() ) // {width: 640, height: 480}

// map.setVisible(false);