Loading tilesets image error

[rickydamta]

Hello,

I'm trying to load 4 tilesets image with this code

mainmap.addTilesetImage('basictiles', 'tiles');mainmap.addTilesetImage('Decor0', 'decor');mainmap.addTilesetImage('Ground0', 'ground');mainmap.addTilesetImage('overworld', 'overworld');

This is my full file

var play = function(game){	console.log("%cStarting rpg-dev game", "color:white; background:red");}play.prototype = {		preload: function() {			game.load.spritesheet('player', 'res/playerpg.png', 34, 46);			game.physics.startSystem(Phaser.Physics.ARCADE);			game.load.tilemap('mainmap_json', '/maps/mainmap.json', null, Phaser.Tilemap.TILED_JSON);			game.load.image('tiles', '/res/basictiles.png');			game.load.image('decor', '/res/Decor0.png');			game.load.image('ground', '/res/Ground0.png');			game.load.image('overworld', '/res/overworld.png');    },		create: function() {			game.physics.startSystem(Phaser.Physics.ARCADE);			mainmap = game.add.tilemap('mainmap_json');			mainmap.addTilesetImage('basictiles', 'tiles');			mainmap.addTilesetImage('Decor0', 'decor');			mainmap.addTilesetImage('Ground0', 'ground');			mainmap.addTilesetImage('overworld', 'overworld');			layer = mainmap.createLayer('Tile Layer 1');			layer.resizeWorld();			layer.wrap = true;    },		update: function() {    }}

This is my json file

