Issue with tilesets: "Image tile area not tile size multiple"

Phaser 3
1

I’m trying to add a tileset to Phaser 3 that I created with Tiled v1.7.1, but am getting the ‘warning’ mentioned in the title, which gives a black screen as the tileset is not loaded properly.

Here’s my preload() method:

this.load.image('tiles','assets/tilemaps/OverworldTilesetImage.png')
this.load.tilemapTiledJSON('map', 'assets/tilemaps/Town.json')

‘tiles’ represents the png of my tileset. The image size is 592 x 464, and the tiles are 16 x 16.

Here is my create() method:

const map = this.add.tilemap('map')
const tileset = map.addTilesetImage('Town', 'tiles', 16, 16)
const backgroundLayer = map.createLayer('Background', tileset)

I get the ‘Image tile area not tile size multiple’ warning on the line that invokes addTilesetImage(). Even though both 592 and 464 are clear multiples of 16.

Am I missing something? The code is an exact copy of the Phaser 3 examples. I have already embedded the tilemap in Tiled before exporting (which was my original error).

Is there at least a way to debug things? Like to see if the ‘tiles’
image is being loaded properly?

------------------------UPDATE-------------------------

I’ve dug deeper to find that my tileset image loading in is in fact 592 x 464.

I can also see in my tilemap JSON that the tileWidth and tileHeight properties are set to 16.

But I do see that in the JSON i exported from Tiled, the ‘width’ and ‘height’ properties are set to 50 and 76, but those are supposed to represent how many tiles wide and high the map is.

Could Phaser be misinterpreting the ‘width’ and ‘height’ as the tileWidth and tileHeight?

Thanks!

2

:wave:

Try with just

const tileset = map.addTilesetImage('Town', 'tiles');
3

hey Samme, thanks for the reply.

I gave that a shot and got the same issue.

I’ve edited my original post to make it a little clearer what my preload() and create() methods look like in regards to my tileset code.

5

There may be something with tile margin/spacing. You can step through addTilesetImage() in the debugger.

6

GOT IT.

I remade my tileset and tilemap from scratch in Tiled, making sure I did the following things:

  • Tileset has ‘Embed in Map’ option selected
  • Tilemap is set to CSV upon creation
  • Tile width/height are set to 16 in both the tileset and the tilemap
  • Once in my tilemap file in Tiled, made sure to click ‘Embed Tileset’ in the Tilesets tab, and then using that embedded tileset to place on my map
  • Creating a new tilemap (.tmx) that exports my tileset (.tsx) as a .png
  • Exporting my drawn tilemap (’.tmx) as JSON

I made sure to make the tilemap width and height (in tiles) to be a multiple of 16 just to be sure. Using the new tileset image and tilemap JSON got rid of the warning.

However, another warning occured: ‘No data found for tileset ‘tiles’’

The problem here is that

map.addTilesetImage('Town', 'tiles', 16, 16)

is searching the imported tilemap JSON for a name property of the tileset used by the map:

"tilesets":[
        {
         "columns":37,
         "firstgid":1,
         "image":"tilesets\/OverworldTilesetImage.png",
         "imageheight":464,
         "imagewidth":592,
         "margin":0,
         "name":"Townv1",     // addTilesetImage([tileSetName], key) looks at this property to see if it matches tileSetName passed into it
         "spacing":0,
         "tilecount":1073,
         "tileheight":16,
         "tilewidth":16
        }],

As you can see, since I named my tileset ‘Townv1’ in Tiled, my exported tilemap JSON was associated with a tileset named ‘Townv1’. Thus, when I invoke addTilesetImage() with ‘Town’, it cannot find any tilesets in the JSON named ‘Town’, throwing the ‘No data found for [tileset]’ warning.

The solution for this was to change

const tileset = map.addTilesetImage('Town', 'tiles', 16, 16)

to

const tileset = map.addTilesetImage('Townv1', 'tiles', 16, 16)

so that it would search for a tileset named ‘Townv1’ in the JSON.

Now that everything loads properly, I am going to go back and re-add my layers and tile properties.