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

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

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

Версия 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.setPath('assets/pics/');
        this.load.image('taikodrummaster', 'taikodrummaster.jpg');
        this.load.image('sukasuka-chtholly', 'http://labs.phaser.io/assets/pics/sukasuka-chtholly.png');
    }

    create ()
    {
        this.add.image(400, 300, 'taikodrummaster');
        this.add.image(400, 300, 'sukasuka-chtholly');
    }
}

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

const game = new Phaser.Game(config);

Настройка загрузчика: setBaseURL и setPath

Перед началом загрузки ресурсов можно задать общие пути, чтобы не указывать полные URL или длинные относительные пути для каждого файла. Это делается в методе preload() сцены.

Метод this.load.setBaseURL() устанавливает корневой URL для всех последующих загрузок. Это особенно удобно, если все ваши ресурсы хранятся на одном домене, например, на CDN.

Метод this.load.setPath() задает дополнительный путь относительно базового URL (или корня проекта, если базовый URL не задан). Это помогает организовать ресурсы по папкам.

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

Загрузка локальных и внешних изображений

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

В первом случае мы загружаем изображение taikodrummaster.jpg. Поскольку ранее были заданы базовый URL и путь, загрузчик автоматически сформирует полный адрес для этого файла.

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

this.load.image('taikodrummaster', 'taikodrummaster.jpg');
this.load.image('sukasuka-chtholly', 'http://labs.phaser.io/assets/pics/sukasuka-chtholly.png');

Отображение загруженных ресурсов

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

Метод this.add.image() создает и размещает объект изображения на сцене. Первые два аргумента — это координаты X и Y, а третий — ключ ресурса, который мы указали при загрузке.

В примере оба изображения размещаются в одной точке (400, 300). Они будут отрисованы в порядке вызова, то есть второе изображение (sukasuka-chtholly) окажется поверх первого.

this.add.image(400, 300, 'taikodrummaster');
this.add.image(400, 300, 'sukasuka-chtholly');

Сборка конфигурации и запуск игры

Конфигурационный объект игры определяет основные параметры, такие как тип рендерера, размеры холста и стартовую сцену.

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

После создания объекта Phaser.Game с этой конфигурацией игра запускается, начиная с выполнения метода preload() стартовой сцены.

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

const game = new Phaser.Game(config);

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

Использование методов setBaseURL, setPath и load.image позволяет эффективно управлять загрузкой ресурсов в Phaser. Вы можете комбинировать локальные и внешние файлы, что открывает возможности для динамического обновления контента или использования сторонних хранилищ. Для экспериментов попробуйте: 1. Загрузить звуки (load.audio) или JSON-данные (load.json) с внешнего API. 2. Реализовать прогресс-бар, подписавшись на события загрузчика, такие как progress. 3. Организовать ресурсы по разным путям для разных типов ассетов (например, assets/sprites/, assets/audio/).