{ "backgroundcolor":"#6daa2c", "height":38, "layers":[        {         "data":[12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 524, 524, 524, 524, 524, 524, 524, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 524, 524, 525, 524, 525, 525, 524, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 65, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 524, 524, 524, 524, 524, 525, 525, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 444, 12, 12, 12, 12, 12, 12, 12, 66, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 730, 731, 731, 731, 731, 732, 12, 12, 12, 12, 65, 12, 12, 12, 524, 524, 524, 525, 525, 525, 524, 32, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 755, 600, 601, 602, 603, 757, 12, 12, 12, 12, 12, 66, 12, 12, 12, 524, 524, 525, 525, 525, 525, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 444, 12, 12, 12, 12, 12, 12, 66, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 755, 625, 626, 627, 628, 757, 12, 12, 12, 12, 12, 12, 12, 12, 12, 524, 524, 524, 524, 524, 525, 12, 12, 324, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 444, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 755, 650, 651, 652, 653, 757, 12, 12, 12, 12, 12, 12, 12, 12, 12, 524, 524, 524, 525, 524, 525, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 65, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 755, 675, 676, 677, 678, 757, 12, 12, 12, 12, 12, 12, 12, 12, 12, 524, 524, 525, 525, 524, 525, 12, 12, 12, 12, 12, 12, 12, 12, 66, 65, 65, 444, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 65, 12, 12, 12, 12, 12, 12, 780, 846, 11, 11, 846, 782, 12, 12, 12, 12, 12, 12, 12, 12, 12, 524, 524, 524, 525, 524, 525, 12, 12, 12, 12, 12, 12, 12, 12, 66, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 66, 12, 12, 12, 524, 524, 525, 525, 524, 524, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 524, 524, 524, 524, 525, 525, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 328, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 525, 524, 524, 524, 524, 525, 12, 12, 12, 324, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 524, 524, 524, 524, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 525, 525, 525, 525, 525, 524, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 66, 12, 12, 12, 12, 12, 12, 524, 525, 524, 525, 525, 525, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 524, 525, 525, 525, 524, 524, 12, 12, 12, 12, 12, 12, 12, 12, 444, 12, 12, 12, 12, 324, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 524, 525, 525, 524, 524, 525, 525, 525, 525, 12, 12, 12, 12, 89, 11, 11, 89, 12, 525, 525, 525, 525, 525, 525, 525, 525, 525, 524, 524, 524, 524, 524, 524, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 65, 12, 12, 12, 12, 12, 444, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 525, 524, 524, 524, 525, 525, 525, 525, 525, 525, 525, 525, 525, 89, 11, 11, 89, 525, 524, 524, 525, 525, 524, 524, 524, 524, 524, 524, 524, 524, 524, 524, 524, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 326, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 524, 525, 524, 524, 524, 525, 525, 525, 525, 525, 525, 525, 525, 89, 11, 11, 89, 524, 524, 524, 525, 524, 524, 525, 524, 524, 524, 524, 524, 525, 524, 524, 524, 525, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 66, 12, 12, 12, 12, 730, 731, 731, 731, 731, 731, 731, 732, 12, 12, 12, 12, 524, 524, 524, 525, 524, 525, 524, 524, 524, 524, 524, 524, 524, 89, 11, 11, 89, 524, 524, 524, 525, 524, 525, 525, 525, 524, 525, 525, 524, 525, 524, 524, 525, 525, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 755, 568, 569, 570, 571, 572, 573, 757, 12, 12, 12, 12, 524, 525, 525, 525, 524, 525, 524, 525, 524, 524, 524, 524, 524, 89, 11, 11, 89, 524, 524, 524, 524, 524, 525, 525, 525, 524, 524, 524, 524, 524, 524, 524, 524, 525, 12, 12, 12, 444, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 755, 593, 594, 595, 596, 597, 598, 757, 12, 12, 12, 12, 524, 524, 524, 525, 524, 525, 524, 524, 524, 525, 525, 525, 525, 89, 11, 11, 89, 525, 525, 525, 525, 525, 524, 525, 524, 524, 524, 525, 525, 524, 524, 524, 524, 525, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 444, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 755, 618, 619, 620, 621, 622, 623, 757, 12, 12, 12, 12, 524, 524, 524, 525, 524, 524, 524, 524, 12, 12, 12, 12, 12, 89, 11, 11, 89, 12, 12, 12, 12, 12, 12, 12, 524, 524, 524, 524, 524, 524, 524, 525, 525, 525, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 755, 643, 644, 645, 646, 647, 648, 757, 12, 12, 12, 12, 524, 524, 524, 524, 524, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 524, 524, 525, 525, 525, 525, 525, 525, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 755, 668, 669, 670, 671, 672, 673, 757, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 780, 782, 845, 11, 11, 845, 780, 782, 12, 12, 12, 12, 12, 12, 12, 65, 65, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 65, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 78, 12, 12, 12, 12, 66, 12, 11, 11, 12, 12, 77, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 65, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 65, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 65, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 65, 65, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 66, 12, 12, 12, 12, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 66, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 65, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 65, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 77, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 66, 66, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 66, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 65, 12, 12, 12, 66, 12, 12, 12, 12, 12, 12, 65, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 11, 11, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 162, 12, 12, 11, 11, 12, 12, 162, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12, 12],         "height":38,         "name":"Tile Layer 1",         "opacity":1,         "type":"tilelayer",         "visible":true,         "width":75,         "x":0,         "y":0        }], "nextobjectid":1, "orientation":"orthogonal", "properties":    {    }, "renderorder":"right-down", "tileheight":16, "tilesets":[        {         "firstgid":1,         "image":"..\/res\/basictiles.png",         "imageheight":240,         "imagewidth":128,         "margin":0,         "name":"basictiles",         "properties":            {            },         "spacing":0,         "tilecount":120,         "tileheight":16,         "tilewidth":16        },         {         "firstgid":121,         "image":"..\/res\/Decor0.png",         "imageheight":352,         "imagewidth":128,         "margin":0,         "name":"Decor0",         "properties":            {            },         "spacing":0,         "tilecount":176,         "tileheight":16,         "tilewidth":16        },         {         "firstgid":297,         "image":"..\/res\/Ground0.png",         "imageheight":112,         "imagewidth":128,         "margin":0,         "name":"Ground0",         "properties":            {            },         "spacing":0,         "tilecount":56,         "tileheight":16,         "tilewidth":16        },         {         "firstgid":353,         "image":"..\/res\/overworld.png",         "imageheight":144,         "imagewidth":336,         "margin":0,         "name":"overworld",         "properties":            {            },         "spacing":0,         "tilecount":189,         "tileheight":16,         "tilewidth":16        },         {         "firstgid":542,         "image":"..\/res\/tiles.png",         "imageheight":224,         "imagewidth":400,         "margin":0,         "name":"tiles",         "properties":            {            },         "spacing":0,         "tilecount":350,         "tileheight":16,         "tilewidth":16        }], "tilewidth":16, "version":1, "width":75}

This is the error that i get in the console.

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

Thanks for helping

[Kobaltic]

I am not 100% sure if this is your problem but if you look at the end of your json file it has:

 

"image":"..\/res\/tiles.png",

 

but you don't define the tiles.png in your code. You have basictiles.png.

 

Also if you keep your names the same it would be  a little less confusing. Example you could do this, which might have led you to missing the tiles.png:

game.load.image('basictiles', '/res/basictiles.png');mainmap.addTilesetImage('basictiles');

More info here : http://phaser.io/docs/2.4.4/Phaser.Tilemap.html#addTilesetImage

[rickydamta]

Thanks