如何在 Phaser 中与自定义精灵边界发生碰撞

Question

我有一个文件 pickle.png，在我使用 PhysicsEditor 创建的 pickle.json 文件中有一个自定义碰撞框。

{ 

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

并在创建函数中：

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

如果我在浏览器控制台中检查 foo 和 pickle 它们都是同一类型的 sprite 对象。

现在我想让它们发生碰撞，所以我将这个添加到更新函数中：

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

所有这一切的最终结果就是您在下面的 gif 中看到的（注意，圆柱形物体是一种 kool-aid 浸泡过的泡菜）：

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

我看到有一个示例 here，但我无法理解它。

编辑好消息，在 collision-groups 示例的帮助下我取得了一些进步。

    // collision setup for non-rectanular sprites
    game.physics.p2.setImpactEvents(true);
    game.physics.p2.restitution = 0.8;
    foo.body = new Phaser.Physics.P2.Body(game, foo, 0, 0)
    var foo_collision = game.physics.p2.createCollisionGroup();
    var pickle_collision = game.physics.p2.createCollisionGroup();
    game.physics.p2.updateBoundsCollisionGroup();
    this.foo.body.setCollisionGroup(foo_collision);
    this.foo.body.collides([foo_collision, pickle_collision]);
    this.pickle.body.setCollisionGroup(pickle_collision);
    this.pickle.body.collides(foo_collision, function(pickle, foo) {
        console.log('hit')
    }, this);

起初我对此有误，因为 foo.body 没有回应 setCollisionGroup。 foo.body 是使用 Arcade 物理构造的，因此我需要用 Phaser.Physics.P2.Body 实例替换它。结果是我有碰撞，但不在自定义范围内：

Answer 1

我必须更改以下几行

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

并将其设为 false 而不是 true 。 true 表示它是调试模式，并且会显示所有那些难看的边界和顶点。这在以下教程中有所介绍，这对所有这一切都非常有用：https://www.codeandweb.com/physicseditor/tutorials/phaser-p2-physics-example-tutorial.

其次，在 this.pickle.body.loadPolygon('pickle_physics', 'pickle'); 之前，我需要添加 this.pickle.body.clearShapes(); 以删除外部矩形边界。

结果是这样的：

如何在 Phaser 中与自定义精灵边界发生碰撞

How to collide with custom sprite bounds in Phaser

javascript

sprite

game-physics

phaser-framework