Javascript 如何在Phaser中与自定义精灵边界冲突

我有一个文件

pickle.png

，在

pickle.json

文件中有一个自定义的hitbox，就像我用PhysicsEditor创建的那样

{ 

    "pickle": [

        {
            "density": 2, "friction": 0, "bounce": 0, 
            "filter": { "categoryBits": 1, "maskBits": 65535 },
            "shape": [   468, 156  ,  399, 214  ,  365, 222  ,  387, 98  ,  414, 100  ,  443, 113  ,  467, 131  ]
        } ,
    // etc
    ]
}

在我的预加载功能中，我将以下内容放入：

    this.game.load.physics("pickle_physics", "pickle.json");

在create函数中：

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

    this.pickle = game.add.sprite(400, 300, '/pickle.png');
    game.physics.p2.enable(this.pickle, true);
    this.pickle.body.loadPolygon('pickle_physics', 'pickle');

    // this is a separate sprite with default bounds
    this.foo = mt.create('foo1');
    game.physics.p2.enable(this.foo, true);

    this.game.physics.arcade.collide(
        this.foo, this.pickle, function(foo, pickle) {
        }, null, this
    )

如果我在浏览器控制台中检查

foo

和

pickle

，它们都是相同类型的sprite对象

现在我想使它们发生碰撞，因此我将此添加到更新函数中：

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

    this.pickle = game.add.sprite(400, 300, '/pickle.png');
    game.physics.p2.enable(this.pickle, true);
    this.pickle.body.loadPolygon('pickle_physics', 'pickle');

    // this is a separate sprite with default bounds
    this.foo = mt.create('foo1');
    game.physics.p2.enable(this.foo, true);

    this.game.physics.arcade.collide(
        this.foo, this.pickle, function(foo, pickle) {
        }, null, this
    )

所有这些的最终结果都可以在下面的gif中看到（注意，圆柱形对象是一个kool-aid浸泡过的泡菜）：

它们根本没有碰撞，泡菜看起来很糟糕。我不想看到它周围的矩形或顶点

我知道有一个例子，但我很难理解它

---

编辑好消息，我在示例的帮助下取得了一些进展

起初，我对此有一个错误，因为

foo.body

没有响应

setCollisionGroup

foo.body

是使用Arcade physics构建的，所以我需要用一个实例来替换它。结果是我有碰撞，但不在自定义边界中：

---

我不得不更改以下几行

game.physics.p2.enable(this.pickle, true);
game.physics.p2.enable(this.foo, true);

并使其为false而不是为true。

true

表示它处于调试模式，将显示所有丑陋的边界和顶点。下面的教程介绍了这一点，它在所有这些方面都非常有用：

其次，在

this.pickle.body.loadPolygon（'pickle_physics'，'pickle'）之前我需要添加
this.pickle.body.clearShapes（）
删除外部矩形边界

结果是：