Sign in to follow this  
Ulbast

Loading tilemap error

Recommended Posts

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)

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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)

 

Share this post


Link to post
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.

Guest
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.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.