我遇到 Phaser 3 碰撞问题

Question

我创建了 2 个对象（一个实心圆和一个描边圆）。但它们根本没有按预期发生碰撞。

这是我的代码：

const config = {
    type: Phaser.AUTO,
    width: 400,
    height: 400,
    backgroundColor: "#f5bd22",
    scene: {
        preload: preload,
        create: create,
        update: update
    },
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 90 },
            debug: false
        }
    }
}

const game = new Phaser.Game(config);

let circle;
let hollowCircle;

function preload() {

}

function create() {
    circle = this.add.circle(200, 200, 50, '#f5bd22');

    hollowCircle = this.add.graphics();
    hollowCircle.lineStyle(2, 0x000000);
    hollowCircle.strokeCircle(200, 200, 100);

    this.physics.world.enable([circle, hollowCircle]);

    hollowCircle.body.gravity.y = -90;
    this.physics.add.collider(circle, hollowCircle);
}

function update() {

}

它正在创建一个内部有实心圆的笔画圆。实体的重力设置为 90，笔画的重力设置为 0。 当代码运行时，实心圆落下并且笔划保持静止。但两个圆圈接触却什么也没有发生。

Answer 1

这就是你想做的事，不能这样做。街机物理只是在物理体的外部发生碰撞。另外，如果您查看调试边界框，您可以看到“空心圆”的物理框位于左上角。

也就是说，如果你想要这种效果，一个简单的解决方案是创建几个小的物理对象来覆盖“空心”形状的轮廓，然后设置与这些对象的碰撞。

这里有一个小演示：
（这里我用 32 个小矩形创建了一个圆，所以保持形状，并且我将内圆的物理框做成圆形，这样看起来更好一点）

document.body.style = 'margin:0;';

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    backgroundColor: "#f5bd22",
    physics: {
        default: 'arcade',
        arcade: {            
            gravity:  { y: 90 },
            // turn on to show the created Objects
            // debug: true
        }
    },
    scene: {
        create
    },
}; 

function createCircle(scene, x, y, radius){

  // CREATE VISUALS
  let displayCircle = scene.add.circle(x, y, radius).setStrokeStyle(2,0x000000);
  
  // CREATE PHYSICS PART
  const circle = new Phaser.Geom.Circle(x, y, radius);
  const points = circle.getPoints(32);
  let boxes = [];

  for (let i = 0; i < points.length; i++){
      const p = points[i];

      let box = scene.add.rectangle(p.x - 2, p.y - 2, 4, 4);
      // with the second parameter I'm making the object(s) static, so no need for the -90 gravity
      let boxPhysics = scene.physics.add.existing(box, true);
      boxes.push(box);
  }
    
  return boxes;
}


function create() {
    let circle = this.add.circle(200, 80, 30, '#f5bd22');
    let circlePhysics = this.physics.add.existing(circle);
    circlePhysics.body.setCircle(30);

    let helperBoxes = createCircle(this, 200, 100, 70)
    
    this.physics.add.collider(circle, helperBoxes);
}

const game = new Phaser.Game(config);

<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>

要查看发生了什么，请再次打开

config

中的调试标志。