Tiled collision/objects tutorial

[rpiller]

Has anyone got Tiled working with phaser and have per tile based collisions (like in a top down rpg)? I'm wondering how that's done and can't seem to fine anything about it.

[Heppell08]

You mean movement or something different? I know movement has been asked about for top-down games because velocity movement can collide with walls and stuff but moving the players X or Y in a hard coded way of 32x or 32y will basically teleport the player through the collision zones and off the map.

I have a few ideas on how I'd approach the hard coded X/Y but I've only just started the framework for my next project.

[rpiller]

I wouldn't want to move the characters tile by tile but I would want them to have a smooth movement, but I would want them to collide with objects that are tile based. So if the trunk of a tree takes up 1 tile, then I wouldn't want characters to be able to move into that tile. How can I mark that tile so the player collides with it in Tiled and have Phaser know that?

 

Also, for the characters I would want to mark a collidable area around it's "feet" only. I'm just not seeing many rpg style examples with this kind of movement/collision.

[Heppell08]

Yeah the smooth transition is what I'm talking about. BUT the tiles can be set for collision. Just look at the GID in the JSON for the specific tile needed EG: tree - tileID 21 the do

map.setCollision(21); // tree tile

That's it for the tiles. Same as setCollisionBetween(1,10); // collides with all tile between 1 and 10.

[rpiller]

Ah OK. That seems easy enough. Would you happen to know about the sprite movement and collision setup then as well?

[Heppell08]

The collision set up is what I mentioned above but the movement has been asked at before. The smooth transition is the complicated bit.

[rpiller]

Just moving the sprites x & y seems to give smooth enough movement for me, but when I do that it never collides with anything.

[Heppell08]

Yes because you need physics to declare the collisions. The movement is all fine with just X/Y but its better using the velocity attributes to collide with walls.

[rpiller]

I agree, but messing with velocity seems to make a skating effect. So I'm trying to figure out how to use physics but get the feel of moving x & y movement.

[Heppell08]

you'll probably want to set the velocity to zero to remove the skating effect.

sprite.setZeroVelocity(); // in update

will work fine since you've no need for any gravity

[rpiller]

See I tried that but it tells me that's an undefined function. 

function create() { ...    player = game.add.sprite(150, 320, 'player');    game.physics.enable(player, Phaser.Physics.ARCADE);...}function update() {   ...    player.setZeroVelocity();    // error saying it's undefined...}

So I just set the velocity.x & y manually to 0 and that seems to work now (have to use a high velocity when adding, but it works). The issue is now it's still not colliding with some tiles in my tilemap. I set tile id's collisions that it should collide with via:

 

map.setCollision(33);

 

 

I assume though I need to say that this should collide with my player body but not sure how.

[Heppell08]

what phaser version are you using and have you converted the tilemap. So example is:

this.physics.startSystem(Phaser.Physics.P2JS); // start the physics

this.game.physics.p2.enable(player); // set up player physicsplayer.body.fixedRotation = true; // no rotation

this.physics.p2.convertTilemap(map, layer); // the maps physics

For the map physics mine is set up like so:

             if(mapnumber === 1)            {                map = this.add.tilemap('level01');                map.addTilesetImage('Space01', 'tiles');                layer = map.createLayer('Space01');                layer.resizeWorld();            }            map.setCollisionBetween(211, 217); // Main Floor            map.setCollisionBetween(246, 252); // stops glitching            map.setCollisionBetween(71,72);            map.setCollisionBetween(106,107); // blue lit box            map.setCollisionBetween(141,142);            map.setCollisionBetween(176, 177); // unlit box            map.setCollision(143); // small box            map.setCollisionBetween(178, 179); // 2 small boxes                     map.setCollisionBetween(146, 148); // black and yellow area            map.setCollisionBetween(334, 336); // black and yellow area            map.setCollisionBetween(369, 372); // black and yellow area            map.setCollisionBetween(181, 182); // black and yellow area            map.setCollision(301);            map.setCollision(299);            this.physics.p2.convertTilemap(map, layer);

is convert the map AFTER setting all the collisions. 

 

Hopefully this helps a bit more

[rpiller]

Phaser 2.0.2

 

So what is this p2 stuff? I was just using: game.physics.startSystem(Phaser.Physics.ARCADE);? How is P2 different than the other physics objects that I've seen used in phaser?

 

This sort of works, but the character can sort of push through the collision areas still. So this seems like it makes bodies on the tiles for that tile id. Is there a way to see these bodies for debugging (outlined or something)?

 

Also, I have to wonder if there is a way to adjust where the player body is placed because I'd only like it around it's feet and be a circle if possible.

[Heppell08]

layer.debug = true;player.body.debug = true;

P2 is another physics system used by Phaser as well as Ninja and arcade physics. I use P2 because it works wonderfully with tilemaps imho. The velocity and collisions etc all just work well. 

 

The snippet above will debug and show onscreen. You dont need a render function, just pop it in the update and it'll show you the debug info you need.

[rpiller]

So that puts a red box around my player, but not around the tiles. It looks like it just makes them a little transparent? Do you know if I can have a red box around the tile as well in the layers?

 

So I'm also able to clear the shape with clearShapes(), but trying to add a circle shape around the feet but getting an error talking about undefined 'boundingRadius' when I use:

 

player.body.addShape(Phaser.Physics.P2.Circle);

 

 

Coding in javascript without intellisense is like pulling my hair out

[Heppell08]

It should have a green line where the map is able to collide with the player like this:

 

http://imgur.com/YBSASeR

[rpiller]

Oh, that would explain it. My map is mostly grass so it's green Any way to change it?

[Heppell08]

i have no idea on the colour change in the debug, maybe test with different colour tiles as a means to test with maybe

[rpiller]

I'll dig into the code and see if I can find this as I don't really want to change all my tiles. Thanks for all your help you have gotten me going in the right direction now!

 

 

[edit]

 this.debugColor = 'rgba(0, 255, 0, 1)'; in phaser.js!

 

 

This still doesn't work. Are you sure it's just layer.debug = true?