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

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

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

Версия 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 ()
    {
    }

    update ()
    {
    }
}

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

const game = new Phaser.Game(config);

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

Класс, расширяющий Phaser.Scene, является основным контейнером для логики вашей игры. Phaser автоматически вызывает его методы в определенном порядке.

class Example extends Phaser.Scene
{
    preload ()
    {
        // Загрузка ассетов
    }

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

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

* preload(): Этот метод вызывается самым первым. Его единственная задача — загрузить все медиафайлы (картинки, аудио, спрайтшиты) в кеш игры. Пока загрузка не завершена, игра не перейдет к следующему этапу. * create(): После успешной загрузки всех ресурсов Phaser вызывает этот метод один раз. Здесь вы создаете игровые объекты, настраиваете физику, анимации и начальное состояние игры. * update(): Этот метод вызывается непрерывно, обычно 60 раз в секунду (в зависимости от частоты кадров). Здесь размещается основная игровая логика: проверка ввода, перемещение объектов, проверка столкновений.

Загрузка статичных изображений

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

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');

После выполнения этих строк в preload() изображения с ключами 'sky', 'ground', 'star' и 'bomb' становятся доступными в кеше сцены. Позже вы сможете создать из них спрайты, используя, например, this.add.image(x, y, 'sky') или this.physics.add.image(x, y, 'bomb').

Работа со спрайтшитами

Спрайтшит — это одно изображение, содержащее несколько кадров анимации, расположенных в виде сетки. Он необходим для создания анимированных персонажей или объектов.

this.load.spritesheet('dude', 'src/games/firstgame/assets/dude.png', { frameWidth: 32, frameHeight: 48 });

Метод this.load.spritesheet() принимает три основных аргумента: 1. Ключ ('dude'), по которому спрайтшит будет доступен. 2. Путь к файлу изображения. 3. Объект конфигурации, где frameWidth и frameHeight задают ширину и высоту одного кадра анимации.

Phaser автоматически «разрежет» большое изображение dude.png на множество маленьких кадров размером 32x48 пикселя. Эти кадры затем можно будет использовать для создания анимаций в методе create() с помощью API this.anims.create().

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

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

const config = {
    type: Phaser.AUTO, // Рендерер: WebGL или Canvas (выбирается автоматически)
    width: 800,        // Ширина игрового холста
    height: 600,       // Высота игрового холста
    scene: Example     // Класс сцены, которая будет запущена первой
};

const game = new Phaser.Game(config);

Создание экземпляра new Phaser.Game(config) — это точка входа. После этого Phaser возьмет управление на себя: создаст холст, начнет игровой цикл и запустит жизненный цикл указанной сцены (Example), последовательно вызывая preload(), create() и затем update().

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

Вы успешно разобрали каркас сцены Phaser и научились загружать ресурсы. Ключевой вывод: разделение логики на preload (загрузка), create (инициализация) и update (игровой цикл) делает код чистым и предсказуемым. Для экспериментов попробуйте: 1. Добавить загрузку звукового файла с помощью this.load.audio(). 2. Изменить размеры холста в объекте config и посмотреть, как меняется игра. 3. Загрузить другой спрайтшит и рассчитать его frameWidth и frameHeight, исходя из количества кадров в строке и столбце.