Creating a collision layer in Phaser using JSON and Tiled

1
votes

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

2
game-physics2d-gamesphaser-frameworktiled

2 Answers

7
votes

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)

2
votes

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.