PhaserJS碰撞瓷砖地图不起作用答案

【问题标题】：PhaserJS collision tilemap not workingPhaserJS碰撞瓷砖地图不起作用
【发布时间】：2017-01-12 12:29:58
【问题描述】：

我有一个瓷砖地图，只有 1 层与玩家正确碰撞。浏览了所有示例，但我似乎无法让它在多个层次上工作。

我有 1 个 tilemap，其中包含总共 13 层的所有 json 数据，但对于示例我只包含 3 个。

我想让玩家与不同的层发生碰撞并有不同的回调，例如如果在范围内等，则无法穿过，拾取物品，但都使用 1 个 spritemap/tilemap。

var game = new Phaser.Game(1200, 780, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });

function preload() {
        this.load.tilemap('main_map', 'img here', null, Phaser.Tilemap.TILED_JSON);
        this.load.image('sprite_map', 'img here');
        this.load.image('player_image', 'img here');
}

var map;
var tileset;
var bLayer;
var wLayer;
var player;
var sLayer;
var cursors;

function create() {

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

    // initiallize the tilemap
    map = game.add.tilemap('main_map');
    map.addTilesetImage('otherNew', 'sprite_map');

    //draw the layers 
    bLayer = map.createLayer(0);
    wLayer = map.createLayer(1);
    sLayer = map.createLayer(2);
    wLayer.resizeWorld();

    player = game.add.sprite(600, 600, 'player_image');
    game.physics.arcade.enable(player);
    player.body.collideWorldBounds = true;  // works

    //game camera and movment keys here 

}
function update() {
    game.physics.arcade.collide(player, wLayer); // DOES NOT WORK
    game.physics.arcade.collide(player, sLayer); // THIS WORKS
    map.setCollision(1, true, wLayer); // DOES NOT WORK
    map.setCollision(2, true, sLayer); // THIS WORKS 

   //movement here already works so didn't include

}

【问题讨论】：

标签： json phaser-framework 2d-games

【解决方案1】：

我认为您的 wLayer.resizeWorld(); 函数使您的 tilemap 的宽度/高度成为世界的大小。看起来这是 wLayer 和 sLayer 之间的唯一区别。

在 Phaser 中设置宽度/高度不会自动调整碰撞体的大小。为此，请使用setSize 函数。

要查看您当前的身体，请使用 Phaser 的 debug 方法

this.game.debug.body(someSprite, 'rgba(255,0,0,0.5)');

【讨论】：

嘿詹姆斯，感谢您的回复，我已经弄清楚问题所在，将在下面发布深入的答案。

【解决方案2】：

答案是每个图层都有自己的一组瓷砖地图，当我使用精灵表生成每个图层时，这些图层有一些需要设置的值。我没有耐心检查我需要的实际碰撞层，但由于我将它们全部拆分为单独的逻辑层，我只是将每个层设置在 0 和 100 之间。

// In the create section    
map.setCollisionBetween(0, 100,true, wLayer,true);
map.setCollisionBetween(0, 100,true, sLayer,true);

【讨论】：