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

Каждый проект на Phaser 3 начинается с базового файла конфигурации и класса сцены. Понимание этой структуры — ключ к быстрому старту и масштабированию вашей игры. В этой статье мы разберем, зачем нужны `preload`, `create` и `update`, и как конфигурационный объект запускает игровой движок. Это основа, на которой вы будете строить всю игровую логику.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        // this.load.setBaseURL('https://cdn.phaserfiles.com/v385');
    }

    create ()
    {
    }

    update ()
    {
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

Класс сцены: основа игрового мира

В Phaser вся игровая логика организована в сценах (Scenes). Сцена — это самостоятельный модуль, который управляет своим состоянием, объектами и временем.

Класс Example, наследующий от Phaser.Scene, описывает одну такую сцену. В нем три ключевых метода жизненного цикла, которые движок будет вызывать автоматически.

class Example extends Phaser.Scene
{
    preload ()
    {
        // Загрузка ресурсов (изображений, звуков)
    }

    create ()
    {
        // Инициализация объектов и логики игры
    }

    update ()
    {
        // Игровой цикл, вызывается постоянно
    }
}

Метод preload: загружаем ресурсы

Метод preload() вызывается самым первым. Его задача — загрузить все необходимые для сцены ресурсы (ассеты) в память: спрайты, тайлсеты, аудиофайлы, данные JSON. Пока идет загрузка, Phaser может отображать прогресс-бар.

В закомментированной строке показан пример настройки базового URL для загрузки. Это удобно, если все ваши ассеты лежат на одном CDN или в определенной папке проекта.

// this.load.setBaseURL('https://cdn.phaserfiles.com/v385');
// this.load.image('player', 'assets/player.png');

Работа в этом методе гарантирует, что к моменту выполнения create() все изображения и звуки будут готовы к использованию.

Метод create: создаем игровой мир

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

create ()
{
    // Создаем спрайт в центре экрана
    this.player = this.physics.add.image(400, 300, 'player');
}

Считайте create() конструктором вашей сцены. Вся статичная начальная расстановка и настройка логики происходит здесь.

Метод update: игровой цикл

Сердце любой игры — это цикл. Метод update() вызывается движком постоянно, с частотой обновления кадров (обычно 60 раз в секунду). Здесь размещается динамичная логика: движение объектов, проверка условий (например, победы или поражения), обработка непрерывного ввода с клавиатуры.

update ()
{
    // Двигаем игрока, если нажата стрелка вправо
    if (this.cursors.right.isDown)
    {
        this.player.setVelocityX(160);
    }
}

Все, что должно меняться в реальном времени, обрабатывается в update().

Конфигурация: запускаем движок

Объект config описывает основные параметры игрового экземпляра. Именно он передается в конструктор Phaser.Game для инициализации движка.

const config = {
    type: Phaser.AUTO, // Рендерер: WebGL или Canvas
    width: 800,        // Ширина canvas
    height: 600,       // Высота canvas
    scene: Example     // Класс стартовой сцены
};

Ключевой параметр — scene. Он указывает, какой класс сцены будет запущен первым. Параметр type: Phaser.AUTO позволяет движку самому выбрать наиболее подходящий рендерер (WebGL или Canvas).

После создания конфига мы передаем его в конструктор Phaser.Game, и игра запускается.

const game = new Phaser.Game(config);

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

Базовая структура файла — это каркас для любой игры на Phaser 3. Методы preload, create и update четко разделяют ответственность, что делает код организованным. Для экспериментов попробуйте

  1. загрузить и отобразить спрайт в create()
  2. заставить его двигаться по нажатию клавиши в update()
  3. добавить в конфиг настройки физики, например, physics: { default: 'arcade' }