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

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

Формат WebP предлагает отличное качество изображений при меньшем размере файла по сравнению с PNG или JPEG. Это напрямую влияет на скорость загрузки вашей игры и экономию трафика для пользователей. В Phaser 3 загрузка WebP-изображений ничем не отличается от работы с любыми другими форматами — движок автоматически определяет и обрабатывает их. В этой статье мы разберем базовый пример и посмотрим, как просто интегрировать современные форматы в ваш игровой проект.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('background', 'assets/tests/background.webp');
    }

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

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

const game = new Phaser.Game(config);

Настройка базового URL

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

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');

Этот вызов предваряет все последующие пути к файлам. В нашем примере полный путь к изображению составит указанный URL плюс относительный путь assets/tests/background.webp.

Загрузка WebP-изображения

Непосредственная загрузка изображения выполняется с помощью метода this.load.image. Phaser 3 не требует специальных указаний на формат WebP — он определяется автоматически по расширению файла.

this.load.image('background', 'assets/tests/background.webp');

Здесь 'background' — это внутренний ключ (key), по которому изображение будет доступно в коде игры. Второй аргумент — путь к файлу относительно установленного базового URL. После выполнения этого кода в методе preload изображение будет загружено в кэш.

Создание и отображение спрайта

Когда все ресурсы загружены, управление передается методу create. Здесь мы создаем и размещаем спрайт на сцене, используя загруженное изображение.

this.add.image(400, 300, 'background');

Метод this.add.image создает новый игровой объект Image. Первые два аргумента (400, 300) — это координаты X и Y для центра изображения на холсте. Третий аргумент ('background') — это тот самый ключ, который мы указали при загрузке. Phaser берет готовую текстуру из кэша и отрисовывает ее.

Конфигурация игры

Весь пример завершается стандартной конфигурацией экземпляра игры Phaser.Game. В конфиге указывается сцена, размеры холста и элемент DOM для встраивания.

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

const game = new Phaser.Game(config);

Phaser.AUTO автоматически выбирает рендерер (WebGL или Canvas). Свойства width и height задают размер игрового поля. parent — это ID HTML-элемента, в который будет встроен холст. scene принимает класс нашей сцены Example, которая будет запущена сразу после инициализации игры.

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

Как видите, Phaser 3 полностью абстрагирует работу с форматами изображений — процесс загрузки WebP идентичен работе с PNG. Для экспериментов попробуйте загрузить несколько изображений в разных форматах (WebP, PNG, JPEG) и сравните итоговый размер билда вашей игры. Также вы можете реализовать условную логику в preload, чтобы загружать WebP там, где браузер его поддерживает, и PNG в качестве фолбека для старых браузеров.