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

Question

我在pickle.png文件中有一个文件pickle.json，其中包含我使用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");

在我的预载函数中，我把它放在：

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

并在create function中：

foo

如果我在浏览器控制台中检查pickle和 this.game.physics.arcade.collide( this.foo, this.pickle, function(foo, pickle) { }, null, this ) ，则它们都是相同类型的精灵对象。

现在我想让它们发生冲突，所以我将它添加到更新功能中：

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

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

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

我看到了一个例子here，但我很难理解它。

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

foo.body

起初我遇到了错误，因为setCollisionGroup没有回复foo.body。 $json_array = array(); $sql = "SELECT * FROM tblplace"; $res = $con->query($sql); while($row = mysqli_fetch_array($res)){ $temp_arr['name'] = $row['name']; $json_array[] = $temp_arr; } echo json_encode($json_array); 是使用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();来删除外部矩形边界。

结果如下：