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

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

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

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

Живой запуск

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

Исходный код

var sceneConfig = {
    preload: preload,
    create: create,
    pack: {
        files: [
            { type: 'image', key: 'sonic', url: 'assets/sprites/sonic_havok_sanity.png' }
        ]
    }
};

var gameConfig = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: sceneConfig
};

var game = new Phaser.Game(gameConfig);

function preload ()
{
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('face', 'assets/pics/bw-face.png');
}

function create ()
{
    this.add.image(400, 300, 'face');
    this.add.image(400, 300, 'sonic');
}

Структура конфигурационного объекта сцены

В Phaser сцена — это основной контейнер для логики игры. Её поведение определяется конфигурационным объектом, который передается в Phaser.Game. Этот объект может содержать ссылки на функции жизненного цикла и специальные разделы для работы с ресурсами.

var sceneConfig = {
    preload: preload,
    create: create,
    pack: {
        files: [
            { type: 'image', key: 'sonic', url: 'assets/sprites/sonic_havok_sanity.png' }
        ]
    }
};

Здесь мы видим три основных компонента: 1. preload — функция для асинхронной загрузки ресурсов. 2. create — функция, вызываемая после preload, для создания игровых объектов. 3. pack — объект, позволяющий описать ресурсы для немедленной загрузки прямо в конфигурации.

Упаковка ресурсов через свойство `pack`

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

pack: {
    files: [
        { type: 'image', key: 'sonic', url: 'assets/sprites/sonic_havok_sanity.png' }
    ]
}

Каждый элемент в массиве files — это дескриптор ресурса. Поле type указывает тип (например, 'image', 'audio'), key — это уникальный строковый идентификатор для последующего использования в коде, а url — путь к файлу. Ресурс с ключом 'sonic' будет загружен автоматически и доступен уже на этапе выполнения функции create.

Загрузка файлов в функции `preload`

Классический способ загрузки ресурсов в Phaser — использование функции preload. Её главное преимущество — возможность настройки базового URL, что упрощает организацию путей к файлам.

function preload() {
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('face', 'assets/pics/bw-face.png');
}

Метод this.load.setBaseURL() задаёт общую начальную часть для всех последующих URL в этой сцене. Затем метод this.load.image() регистрирует изображение для загрузки, используя ключ 'face' и относительный путь. Оба метода являются частью API Loader Plugin, доступного через this.load.

Использование загруженных ресурсов в `create`

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

function create() {
    this.add.image(400, 300, 'face');
    this.add.image(400, 300, 'sonic');
}

Метод this.add.image(x, y, key) создает и размещает на сцене объект изображения. Координаты (400, 300) — это центр области просмотра размером 800x600, заданной в конфиге игры. Ключи 'face' и 'sonic' ссылаются на ресурсы, загруженные ранее. Оба изображения будут отображены одно поверх другого.

Сборка всего вместе: конфигурация игры

Конфигурационный объект сцены (sceneConfig) передается в общую конфигурацию игры (gameConfig), которая, в свою очередь, используется для создания экземпляра игры.

var gameConfig = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: sceneConfig
};

var game = new Phaser.Game(gameConfig);

Поле scene здесь принимает объект sceneConfig. Другие важные параметры: - type: Рендерер (Phaser.CANVAS или Phaser.WEBGL). - parent: ID HTML-элемента, в который будет встроен canvas. - width и height: Размер области отрисовки. Создание экземпляра Phaser.Game с этой конфигурацией запускает весь жизненный цикл.

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

Использование конфигурационного объекта сцены — это чистый и декларативный способ организации кода в Phaser. Вы можете комбинировать предзагрузку (preload) и упаковку (pack) для оптимальной загрузки ресурсов. Для экспериментов попробуйте: добавить в pack аудиофайл, использовать setBaseURL для локальных ресурсов или загружать спрайтшит вместо одиночного изображения через this.load.spritesheet в preload.