Phaser3 Tilemap with Tiled Editor

[Franzeus]

Hi there,

I wanted to start to create a 2D top down game with Tiled and Phaser3 but I am running into some issues.

I created some tile layers (wall, floor tiles) and object layers (e.g. agent) and exported it as JSON.

My preload function:

this.load.json('map', 'assets/tilemaps/0.json');

// Each 32px of size
this.load.image('wall', 'assets/images/game/tiles/wall.png');
this.load.image('floor', 'assets/images/game/tiles/floor.png');
this.load.image('agent', 'assets/images/game/agents/agent_0.png');

My create function:

var tileSize = 32;
var map = this.cache.json.get('map');
var mapWidth = map.width;
var mapHeight = map.height;

var wall_layer_data = map.layers[0].data;
var walls_tilemap = this.add.staticTilemap(wall_layer_data, 0, 0, tileSize, tileSize, mapWidth, mapHeight, 0, 'wall');

 

Map json (Created with Tiled Version 1.0.3) :

Is basically an array of layers:

"layers":[
 {
         "data":[0, 0, 2], // etc
         "height":17,
         "name":"walls",
         "opacity":1,
         "type":"tilelayer",
         "visible":true,
         "width":29,
         "x":0,
         "y":0
  },
  {
    // Next layer for tiles and object layers
  }

 

Now my issue is that the wall tiles are drawn everywhere (whole map size and 0 and 2 are basically a wall tile).

I saw in the examples that all tiles are now in one layer and not separated ones and that all images are also in one file.

Is there a way to have multiple layers and separated image files?

 

Furthermore is there still a way to extend a Sprite and then use it with createFromObjects()? Does that method still exists?

My goal is to render a json file I created in Tiled. Some of them are simply static tiles, some of them with collision and some of them have extended functionality and therefore need their own Sprite class.

 

Thank you very much!

 

 

 

 

[Franzeus]

Or am I too early for this to work?!

Would love to do it with Phaser3 - especially because I like the multiple camera and path feature!

[Karma Octopus]

This is how I do tile layers in v3:

// Grass
    
    var mapDataGrass = scene.cache.json.get('enviromentMap').layers[0].data;

    mapDataGrass.forEach(function (current, index, array) {
        mapDataGrass[index] = current - 1;
    });

    tilemapGrass = scene.add.tilemap(mapDataGrass, 0, 0, tileWidth, tileHeight, mapWidth, mapHeight, 0, 'enviromentImg');

// Dirt

    var mapDataDirt = scene.cache.json.get('enviromentMap').layers[1].data;

    mapDataDirt.forEach(function (current, index, array) {
        mapDataDirt[index] = current - 1;
    });

    tilemapDirt = scene.add.tilemap(mapDataDirt, 0, 0, tileWidth, tileHeight, mapWidth, mapHeight, 0, 'enviromentImg');

etc.

I use the same tile image for all layers for performance reasons but in theory it should probably work to have different images for different layers, I haven't tested though so I don't know if that works.

Just replace 'scene' with 'this' if that wasn't clear. (I reduce the index by one to make it the right one.)

Let me know if you need more info to get it to work. Basically I think I'm just doing what you are doing but using dynamic tilemaps and shifting the indexing. But it does work fine for me.

[Franzeus]

Ok thank you!

Then I will loop through the whole tilemap data. I wonder if there will be something again like the createFromObjects function, which basically did everything for me in the past.

You are also right about the performance of the (entire) tile image, but for now I am just prototyping with (very ugly) tiles ;)