Bobov

[1.1.5] Tilemap collision with sprite

Recommended Posts

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');}

Share this post


Link to post
Share on other sites

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

:)

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
Share on other sites

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.

:)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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}

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.