О чем этот пример

Phaser предлагает несколько способов создания сцен — жизненно важных контейнеров для вашей игровой логики. В этой статье мы разберем классический подход через создание экземпляра класса `Phaser.Scene`. Этот метод идеально подходит для начинающих, так как наглядно демонстрирует жизненный цикл сцены и позволяет быстро получить работающий прототип. Вы поймете, как объявить сцену, загрузить ресурсы и отобразить их на экране, что станет основой для любого вашего проекта.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код


const demo = new Phaser.Scene('Demo');

demo.preload = function ()
{
    this.load.image('face', 'assets/pics/bw-face.png');
}

demo.create = function ()
{
    this.add.image(400, 300, 'face');
}

const config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: demo
};

const game = new Phaser.Game(config);

Объявление экземпляра сцены

Вместо использования классов ES6, Phaser позволяет создать сцену как обычный объект. Это делается с помощью конструктора Phaser.Scene. Ему передается строковый ключ, который в дальнейшем может использоваться для управления сценами.

const demo = new Phaser.Scene('Demo');

На этом этапе создается пустой контейнер. Чтобы наполнить его жизнью, мы напрямую присваиваем функции его ключевым методам жизненного цикла: preload, create и update.

Загрузка ресурсов в методе preload

Метод preload автоматически вызывается движком в первую очередь. Его задача — загрузить все необходимые ассеты (изображения, звуки, данные) в кеш игры. Для этого используется менеджер загрузки this.load.

demo.preload = function ()
{
    this.load.image('face', 'assets/pics/bw-face.png');
}

Здесь мы говорим загрузчику: "Загрузи файл по пути 'assets/pics/bw-face.png' и присвой ему в кеше ключ 'face'". Ключ 'face' — это то имя, по которому мы будем обращаться к изображению позже в коде.

Создание игровых объектов в create

Как только все ресурсы из preload загружены, Phaser вызывает метод create. Это место для первоначальной настройки игрового мира: создания персонажей, платформ, интерфейса и запуска анимаций.

demo.create = function ()
{
    this.add.image(400, 300, 'face');
}

С помощью менеджера отображения this.add мы создаем объект изображения. Аргументы 400 и 300 — это координаты X и Y для его размещения на экране. Третий аргумент 'face' — это ключ загруженного ранее изображения. Объект будет отрисован с центром в указанной точке.

Конфигурация и запуск игры

Чтобы игра заработала, нужно создать основной объект Phaser.Game. Ему передается конфигурационный объект, который определяет базовые настройки рендерера и указывает, какие сцены использовать.

const config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: demo
};

const game = new Phaser.Game(config);

Ключевое поле scene принимает либо одну сцену (как в нашем примере), либо массив сцен. После создания экземпляра Phaser.Game движок автоматически запускает первую (или единственную) сцену, начиная с вызова её метода preload.

Что попробовать дальше

Подход с созданием экземпляра Phaser.Scene — это прямой и понятный способ начать работу. Вы явно видите структуру сцены и её методы. Для экспериментов попробуйте

  1. добавить в create несколько изображений с разными координатами
  2. создать вторую сцену таким же способом и переключиться на неё по клику
  3. использовать метод update для анимации объекта, изменяя его координаты каждый кадр. Это станет отличной основой для изучения более сложных возможностей движка