В этой статье я приведу ряд различий между Phaser 2 и Phaser 3 с которыми я столкнулся во время портирования проекта P2 на P3.

1. Конструктор Phaser.Game

Конструктор теперь создаётся с 1 параметром — объектом с полями конфигурации многих элементов. Например:

Пример конструктора Phaser 3

module PhaserGame {

  export class GameEngine {

    constructor() {
      // game configuration object
      var gameConfig = {
        // DOM parent
        parent: Config.DOM_PARENT_ID,
        // render type
        type: Phaser.AUTO,
        // game width, in pixels
        width: Config.GW,
        // game height, in pixels
        height: Config.GH,
        // game background color
        backgroundColor: "#f8b195",
        // scale settings
        scale: {
          mode: Phaser.Scale.FIT,
          autoCenter: Phaser.Scale.CENTER_BOTH
        },
        // physics settings
        physics: {
          default: "arcade"
        },
        // start scene
        scene: null
      };

      var game = new Phaser.Game(gameConfig);

      game.scene.add(Scenes.PRELOADER, Preloader);
      game.scene.add(Scenes.MAINMENU, MainMenu);
      game.scene.add(Scenes.GAME, Game);
      game.scene.add(Scenes.BOOT, Boot, true);
    }
  }
}

window.onload = () => {
  new PhaserGame.GameEngine();
};

module PhaserGame {

export class GameEngine {

constructor() {

// game configuration object

var gameConfig = {

// DOM parent

parent: Config.DOM_PARENT_ID,

// render type

type: Phaser.AUTO,

// game width, in pixels

width: Config.GW,

// game height, in pixels

height: Config.GH,

// game background color

backgroundColor: "#f8b195",

// scale settings

scale: {

mode: Phaser.Scale.FIT,

autoCenter: Phaser.Scale.CENTER_BOTH

// physics settings

physics: {

default: "arcade"

// start scene

scene: null

};

var game = new Phaser.Game(gameConfig);

game.scene.add(Scenes.PRELOADER, Preloader);

game.scene.add(Scenes.MAINMENU, MainMenu);

game.scene.add(Scenes.GAME, Game);

game.scene.add(Scenes.BOOT, Boot, true);

}

window.onload = () => {

new PhaserGame.GameEngine();

};

Подробнее можно посмотреть в документации.

2. Раздел game.device

Чуток изменился раздел this.game.device, в нём как будь-то бы прибрались) Появились подразделы browser, os, input, audio, video и др. А в P2 это было всё в куче.

3. Таймер

В P2 одиночный таймер вызывается так:

...
this.time.events.add(100, this.onWaitComplete, this);
...

...

this.time.events.add(100, this.onWaitComplete, this);

...

В P3 это стало выглядеть так:

...
this.time.delayedCall(100, this.onWaitComplete, [], this);
...

...

this.time.delayedCall(100, this.onWaitComplete, [], this);

...

К тому же появились looped timer, repeat timer, подробности в документации.

4. GameObjects

Классы объектов теперь находятся в Phaser.GameObjects.

Было: Phaser.Sprite, Phaser.Image и др.

Стало: Phaser.GameObjects.Sprite, Phaser.GameObjects.Image и др.

Группы для элементов, которыми у меня являлись обычные спрайты в Phaser2, теперь так не поиспользовать. Sprite — это спрайт, а для группировки элементов теперь нужно использовать класс Phaser.GameObjects.Group, т.е. визуальный элемент теперь нельзя добавить child-ом другому визуальному элементу.

5. Нет класса Button

Это так же относится к предыдущему разделу, но решил вынести отдельно, т.к. в Phaser 3 класса кнопки Button вообще нет. Придётся писать свой класс.

(тут будет пример своего класса кнопки)

6. Update сцены

Наконец-то необходимый атрибут deltaTime теперь нативно передаётся в функцию update() сцены. А также первым атрибутом идёт time.

Статья дополняется

буду дополнять статью по мере определения новых различий в обыденных методах.

Cyber Code

Программирование, GameDev

Различия Phaser 2 и Phaser 3 — часть 2 (код)