Phaser.js: всё об играх и разработке

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    preload ()
    {
        // this.load.setBaseURL('https://cdn.phaserfiles.com/v385');
        this.load.image('sky', 'src/games/firstgame/assets/sky.png');
        this.load.image('ground', 'src/games/firstgame/assets/platform.png');
        this.load.image('star', 'src/games/firstgame/assets/star.png');
        this.load.image('bomb', 'src/games/firstgame/assets/bomb.png');
        this.load.spritesheet('dude', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 });
    }

    create ()
    {
        this.add.image(400, 300, 'sky');
    }

    update ()
    {
    }
}

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

const game = new Phaser.Game(config);

Структура класса сцены

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

class Example extends Phaser.Scene
{
    preload ()
    {
    }

    create ()
    {
    }

    update ()
    {
    }
}

Метод preload() выполняется самым первым и предназначен для загрузки всех необходимых ресурсов (изображений, звуков, данных). Метод create() вызывается один раз после успешной загрузки всех ресурсов из preload() и служит для создания и настройки игровых объектов. Метод update() выполняется на каждом кадре игры (до 60 раз в секунду) и используется для обновления логики, например, перемещения персонажей.

Загрузка ресурсов в preload()

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

preload ()
{
    this.load.image('sky', 'src/games/firstgame/assets/sky.png');
    this.load.image('ground', 'src/games/firstgame/assets/platform.png');
    this.load.image('star', 'src/games/firstgame/assets/star.png');
    this.load.image('bomb', 'src/games/firstgame/assets/bomb.png');
    this.load.spritesheet('dude', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 });
}

Метод this.load.image() загружает обычное статичное изображение. Первый аргумент ('sky') — это уникальный строковый ключ, по которому вы будете обращаться к этому ресурсу в коде. Второй аргумент — путь к файлу.

Метод this.load.spritesheet() загружает изображение, которое представляет собой набор кадров анимации (спрайтшит). Помимо ключа и пути, он принимает объект конфигурации, где frameWidth и frameHeight задают размер одного кадра.

Создание объектов в create()

После того как все ресурсы загружены, можно создавать игровые объекты. В данном примере на сцену добавляется фоновое изображение.

create ()
{
    this.add.image(400, 300, 'sky');
}

Метод this.add.image() создает новый объект изображения (Image Game Object) и сразу добавляет его на сцену. Аргументы 400 и 300 — это координаты X и Y центра изображения. Поскольку размер игрового мира в конфигурации указан как 800x600, эти координаты поместят изображение ровно в центр экрана. Третий аргумент 'sky' — это ключ ресурса, который был задан при загрузке в preload().

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

Экземпляр игры Phaser.Game создается один раз и является точкой входа. Его конфигурация определяет базовые параметры рендеринга и начальную сцену.

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

const game = new Phaser.Game(config);

В объекте config: - type: Phaser.AUTO позволяет движку автоматически выбрать способ рендеринга (WebGL или Canvas). - width и height: задают размер игрового холста. - scene: указывает класс сцены, которая будет запущена сразу после инициализации движка. Передавать нужно сам класс (Example), а не его экземпляр.

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

Вы освоили базовый каркас игры на Phaser 3: создание сцены, загрузку ресурсов и отрисовку фона. Это основа для любого более сложного проекта. Для экспериментов попробуйте: 1. Изменить координаты в this.add.image() и посмотреть, как двигается фон. 2. Добавить в create() отрисовку других загруженных изображений ('ground', 'star') на разных слоях. 3. Заменить путь в this.load.image() на URL любой картинки из интернета, чтобы понять принцип загрузки внешних ресурсов.