Loading tilemap error

[Ulbast]

Hi, in my platform game I want to load map from Tiled. Everything was working fine, with this example:

function preload() {

    game.load.tilemap('level1', 'assets/level8.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('tiles-1', 'assets/tiles-1.png');

}

function create() {
    
//MAP SETTINGS

    map = game.add.tilemap('level1');

    map.addTilesetImage('tiles-1');

    map.setCollisionByExclusion([ 13, 14, 15, 16, 46, 47, 48, 49, 50, 51 ]);

    layer = map.createLayer('Tile Layer 1');

    layer.resizeWorld();
}

It worked perfectly, but when I just edited tilesheet and used them in Tiled (identical tiles but grey instead brown), the game cannot load. The error from the console:

Failed to load resource: the server responded with a status of 404 (Not Found) 

and

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
    at c.Tileset.draw (phaser.min.js:27)
    at c.TilemapLayer.renderRegion (phaser.min.js:26)
    at c.TilemapLayer.renderFull (phaser.min.js:26)
    at c.TilemapLayer.render (phaser.min.js:26)
    at c.TilemapLayer._renderCanvas (phaser.min.js:26)
    at c.World.d.DisplayObjectContainer._renderCanvas (phaser.min.js:7)
    at c.Stage.d.DisplayObjectContainer._renderCanvas (phaser.min.js:7)
    at d.CanvasRenderer.renderDisplayObject (phaser.min.js:9)
    at d.CanvasRenderer.render (phaser.min.js:9)
    at c.Game.updateRender (phaser.min.js:11)

[snowbillr]

This is the important error:

Failed to load resource: the server responded with a status of 404 (Not Found) 

the second error stems from this one. 

It's saying that your server is unable to find a file you're requesting, either 'assets/level8.json' or 'assets/tiles-1.png'. Double check that both those files are present on the server. You could also check the "network" tab in the chrome developer tools and look for which request failed to find out which file is the issue. 

Either way, this doesn't seem like a coding error with Phaser, it seems like a misrequested file or server configuration error. 

[Ulbast]

Both files are present on the server.

E: the 404 log somoehow dissapeared, but the other remain:

phaser.min.js:20 Phaser.AnimationParser.spriteSheet: '[object HTMLImageElement]'s width/height zero or width/height < given frameWidth/frameHeight
spriteSheet @ phaser.min.js:20
addSpriteSheet @ phaser.min.js:20
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
asyncComplete @ phaser.min.js:21
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
asyncComplete @ phaser.min.js:21
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
asyncComplete @ phaser.min.js:21
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
asyncComplete @ phaser.min.js:21
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
asyncComplete @ phaser.min.js:21
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
start @ phaser.min.js:20
preUpdate @ phaser.min.js:10
updateLogic @ phaser.min.js:11
update @ phaser.min.js:11
updateRAF @ phaser.min.js:18
window.requestAnimationFrame.forceSetTimeOut._onLoop @ phaser.min.js:18
phaser.min.js:20 Phaser.AnimationParser.spriteSheet: '[object HTMLImageElement]'s width/height zero or width/height < given frameWidth/frameHeight
spriteSheet @ phaser.min.js:20
addSpriteSheet @ phaser.min.js:20
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
asyncComplete @ phaser.min.js:21
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
asyncComplete @ phaser.min.js:21
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
asyncComplete @ phaser.min.js:21
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
asyncComplete @ phaser.min.js:21
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
asyncComplete @ phaser.min.js:21
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
asyncComplete @ phaser.min.js:21
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
asyncComplete @ phaser.min.js:21
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
asyncComplete @ phaser.min.js:21
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
asyncComplete @ phaser.min.js:21
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
asyncComplete @ phaser.min.js:21
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
asyncComplete @ phaser.min.js:21
fileComplete @ phaser.min.js:21
loadImageTag @ phaser.min.js:21
loadFile @ phaser.min.js:21
processLoadQueue @ phaser.min.js:21
start @ phaser.min.js:20
preUpdate @ phaser.min.js:10
updateLogic @ phaser.min.js:11
update @ phaser.min.js:11
updateRAF @ phaser.min.js:18
window.requestAnimationFrame.forceSetTimeOut._onLoop @ phaser.min.js:18




phaser.min.js:27 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
    at c.Tileset.draw (phaser.min.js:27)
    at c.TilemapLayer.renderRegion (phaser.min.js:26)
    at c.TilemapLayer.renderFull (phaser.min.js:26)
    at c.TilemapLayer.render (phaser.min.js:26)
    at c.TilemapLayer._renderCanvas (phaser.min.js:26)
    at c.World.d.DisplayObjectContainer._renderCanvas (phaser.min.js:7)
    at c.Stage.d.DisplayObjectContainer._renderCanvas (phaser.min.js:7)
    at d.CanvasRenderer.renderDisplayObject (phaser.min.js:9)
    at d.CanvasRenderer.render (phaser.min.js:9)
    at c.Game.updateRender (phaser.min.js:11)

 

[Ulbast]

Well I solved the problem, the issue was in Tiled Editor, where the important was the name of tileset.

Thanks for answer