Jump to content

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


Recommended Posts



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 :)

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...