Phaser 3中实心圆与描边圆碰撞失效问题求助

问题原因 #

• Graphics对象无有效碰撞体：你通过this.add.graphics()创建的描边圆，Arcade物理系统不会自动根据strokeCircle的绘制内容生成对应碰撞体，默认碰撞体尺寸为0，无法触发碰撞检测。
• Circle对象碰撞体未显式确认：尽管this.add.circle()创建的图形启用物理后会默认生成圆形碰撞体，显式设置碰撞体参数能避免潜在的匹配误差。

解决方案 #

通过手动设置两个图形的物理碰撞体，确保碰撞范围与视觉图形完全匹配：

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: true // 开启debug模式，可直观查看碰撞体轮廓
        }
    }
}

const game = new Phaser.Game(config);

let circle;
let hollowCircle;

function preload() {

}

function create() {
    // 创建实心圆并启用物理
    circle = this.add.circle(200, 200, 50, '#f5bd22');
    this.physics.world.enable(circle);
    // 显式设置实心圆碰撞体半径，与图形尺寸一致
    circle.body.setCircle(50);

    // 创建描边圆并启用物理
    hollowCircle = this.add.graphics();
    hollowCircle.lineStyle(2, 0x000000);
    hollowCircle.strokeCircle(200, 200, 100);
    this.physics.world.enable(hollowCircle);
    // 为描边圆手动设置圆形碰撞体，匹配描边半径
    hollowCircle.body.setCircle(100);
    // 设置为静态物体（若无需移动），优化性能并固定位置
    hollowCircle.body.setImmovable(true);

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

function update() {

}

关键改动说明 #

• circle.body.setCircle(50)：强制绑定碰撞体半径与实心圆视觉尺寸，消除潜在的尺寸不匹配问题。
• hollowCircle.body.setCircle(100)：为Graphics对象手动生成圆形碰撞体，让物理系统能识别描边圆的碰撞范围。
• hollowCircle.body.setImmovable(true)：将描边圆设为静态物体，既固定位置又优化物理计算性能。
• debug: true：开启后可在游戏中看到碰撞体的白色轮廓，方便验证碰撞体是否正确设置。

内容的提问来源于stack exchange，提问作者Gabriel Mercês