Image tile area is not an even multiple of tile size

[trinity420]

I want to use a spritesheet with 1283x654 pixels in my game. I embedded the spritesheet in the Tiled Editor into my level.

When loading I get this warning:

Phaser.Tileset - tiles2 image tile area is not an even multiple of tile size

And when trying to render I get this error:

phaser.js:98606 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
    at Phaser.Tileset.draw (phaser.js:98606)
    at Phaser.TilemapLayer.renderRegion (phaser.js:97327)
    at Phaser.TilemapLayer.renderFull (phaser.js:97449)
    at Phaser.TilemapLayer.render (phaser.js:97524)
    at Phaser.TilemapLayer._renderWebGL (phaser.js:96753)
    at Phaser.World.PIXI.DisplayObjectContainer._renderWebGL (phaser.js:15090)
    at Phaser.Stage.PIXI.DisplayObjectContainer._renderWebGL (phaser.js:15090)
    at PIXI.WebGLRenderer.renderDisplayObject (phaser.js:17398)
    at PIXI.WebGLRenderer.render (phaser.js:17364)
    at Phaser.Game.updateRender (phaser.js:36223)

My map and objects consist of 16x16 pixel tiles. So I tried to resize the spritesheet to 2048x1024 pixels which is a "even multiple of tile size", when the tile size is 16 pixels. But the warning and error are still the same.

Notice that the spritesheets has a 1px separation between tiles! I also tried resizing to an even multiple of 17 pixels. Same error.

How do I have to resize the image/spritesheet to get it to work? I gues it has something to do with the 1px separtion?

 

Thank you (spritesheet is attached)

[trinity420]

Oh, my error, I forgot to load the corresponding tileset with Phaser! Warning is still there but the rendering error is gone, so it works now!

[Henri]

Hi, I'm in the same situation. Tilesheet of 16x16 with 1px of marging but I can't solve : " Image tile area not tile size multiple "

I resized my tilesheet.png to mulitple of 16 but still unbable to mae it work .... do you have a idea ? or can you tell me of you succeed to load successfully your tilesheet ?

 

I have this tilesheet : https://www.kenney.nl/assets/roguelike-modern-city

[IlDede]

Hi,
I was in the same situation after update of my tileset with an extruded version.

I was loading the tileset in this way:

map.addTilesetImage("tilesetName", "key")

Without specifing tiles size, margin, and space, changing the line in the following way solve my problem.

map.addTilesetImage("tilesetName", "key", 16, 16, 1, 2)

As specified in the documentation (https://photonstorm.github.io/phaser3-docs/Phaser.Tilemaps.Tilemap.html) the method signature is the following:
addTilesetImage(tilesetName [, key] [, tileWidth] [, tileHeight] [, tileMargin] [, tileSpacing] [, gid])