Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Tiled collision/objects tutorial


rpiller
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...