0

I'm quite new to using Phaser and the Tiled map editor and I'm currently making a platformer game using a Tiled map I made. I haven't been able to find any information in the Tiled or Phaser documentation, or in tutorials or forums on how to select a layer in my Tiled map to be a collision layer. In some tutorials I've seen people set a Tiled layer property to collision:true but I think they were using a different Tiled version and I can't see any information on this in the Tiled documentation.

I have 3 layers plus one layer for objects. I've put all the collision tiles in one layer that includes things like the ground and platforms. I've read answers saying that you need to include the index of the collision tiles but I don't want to include individual tiles as there a lot of tiles used. I've included a screenshot of my Tiled map JSON file, the layer I want to make a collision layer is called "Tile Layer 2". I'm not sure if I need to mention this layer name in my Phaser code to make it a collision layer or if I need to set the layer to collision: true in Tiled. I'd really appreciate any suggestions on how to make this a collision layer either using Tiled or Phaser. Thanks.

Tiled map JSON file

kylieo
  • 11
  • 2
  • The phaser examples have allot covering tilemaps. This may be of help to you. http://phaser.io/examples/v2/tilemaps/map-collide That is using the Arcade physics. If using P2 i do it like `game.physics.p2.convertCollisionObjects(levelMap, "Layer", true);` – ste2425 Nov 09 '15 at 09:18

2 Answers2

0

I commented but thought id give a bit more of a complete answer. I use P2 physics, if your using Arcade this may not apply must most of the examples on Phaser's site assume the use of Arcade.

So once you've created your tilemap in Tiled you load in your JSON and the tileset image in the preload method:

game.load.tilemap('levelOneData', 'assets/levels/levelOne.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('levelOneImage', 'assets/pics/levelOne.png');

Then in your create method load your tileset image and set up your collisions with the layers.

levelMap = game.add.tilemap('levelOneData');
slowLayerBodies = game.physics.p2.convertCollisionObjects(levelMap, "collide", true);

//add background image and set world size
background = game.add.tileSprite(0, 0, 4040, 2880, 'levelOneImage');

I'm not an expert with Phaser, still learning it myself however this works. There most likely (as with most JavaScript built things) different way of doing it.

ste2425
  • 4,656
  • 2
  • 22
  • 37
0

Another possibility is to use this Phaser plugin: https://www.npmjs.com/package/phaser-tilemap-plus

You can set up an object layer with polygonal and recyangular shapes and use that as a collision layer. The polygons can be any shape, allowing you to use sloped and curved tiles. You can also have one way shapes for jump through platforms or one way doors. It is also possible to set a rebound value for bouncy surfaces or springs a la Sonic.

Aside from advanced tile collision, you also get tile animations that you define in the Tiled map editor, collision and region event handling and access to meta data in the form of custom properties.

colinvella
  • 1