Collision doesn't work, tiled map and phaser

[Arn]

Hello everybody,

 

I am trying to learn phase, but I am so slow , my brain is already burned haha.

 

well, I am trying to make this tutorial since yesterday : http://phaser.io/news/2015/07/phaser-tiled-physics

 

I search hours to solve my problem. I do not have any collision . Did someone make this tuto ? 

 

Here is my code . Sometimes I get the error when I force to create the layer in the js

CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement

 

 

 

Here is my Code

var game = new Phaser.Game(500, 500, Phaser.CANVAS, 'main')stateTestmap = {preload: preload,create: create, update: update};game.state.add('stateTestmap', stateTestmap);game.state.start('stateTestmap');function preload() {  game.load.tilemap('Map1', 'asset/map1', null, Phaser.Tilemap.TILED_JSON);  game.load.image('TilesetBG', 'asset/TilesetBG.png');  game.load.image('TilesetTree', 'asset/TilesetTree.png');    game.load.image('player', 'asset/player.png');}function create() {  map = game.add.tilemap('Map1');  map.addTilesetImage('TilesetRiver', 'TilesetBG');  map.addTilesetImage('TilesTree', 'TilesetTree');  background = map.createLayer('Tile Layer 1');  backgroundOL = map.createLayer('BackgroundOverlay');  player = game.add.sprite(100,100, 'player');  foreground = map.createLayer('Foreground');  background.resizeWorld();  //Physics          game.physics.startSystem(Phaser.Physics.P2JS);  //First we choose which tiles will collide  map.setCollision(42, true,'Collision');  //Then the physics engine creates collision bodies from the tiles:  game.physics.p2.convertTilemap(map,'Collision');  game.physics.p2.enable(player);  player.body.fixedRotation = true; // no rotation  //Remove default collision box  player.body.clearShapes();    //Only the lower part of the player collides  player.body.addRectangle(100, 100, 0, 25);  //Controls  cursors = game.input.keyboard.createCursorKeys();  player.body.debug = true;}function update() { var speed=300;        if (cursors.left.isDown){        player.body.velocity.x = -speed;    } else if (cursors.right.isDown){        player.body.velocity.x = speed;    } else {        player.body.velocity.x = 0;    }    if (cursors.up.isDown){        player.body.velocity.y = -speed;    } else if (cursors.down.isDown){        player.body.velocity.y = speed;    } else {        player.body.velocity.y = 0;    } }

I do not know what to do. I read the other posts about it without any success.

[Langerz82]

Hello,

 

At the bottom the tutorial says:

A nasty error

If your game does not work and the following error appears on the console (e.g. Firebug):
"TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement."
it could mean that one tile from the 3rd tileset image (used for collision) was accidentally placed on a visible layer. As we didn't load this image in the Phaser preload function, of course Phaser cannot display it. Tiles can be accidentally placed on the wrong layer easily in Tiled, because Tiled allows to paint on invisible layers. Further more accidentally painting an invisible tile from an image we didn't load in Phaser can easily lead to this error. Inspecting the tilemap JSON file can help to debug if you run into this issue.

 

Source: http://talestolduntold.blogspot.co.at/2015/06/tilemaps-with-invisible-collision-layer.html

 

Not sure if you checked this out or not but figured its worth a mention.