Добавление спрайта Phaser с использованием класса javascript ES6

У меня есть следующий минимальный код, использующий 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));
        ...
    }
}

Что мне не хватает?


javascript phaser-framework
person yolenoyer    schedule 20.08.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Мне удалось решить проблему, изменив метод create():

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

Действительно, вы можете прочитать в документации API, о методе Phaser.Physics.Arcade.World#enable():

Вызов фабричных методов инкапсулирует создание игрового объекта и создание его тела одновременно. Если вы создаете собственные классы, вы можете передать их этому методу, чтобы создать их тела.

person yolenoyer    schedule 21.08.2018

arrow_upward
0
arrow_downward

Почему бы вам не назвать аркадную физику в конфиге main.js? Т.е.

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

person miggp    schedule 01.09.2018