Jump to content

Dynamically adding content to tilemap


Recommended Posts

I'm not sure this is the proper way to handle this idea but here it goes. Advice about any of this would be greatly appreciated.

I'm creating a board game using Phaser 3. I have a tilemap that is pretty much just a grid. This tilemap was created with Tiled. That displays fine. However, if I try and add an image to the tilemap I do not see the new image. As you can see in my code I'm adding the images to the tilemap and trying to put a tile on the map but nothing shows. I'm not getting any errors either.

preload() {
        this.load.image('earth', 'assets/Earth.png');
        this.load.image('tile', 'assets/Tile.png');
        this.load.tilemapTiledJSON('map', 'assets/Map.json');

create() {
         var map = this.make.tilemap({ key: 'map' });
        var tile = map.addTilesetImage('tileset', 'tile');
        var earthTile = map.addTilesetImage('earthTile', 'earth');

        map.createDynamicLayer(0, tile, 0, 0);

        map.putTileAt(earthTile, 5, 5);


Link to comment
Share on other sites

I was wrong about add/make.

I think you need something like this. The TILE_INDEX you want you have to find in the map file, or in the exported map.

var map = this.make.tilemap({ key: 'map' });

var tileset1 = map.addTilesetImage('tileset', 'tile');
var tileset2 = map.addTilesetImage('earthTile', 'earth');

var layer = map.createDynamicLayer(0, tileset1, 0, 0);

layer.putTileAt(TILE_INDEX, 5, 5);


Link to comment
Share on other sites

I really appreciate the help but I'm still not getting the earth tile to show. If anybody would like to look at my code, I've attached it. Maybe I'm doing something wrong with the way I'm exporting the tiles from Tiled or importing them into my project but I'm not sure what the issue is. (Just run npm i and npm run dev to run the application.)


Link to comment
Share on other sites

As written, the base layer is filled with the grid tile [1], so using putTile(1) on that layer will make no difference, and putTile() with any other tile index will fail because there are no other tiles in that tileset.

It will work this way: 


var map = this.make.tilemap({ key: 'map' });
var gridTileset = map.addTilesetImage('tileset', 'tile');
var earthTileset = map.addTilesetImage('earthTile', 'earth');

var gridLayer = map.createStaticLayer(0, gridTileset, 0, 0);
var earthLayer = map.createBlankDynamicLayer('blank', earthTileset);

earthLayer.putTileAt(EARTH_TILE_INDEX, 1, 1);

But probably you should use just one tileset with all the tiles instead.

Link to comment
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.
  • Create New...