Creating a collision layer in Phaser using JSON and Tiled

Question

I'm trying to create a platform game using Tiled to create my maps. I've made my map and exported it as a .json object. I can make the map appear in my game, but my sprite falls through my floor.

I've been going through tutorials for hours and seem to have tried everything under the sun with no luck. I even created a new 'collision' layer in Tiled. Here's all my relevant code:

JSON:

{ "height":20,
 "layers":[
    {
     "data":[491, 492, 493, 494, 495, 496, 497, 498, 499, 491, 492, 493, 494, 495, 496, 497, 498, 499, 491, 492, 493, 494, 495, 496, 497, 526, 527, 528, 529, 530, 531, 532, 533, 534, 526, 527, 528, 529, 530, 531, 532, 533, 534, 526, 527, 528, 529, 530, 531, 532, 561, 562, 563, 564, 565, 566, 567, 568, 569, 561, 562, 563, 564, 565, 566, 567, 568, 569, 561, 562, 563, 564, 565, 566, 567, 596, 597, 598, 599, 600, 601, 602, 603, 604, 596, 597, 598, 599, 600, 601, 602, 603, 604, 596, 597, 598, 599, 600, 601, 602, 631, 632, 633, 634, 635, 636, 637, 638, 639, 631, 632, 633, 634, 635, 636, 637, 638, 639, 631, 632, 633, 634, 635, 636, 637, 666, 667, 668, 669, 670, 671, 672, 673, 674, 666, 667, 668, 669, 670, 671, 672, 673, 674, 666, 667, 668, 669, 670, 671, 672, 701, 702, 703, 704, 705, 706, 707, 708, 709, 701, 702, 703, 704, 705, 706, 707, 708, 709, 701, 702, 703, 704, 705, 706, 707, 736, 737, 738, 739, 740, 741, 742, 743, 744, 736, 737, 738, 739, 740, 741, 742, 743, 744, 736, 737, 738, 739, 740, 741, 742, 491, 492, 493, 494, 495, 496, 497, 498, 499, 491, 492, 493, 494, 495, 496, 497, 498, 499, 491, 492, 493, 494, 495, 496, 497, 526, 527, 528, 529, 530, 531, 532, 533, 534, 526, 527, 528, 529, 530, 531, 532, 533, 534, 526, 527, 528, 529, 530, 531, 532, 561, 562, 563, 564, 565, 566, 567, 568, 569, 561, 562, 563, 564, 565, 566, 567, 568, 569, 561, 562, 563, 564, 565, 566, 567, 596, 597, 598, 599, 600, 601, 602, 603, 604, 596, 597, 598, 599, 600, 601, 602, 603, 604, 596, 597, 598, 599, 600, 601, 602, 631, 632, 633, 634, 635, 636, 637, 638, 639, 631, 632, 633, 634, 635, 636, 637, 638, 639, 631, 632, 633, 634, 635, 636, 637, 666, 667, 668, 669, 670, 671, 672, 673, 674, 666, 667, 668, 669, 670, 671, 672, 673, 674, 666, 667, 668, 669, 670, 671, 672, 701, 702, 703, 704, 705, 706, 707, 708, 709, 701, 702, 703, 704, 705, 706, 707, 708, 709, 701, 702, 703, 704, 705, 706, 707, 736, 737, 738, 739, 740, 741, 742, 743, 744, 736, 737, 738, 739, 740, 741, 742, 743, 744, 736, 737, 738, 739, 740, 741, 742, 491, 492, 493, 494, 495, 496, 497, 498, 499, 491, 492, 493, 494, 495, 496, 497, 498, 499, 491, 492, 493, 494, 495, 496, 497, 526, 527, 528, 529, 530, 531, 532, 533, 534, 526, 527, 528, 529, 530, 531, 532, 533, 534, 526, 527, 528, 529, 530, 531, 532, 561, 562, 563, 564, 565, 566, 567, 568, 569, 561, 562, 563, 564, 565, 566, 567, 568, 569, 561, 562, 563, 564, 565, 566, 567, 596, 597, 598, 599, 600, 601, 602, 603, 604, 596, 597, 598, 599, 600, 601, 602, 603, 604, 596, 597, 598, 599, 600, 601, 602],
     "height":20,
     "name":"dark_background",
     "opacity":1,
     "type":"tilelayer",
     "visible":true,
     "width":25,
     "x":0,
     "y":0
    }, 
    {
     "data":[579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 579, 580, 581, 582, 583, 0, 0, 0, 0, 0, 579, 580, 581, 582, 583, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 579, 580, 581, 582, 583, 579, 580, 581, 582, 579, 579, 580, 581, 582, 583, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 580, 581, 582, 583, 579, 580, 581, 582, 583, 0, 0, 0, 0, 0, 579, 580, 581, 582, 583, 579, 580, 581, 582, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 579, 579, 580, 581, 582, 583, 579, 580, 581, 582, 583, 579, 580, 581, 582, 583, 579, 580, 581, 582, 583, 579, 580, 581, 582, 583],
     "height":20,
     "name":"metal_tileset",
     "opacity":1,
     "properties":
        {
         "collision":"true"
        },
     "type":"tilelayer",
     "visible":true,
     "width":25,
     "x":0,
     "y":0
    }, 
    {
     "data":[813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 813, 813, 813, 813, 813, 0, 0, 0, 0, 0, 813, 813, 813, 813, 813, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 0, 0, 0, 0, 0, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813, 813],
     "height":20,
     "name":"collision",
     "opacity":1,
     "type":"tilelayer",
     "visible":true,
     "width":25,
     "x":0,
     "y":0
    }],
 "nextobjectid":1,
 "orientation":"orthogonal",
 "properties":
{

},
 "renderorder":"right-down",
 "tileheight":32,
 "tilesets":[
    {
     "firstgid":1,
     "image":"scifi_platformTiles_32x32.png",
     "imageheight":736,
     "imagewidth":1120,
     "margin":0,
     "name":"scifi_platformTiles_32x32",
     "properties":
        {

        },
     "spacing":0,
     "tilecount":805,
     "tileheight":32,
     "tilewidth":32
    }, 
    {
     "firstgid":806,
     "image":"collidable.gif",
     "imageheight":137,
     "imagewidth":480,
     "margin":0,
     "name":"collision",
     "properties":
        {

        },
     "spacing":0,
     "tilecount":60,
     "tileheight":32,
     "tileproperties":
        {
         "7":
            {
             "Collidable":"True"
            }
        },
     "tilewidth":32,
     "transparentcolor":"#ff0018"
    }],
 "tilewidth":32,
 "version":1,
 "width":25
}

