javascript - 如何在 Phaser 中与自定义 Sprite 边界发生碰撞

我有一个 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 中看到的内容(注意，圆柱形物体是浸泡过的泡菜):



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

我看到有一个例子 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 实例替换它。这样做的结果是我有冲突，但不在自定义范围内:

最佳答案

我不得不改变以下几行

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

并使其 为假 而不是 为真 。 true 意味着它是 Debug模式，将显示所有那些丑陋的边框和顶点。这在以下教程中进行了介绍，该教程在所有这些方面都非常有用: https://www.codeandweb.com/physicseditor/tutorials/phaser-p2-physics-example-tutorial 。

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

结果是这样的:

关于javascript - 如何在 Phaser 中与自定义 Sprite 边界发生碰撞，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43024694/