[Help for a Newb Please] Tiled Error: "Invalid Tileset Image: floortileset"

[arhedg]

In trying to import my map from Tiled, I am getting the following error:

Any suggestions? I included the bits of code I thought were relevant here (omitted spritesheets, etc)

Preload()

this.load.image("floortileset", 'floortileset.png');

var json = require('./map.json');
this.load.tilemapTiledJSON(this.MK, json);

Create()

this.Map = this.make.tilemap({key: this.MK});
const tileset = this.Map.addTilesetImage("..\/agora\/front\/src\/Phaser\/Game\/floortileset.png", "floortileset");

const starter = this.Map.createStaticLayer("start", tileset);
const worldLayer = this.Map.createStaticLayer("Tile Layer 1", tileset);

Can also include the json file if it would be helpful! Would really appreciate any help I have spent days on this already.

[Milton]

Are you sure the path to the png is correct? Check the Network tab in Dev Tools.
And your key is strange, I can’t tell what ‘this.MK’ is. Something like {key: “map”} is more obvious.

[arhedg]

I got the path to the png based on the JSON file provided to me by Tiled. It is in the same folder as this file, and substituting in “./floortileset.png” unfortunately doesn’t solve it either.

this.MK is the map key (‘MK’) I store within the class that this exists within. I tried substituting just “map” into both “this.MK” and no success here either

[Milton]

But did you check the Network tab? If it gives a 404, it’ll tell you what path it expects.

[arhedg]

Am not seeing anything under the network tab, or any 404 error in console logs.

[BlunT76]

Hi,
Try this:

@arhedg

this.load.image("floortileset", '/your_folder_assets/floortileset.png'); // check in dev tools, network tab if the path is good, like Milton said

var json = require('./map.json');
this.load.tilemapTiledJSON('map1', json); // 'map1' but can be anything

Create()

this.Map = this.make.tilemap({key: 'map1', tileWidth: 16, tileHeight: 16});
const tileset = this.Map.addTilesetImage('Tile Layer 1', 'floortileset', 16, 16); // 16 are tiles sizes, i use them but perhaps it's not needed

const starter = this.Map.createStaticLayer("start", tileset); // start must correspond to a tiled layer
const worldLayer = this.Map.createStaticLayer("Tile Layer 1", tileset); Tile Layer 1 must correspond to a tiled layer

And in Tiled, when you create a map, you must choose embedded tileset (or something like this, i don’t remember the exact term

[Milton]

@arhedg

Am not seeing anything under the network tab, or any 404 error in console logs.

Press CTRL-F5 or CTRL-r when in the Network Tab. Does it say 200 or 404?
It can’t say nothing.

[arhedg]

Still seems to be an error @BlunT76 , thank you though.

start and Tile Layer 1 are both tiled layers: "type":"tilelayer",

Perhaps my path in the JSON is wrong? I currently have

"tilesets":[
        {
         "columns":8,
         "firstgid":1,
         "image":"..\/agora\/front\/src\/Phaser\/Game\/floortileset.png",
         "imageheight":272,
         "imagewidth":272,
         "margin":1,
         "name":"floortileset",
         "spacing":2,
         "tilecount":64,
         "tileheight":32,
         "tilewidth":32

}],

Edit: And I did do the embedded tilesheet option

[arhedg]

Ah, thanks, I am seeing 304 for most things.

[arhedg]

If it helps, here is a screenshot of my GameScene object

[BlunT76]

Do you have your project on github or somewhere else to test it?

[arhedg]

I’ll put it up in a sec – I am just playing around with another repository and trying to get it to run on my localhost for my own education.

That said, I might have gotten closer to figuring it out. I am seeing that “const tileset” is null after adding the tileset image, which makes me think it’s not being loaded properly.

[Milton]

@arhedg

Ah, thanks, I am seeing 304 for most things.

I’m still not convinced
Could you check disable cache (in the Network tab header) , and post the result of you hovering over ‘floortileset.png’?
Like this:

[arhedg]

@Milton lol, well you were right I was looking at the wrong thing but looks like it is 200.

[Milton]

Another thing I noticed:
tilesetName - The name of the tileset as specified in the map data

Shouldn’t be the problem, but change it to addTileSetImage(“floortileset”); // or whatever you called it in Tiled.

Maybe look at this tutorial.