Javascript:

var game = new Phaser.Game(800, 640, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });

function preload() {

    game.load.tilemap('mapName', 'assets/tilemap.json', null, Phaser.Tilemap.TILED_JSON);
    game.load.image('sprites', 'assets/scifi_platformTiles_32x32.png');
    game.load.image('star', 'assets/star.png');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

}

var map;
var platforms;

function create() {

    map = game.add.tilemap('mapName');
    map.addTilesetImage('scifi_platformTiles_32x32', 'sprites');

    background = map.createLayer('dark_background');
    level1 = map.createLayer('metal_tileset');

    background.resizeWorld();

    game.physics.startSystem(Phaser.Physics.ARCADE);
}

I have looked at "Tilemap Collisions don't work in Phaser" already and it doesn't seem to be helping me...

score 11 · Answer 1 · answered Mar 13 '20 at 13:43

11

If anyone is looking for the solution in Phaser3:

 var map = this.make.tilemap({ key: 'map', tileWidth: 16, tileHeight: 16 });
 var tileset = map.addTilesetImage("tileset-images", 'tiles');
 var tile_layer = this.map.createStaticLayer('walls', tileset, 0, 0);

 // Set collision with player (can also be a group)
 tile_layer.setCollisionByExclusion([-1]);
 this.physics.add.collider(player, tile_layer);

(Did this in the create method)

answered Mar 13 '20 at 13:43

Zeus

746
4
18

Shame there's no method `.setCollisionForAll()` – CSJ Aug 17 '21 at 21:41
1

Note that `createStaticLayer` is deprecated in favor of `createLayer`. Also note that tileset colliders do not work with `body.touching`, you will need to use `body.blocked` instead. – Nate Levin Jul 16 '22 at 15:59

score 2 · Accepted Answer · answered Dec 11 '15 at 16:16

2

You haven't enabled collision with tiles. In order to do that, in your create function, you have to add map.setCollisionBetween(1, 999, true, 'collisionLayer'); Of course you need to change "collisionLayer" with your layer, but you can read more here.

Moreover, in your update function you have to check for collisions between your player and the collision layer like this:

function update(){
    this.game.physics.arcade.collide(player, level1);
}

where "level1" is the collision layer.

answered Dec 11 '15 at 16:16

Apovtx

185
1
14

This is definitely getting me closer, but I'm still having no luck. I read the documentation and can't tell what the "1,999" refers to. I think that may be the key to getting this to work. Are these the tiles I need to set as collidable? – Rokitar Dec 12 '15 at 21:44
Yes, the "1" is the first tile index and the 999 is the last tile index. Everything in between will be tested for collisions. – Apovtx Dec 13 '15 at 01:39
1

Okay. I made those a little more specific and took out the layer name. Because the collisions are my only layer, removing the name just defaulted to my map. Thanks so much! – Rokitar Dec 13 '15 at 02:52
@Apovtx How do you know the indices easily by looking at your Tiled tilemap? – user3871 Feb 07 '18 at 02:38

Creating a collision layer in Phaser using JSON and Tiled

2 Answers2