Question

使用Phaser.js 3.11.0和Javascript ES6，我有以下最少的代码：

class Ship extends Phaser.Physics.Arcade.Image {
    constructor(scene, x, y) {
        super(scene, x, y, 'ship');
    }
}

class Scene extends Phaser.Scene {
    preload() {
        this.load.image('ship', require('../assets/ship.png'));
    }

    create() {
        this.ship1 = this.physics.add.existing(new Ship(this, 50, 70));
        this.ship2 = this.physics.add.image(150, 70, 'ship');
    }
}

new Phaser.Game({
    type: Phaser.AUTO,
    width: 200,
    height: 150,
    scene: Scene,
    physics: {
        default: 'arcade',
        arcade: {
            debug: true,
        },
    },
});

使用this.physics.add.existing(new Ship(this, 50, 70))不起作用：即使显示了调试边界框，该精灵也不会以正确的大小显示。

以下是渲染的输出：

如果我不使用物理学，则精灵会正确显示：

class Ship extends Phaser.GameObjects.Image {
    ...
}

class Scene extends Phaser.Scene {
    ...
    create() {
        this.ship1 = this.add.existing(new Ship(this, 50, 70));
        ...
    }
}

我想念什么？

Answer 1

我能够通过更改create()方法来解决此问题：

create() {
    this.ship1 = this.add.existing(new Ship(this, 50, 70));
    this.physics.world.enable([ this.ship1 ]);
}

实际上，您可以在API documentation中阅读有关Phaser.Physics.Arcade.World#enable()方法的信息：

调用工厂方法封装了Game Object和同时创建它的身体。 如果您要创建自定义类，然后您可以将它们传递给此方法以获取其主体已创建。

Answer 2

为什么不在配置main.js中调用Arcade物理学？

const config = {
    type: Phaser.AUTO,
    width: window.innerWidth,
    height: window.innerHeight,
    physics: {
        default: 'arcade',
        arcade: {
            debug: true
        }
    },
    scene: [
        BootScene,
        LevelScene,
    ]
}

使用JavaScript ES6类添加Phaser精灵

2 个答案: