Using multilayered tilemaps.

[Mariusz]

Hello.

I've been trying to create some levels for my game and I found that the only way for it to work, given my tilesets, would be to create multilayered tilemaps. The problem is I don't know how to load them using Phaser functions and I've been unable to find any existing examples of this in action. 

Any help would be greatly appreciated.

Best regards!
Mariusz

[RestingCoder]

Check out the sci fly example. It shows how to do this with the new Tilemap system.

[rich]

Yeah I need to provide a multi-layer example specifically, will make one while I'm fixing tilemaps next week. But basically you'd load in 2 tile sets (if they use different tiles per layer) and then create 2 layer objects using the same Tilemap data object for them both.

[Mariusz]

Thanks. That's what I've been trying to do, but the best I get is just one layer being rendered.

function preload() {    game.load.tilemap('level1', 'assets/map_default.json', null, Phaser.Tilemap.TILED_JSON);    game.load.tileset('tiles1', 'assets/tileset1.png', 32, 32);    game.load.tileset('tiles2', 'assets/tileset2.png', 32, 32);}var map;var tileset1;var tileset2;var layer;var layer2;function create() {    map = game.add.tilemap('level1');    tileset1 = game.add.tileset('tiles1');    tileset2 = game.add.tileset('tiles2');    layer = game.add.tilemapLayer(0, 0, 800, 600, tileset1, map, 0);    layer2 = game.add.tilemapLayer(0, 0, 800, 600, tileset2, map, 1);    // Tried different values for the last parameter in the function above, no dice    layer.resizeWorld();    layer2.resizeWorld();}

Does the code above seem right? It only renders the first layer. Using two tilemaps with one layer each worked fine, at the cost of convenience... 

I'm hoping you'll get around to making an example of this being done properly fairly soon. 

Best regards  
Mariusz
 

[Mefteg]

I've the same issue but I thing it's because Tiled uses an offset to compute the id of a tile.

Check the "firstgid" key :

"tilesets":[        {         "firstgid":1,         "image":"tileset_forest.png",         "imageheight":512,         "imagewidth":512,         "margin":0,         "name":"tileset_forest",         "properties":            {            },         "spacing":0,         "tileheight":64,         "tilewidth":64        },         {         "firstgid":65,         "image":"trees.png",         "imageheight":512,         "imagewidth":512,         "margin":0,         "name":"trees",         "properties":            {            },         "spacing":0,         "tileheight":64,         "tilewidth":64        }],

Can we set this offset in a TilemapLayer instance ?

[scoots]

I've had trouble with this as well. My problem ended up being multiple Tilesets, not multiple layers. My solution was to combine the Tilesets for both layers into 1 bigger Tileset that is used for all layers in the Tiled map. This allowed me to get multiple map layers to work. It sounds like there is a way to do it with one Tileset per layer, which would be great. Let me know if you figure that out.

[Mefteg]

Thank you for the answer, I choose that way too.

We'll see in the next release can't wait !

[rnzr]

i'm not sure if this is still needed, but since i had trouble finding a example yesterday, i took all my beginner-powers and tried to find a solution - worked out

i created the tilemap with tiled and key was to give the layers an appropriate name. also you have to give your tileset a name which is referenced as you add

the tileset to your map. if needed, i can also upload my .json tilemap but i think it's pretty self-explanatory and straight forward.

 

on a sidenote: phaser is my first game framework and i'm having lots of fun, thanks for that!!

 

// attention, this is an example which works only in phaser 1.1.6var layer = {};var map;function preload() {                game.load.tilemap('mymap','assets/level2.json',null,Phaser.Tilemap.TILED_JSON);                game.load.image('tiles', 'assets/lametiles5.png');}function create() {                              map = game.add.tilemap('mymap');                // to avoid confusion, 'lametiles5' is the name the tiled editor created while importing my tileset 'lametiles5.png'                                map.addTilesetImage('lametiles5','tiles');                                layer[0] = map.createLayer('bg_sky');                layer[0].resizeWorld();                layer[1] = map.createLayer('bg_stars');                layer[1].resizeWorld();                layer[1].scrollFactorX = 0.5;                layer[2] = map.createLayer('ground');                layer[2].resizeWorld();                layer[3] = map.createLayer('foregroundbushes');                layer[3].resizeWorld();                layer[3].scrollFactorX = 1.4;                map.setCollision([2,3],true,'ground');                }           

[CurlyBrace]

Bump!

 

FYI

There is still a problem using multiple tilesets.

I can just combine all my tilesets into one - but its so rude.

[ezThanh]

With some hack-around. I finally able to put multiple tile set into one layer

Image

This is a function help you reload the tiles array. Which phaser use it for drawing tile map. You need to reload it every time you change your tile set. And remember to add tile set to tile map first.

But some problem still remain, i think more work still needed.

 var changeMapTileSetArray = function(tileSetKey){
        map.tiles = [];
        var tileSet = Constant.TILE_SET_DICT[tileSetKey];
        var currentTileSetId = map.getTilesetIndex(tileSetKey);
        for(var i = 0;i<tileSet.tileList.length;i++){
            map.tiles.push([tileSet.tileList[i].x,tileSet.tileList[i].y,currentTileSetId]);
        }
    };

 

[samme]

• https://samme.github.io/phaser-examples-mirror/tilemaps/multi tileset.html
• https://samme.github.io/phaser-examples-mirror/tilemaps/multi layer multi tileset.html