Trying to render a tilemap, getting "Failed to execute 'drawImage'"

[Acid]

Hi,

 

I've been trying to create a tilemap for a frogger-like game, and i have some trouble when i try to render the map.

I've been following this example on the phaser website : http://phaser.io/examples/v2/loader/load-tilemap-json

At first i used my own .json map created with Tiles along with my .png file, but i got this error in my chrome console:

 

 

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'Phaser.Tileset.draw @ phaser.js:92627Phaser.TilemapLayer.renderRegion @ phaser.js:91432Phaser.TilemapLayer.renderFull @ phaser.js:91554Phaser.TilemapLayer.render @ phaser.js:91629Phaser.TilemapLayer.postUpdate @ phaser.js:90873Phaser.Group.postUpdate @ phaser.js:33860Phaser.Stage.postUpdate @ phaser.js:32249Phaser.Game.updateLogic @ phaser.js:38772Phaser.Game.update @ phaser.js:38707Phaser.RequestAnimationFrame.updateRAF @ phaser.js:61260Phaser.RequestAnimationFrame.start._onLoop @ phaser.js:61244

 

So i first though it was because i did something wrong in Tiled, so i downloaded the example's source files and replaced the old files in my project, but i still get the same error.

 

I'm going to show you my code so far in my play.js state, i'm using the generator-phaser-official for Yeoman.

  'use strict';  var map;  var staticLayer;  function Play() {}  Play.prototype = {    create: function() {      this.game.stage.backgroundColor = '#ffffff';      this.map = this.game.add.tilemap('staticTile');      this.map.addTilesetImage('assets/super_mario.png', 'staticSet');      this.staticLayer = this.map.createLayer('World1');          },    update: function() {    },    clickListener: function() {      this.game.state.start('gameover');    }  };  module.exports = Play;

If anyone has any ideas or leads to guide me, that would be pretty nice

[rich]

Can you post your preload code too please, as I reckon that is where the problem is. Your call to addTilesetImage seems to be using a path, but should just be the asset key - so I reckon it's the combination of the preloader and that causing it.

[Acid]

I found the answer, my "this.map.addTilesetImage('assets/super_mario.png', 'staticSet');" needed the key from my json file and not the whole path, so i changed it to 

"this.map.addTilesetImage('SuperMarioBros-World1-1', 'staticSet');"  and it is now working!

I think you can close this topic now, but thanks anyways

 

 

Edit: Thanks Rich for your answer, you replied just after i found it but it was the right answer