使用 JSON 和 Tiled 在 Phaser 中创建碰撞层

Question

我正在尝试使用 Tiled 来创建平台游戏来创建我的地图。我制作了地图并将其导出为 .json 对象。我可以让地图出现在我的游戏中，但是我的精灵从我的地板上掉下来了。

我已经看了几个小时的教程，似乎已经尝试了所有的方法，但都没有成功。我什至在 Tiled 中创建了一个新的 'collision' 层。这是我所有的相关代码：

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);
}

我已经看过“Tilemap Collisions don't work in Phaser”，它似乎对我没有帮助...

Answer 1

您尚未启用与图块的碰撞。为此，在您的创建函数中，您必须添加 map.setCollisionBetween(1, 999, true, 'collisionLayer'); 当然你需要改变"collisionLayer"与你的层，但你可以阅读更多here。

此外，在您的更新功能中，您必须像这样检查播放器和碰撞层之间的碰撞：

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

其中 "level1" 是碰撞层。

Answer 2

如果有人在 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);

（在创建方法中这样做）

使用 JSON 和 Tiled 在 Phaser 中创建碰撞层

Creating a collision layer in Phaser using JSON and Tiled

game-physics

2d-games

phaser-framework

tiled