[1.1.5] Tilemap collision with sprite

[Bobov]

Hi everyone,

 

I've been using phaser for a while but now i'm stuck for few days already and can't find an answear on the forum. Anyway the problem is there is no collision appearing when i'm moving player around the map. When debug is on i see green lines exactly where is the border between the road and collision area just as i wanted. Tile 34 from desert.png is the route to follow. Thank You in advance, This is my code:

function preload() {game.load.image('player', 'assets/player.png');game.load.image('line', 'assets/line.png');game.load.tilemap('map', 'assets/map.json', null, Phaser.Tilemap.TILED_JSON);game.load.image('tiles', 'assets/desert.png');}function create() {game.world.setBounds(0, 0, 480, 800);map = game.add.tilemap('map');map.setCollisionByExclusion([34], true);map.addTilesetImage('desert', 'tiles');layer = map.createLayer('Tile Layer 1'); layer.resizeWorld();layer.debug = true;player = game.add.sprite(game.world.width / 2, game.world.height - 1 - tileSize / 2, 'player');player.anchor.setTo(0.5, 0.5);player.body.collideWorldBounds = true;gravity = game.add.tileSprite(0, game.world.height - 30, game.world.width, 30, 'line');gravity.alpha = 0.3;click = game.input.activePointer;}

function update() {	game.physics.collide(player, layer, colHandler, null, this);........}function colHandler() {	console.log('collison');}

[Bobov]

I updated phaser to 1.1.6 but still physics.collide is not working in my code. Any ideas why?

[Heppell08]

Trying setting the collisions like:

map.setCollisionBetween([],true);

Find the I.D. Of the tiles you want to collide with and put them in the [] in the setCollisionBetween.

Or you can collide with a single tile by setting:

map.setCollision(10,true);

Same rule applies. But don't use the array as its only a single tile I.D.

Give it a go and try

[Bobov]

Thank You but before it was setCollisionBetween(1,33); and setCollisionBetween(35,64); and it was also wrong :/ This is just my another try to solve it.

 

I think the problem might not be with setCollision... but with physics.collide, because as i turn on layer.debug it shows green lines as i wanted. This is a very simple tilemap with fields, plants and building and only tile nr 34 which is the road and the player can move only on this tile. I'm stuck for 5 days now and i have no idea why...

[Heppell08]

i'm using tilemaps in my game. 3 of them to be exact. Now in the JSON the names are declared and the layer is declared. Now the tiles need the collision index verified then in the update you need the layer and the player to collide.

Here is my set up and this works for me across the 3 tilemaps i currently have coded in:

var map;var layer;// then createcreate: function ()    {        map = this.add.tilemap('level02');        map.addTilesetImage('Space02', 'tiles');          map.setCollisionBetween(211, 238); // Main Floor        layer = map.createLayer('Space02');        layer.resizeWorld();    }// then updateupdate: function()    {        this.physics.collide(player, layer);    )

If the code above isnt any help to your current set up then im afraid i have no idea. The above suggested code i put here is pulled directly from my current dev project and i have no issues. 

The main issue for me was learning about the JSON file. 

Eg:

