Phaser3 Tilemap with Tiled Editor

Recommended Posts

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:

         "data":[0, 0, 2], // etc
    // 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!





Share this post

Link to post
Share on other sites

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


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.

Share this post

Link to post
Share on other sites

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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.