Mariusz

Using multilayered tilemaps.

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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
 

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.