{ "height":30, "layers":[        {         "data":[TILE ID's ARE IN HERE 0,0,0,0,0,0 AS AN EXAMPLE],         "height":30,         "name":"Space02",// this is the layer. layer = map.createLayer('Space02');         "opacity":1,         "type":"tilelayer",         "visible":true,         "width":50,         "x":0,         "y":0        }], "orientation":"orthogonal", "properties":    {    }, "tileheight":32, "tilesets":[        {         "firstgid":1,         "image":"tilemap.png",         "imageheight":736,         "imagewidth":1120,         "margin":0,         "name":"Space02", // this is >> map.addTilesetImage('Space02', 'tiles');         "properties":            {            },         "spacing":0,         "tileheight":32,         "tilewidth":32        }], "tilewidth":32, "version":1, "width":50}

Then in preloading you load the tilesheet which in my case is named 'tiles'

this.load.image('tiles', 'assets/tilemap.png');

Then load the JSON 

this.load.tilemap('level02', 'assets/map02.JSON', null, Phaser.Tilemap.TILED_JSON);

They should all work perfectly as long as all namespaces and update checks are correct.

[Bobov]

Thanks for Your attention. Well i think there's no other way then sth must be messed up in JSON file because my code structure is very similar. You just ensured me the problem is not in the code itself. Thanks once again, i'll be back with solution

[Heppell08]

post the JSON on a pastebin, that might be very helpful too. Do you even see the tiles loaded in the game with the structure you use to load the tilemap? Also might be worth try this to output the JSON maps because it works well with phaser : http://www.mapeditor.org

The output is correct and to use it is super easy.

[Bobov]

Yes i see the map created perfect from the tiles i've chosen, and the player image is also visible and i can move it but the problem is, i can do it everywhere I used Tiled to create JSON but i think i'll start once again from the top with mapeditor and we'll see.

 

JSON:

{ "height":25, "layers":[        {         "data":[30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 25, 45, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 36, 43, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 44, 27, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 41, 37, 34, 35, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 30, 33, 34, 35, 30, 30, 30, 30, 30, 30],         "height":25,         "name":"Tile Layer 1",         "opacity":1,         "type":"tilelayer",         "visible":true,         "width":15,         "x":0,         "y":0        }], "orientation":"orthogonal", "properties":    {    }, "tileheight":32, "tilesets":[        {         "firstgid":1,         "image":"desert.png",         "imageheight":199,         "imagewidth":265,         "margin":1,         "name":"desert",         "properties":            {            },         "spacing":1,         "tileheight":32,         "tilewidth":32        }], "tilewidth":32, "version":1, "width":15}

[Heppell08]

do you want the player to be stuck to the road only? what is it you're trying to collide with? i'm running a copy of the whole thing and i can collide with the road if i set it etc?

[Bobov]

Yes exactly, i wan't to be stuck on the road only and for example loosing a life when i move of the road but right now console.log about collision is enough.

[Heppell08]

~The player collides with the road in my test here with your JSON and using

map.setCollisionBetween(34, 35);

[Heppell08]

Well i got it working by settng the collision of tile 30 only like this:

map.setCollision(30);

[Heppell08]

The other stuff onscren in the image is stuff from my current dev. i just threw the map and JSON  into it but didnt bother removing the other stuff. lol 

 

 

But heres the full code anyway:

 

Preload:

this.load.image('tiles2', 'assets/desert.png');this.load.tilemap('test', 'assets/maptest.JSON', null, Phaser.Tilemap.TILED_JSON);

Create:

map  = this.add.tilemap('test');        map.setCollision(30);        map.addTilesetImage('desert', 'tiles2');        layer = map.createLayer('Tile Layer 1');         layer.resizeWorld();        layer.debug = true;

Update:

this.physics.collide(player, layer);

That was it.

 

//EDIT added the update of the collisions for map

[Bobov]

What do You mean "working" if You touch the green line do You pass it or stops on it? Mine is still passing the line to the other side :/

[Heppell08]

What do You mean "working" if You touch the green line do You pass it or stops on it? Mine is still passing the line to the other side :/

 

I stop at the line, cant continue because i set the collisions to not allow me past.

[Bobov]

It may be obvious but how was it set not to allow to pass?

[Heppell08]

try changing your update function from:

game.physics.collide(player, layer, colHandler, null, this);// to this game.physics.collide(player, layer);

Forget about colHandler and delete that too.

[Bobov]

Well thanks to You Heppell08 i was sure my collision functions and JSON file were ok, so i was looking for other solution. Then i finally found the problem. Well, physics.collide works only (i think) if we're using position change by velocity plus or minus, but if someone (like me) tries to move a sprite manually with changing body.x and body.y on his own without velocity, phaser dosen't see it as moving the body to another location but as appearing on another location, like he jumped over that green line from debug and collision didn't occured.

 

I'm just explaining it in case someone else got the same problem. For most of You it could have been obvious. Thanks

[Heppell08]

That's would have had the whole issue fixed had it been you stating that haha. Yeah if you set it is player.x += 15; the player will jump over the collision and console has no need to spawn an error as its not an error. Atleast its working now anyway and you know the cause.