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

В разработке игр часто возникает необходимость в дополнительном функционале, специфичном для вашего проекта. Phaser предоставляет мощный механизм Scene Plugins, позволяющий подключать собственные JavaScript-файлы непосредственно к сцене. Это открывает путь к модульности, повторному использованию кода и чистой архитектуре. В этой статье мы разберем, как загрузить и использовать пользовательский плагин для создания динамических фрактальных изображений прямо в вашей игре.

Версия 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.scenePlugin('FractalPlugin', 'assets/loader-tests/FractalScenePlugin.js', 'fractalPlugin', 'fractals');

        // this.load.scenePlugin({
        //     key: 'FractalPlugin',
        //     url: 'assets/loader-tests/FractalScenePlugin.js',
        //     sceneKey: 'fractals'
        // });
    }

    create ()
    {
        const image = this.fractals.create(400, 300, 256, 256);

        image.setScale(2);

        this.tweens.add({

            targets: this.fractals,
            v1: 1.5,
            v2: -3.0,
            v3: 1.0,
            v4: -2.0,
            duration: 4000,
            yoyo: true,
            repeat: -1

        });

        this.tweens.add({

            targets: this.fractals,
            c1: 16,
            c2: 10,
            c3: 0,
            duration: 16000,
            yoyo: true,
            repeat: -1

        });
    }
}

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

let game = new Phaser.Game(config);

Что такое Scene Plugin?

Плагин сцены (Scene Plugin) — это специальный JavaScript-файл, который расширяет функциональность конкретной сцены в Phaser. После загрузки он становится доступен через свойство, добавленное к экземпляру сцены (this). Это идеальный способ инкапсулировать сложную логику (например, генерацию процедурного контента, управление специфичными сущностями) в отдельный модуль.

В отличие от глобальных плагинов, плагины сцены живут и умирают вместе со своей сценой, что помогает управлять памятью и избегать конфликтов.

Загрузка плагина в preload

Загрузка происходит в методе preload() сцены с помощью метода this.load.scenePlugin(). В примере используется синтаксис с аргументами, но также доступна альтернатива с объектом конфигурации (закомментирована).

this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.scenePlugin('FractalPlugin', 'assets/loader-tests/FractalScenePlugin.js', 'fractalPlugin', 'fractals');

Разберем параметры: 1. **Ключ загрузки ('FractalPlugin'):** Уникальный идентификатор для загрузчика. 2. **URL ('assets/...FractalScenePlugin.js'):** Путь к файлу плагина. setBaseURL задает общий префикс для всех загружаемых файлов. 3. **Системный ключ ('fractalPlugin'):** Внутреннее имя для системы плагинов (обычно совпадает с первым параметром в нижнем регистре). 4. **Ключ сцены ('fractals'):** Самое важное! Это имя свойства, через которое плагин будет доступен в сцене. После загрузки мы сможем обращаться к нему как this.fractals.

После успешной загрузки плагин автоматически инициализируется и «привязывается» к сцене.

Использование плагина в create

В методе create() плагин уже готов к работе. В примере плагин FractalPlugin предоставляет метод .create() для генерации фрактального изображения.

const image = this.fractals.create(400, 300, 256, 256);
image.setScale(2);

Код создает фрактальное изображение в центре экрана (x:400, y:300) с размером 256x256 пикселей и увеличивает его в 2 раза. Объект image — это стандартный Phaser.GameObjects.Image, с которым можно работать как с любым другим игровым объектом.

Ключевой момент: весь API плагина (в данном случае метод create) доступен через свойство this.fractals, которое мы задали при загрузке.

Анимация свойств плагина

Одна из сильных сторон Phaser — встроенная система твинов. Вы можете анимировать не только свойства игровых объектов, но и любые числовые свойства самого плагина.

this.tweens.add({
    targets: this.fractals,
    v1: 1.5,
    v2: -3.0,
    v3: 1.0,
    v4: -2.0,
    duration: 4000,
    yoyo: true,
    repeat: -1
});

В этом твине: - targets: this.fractals указывает, что анимироваться будут свойства самого плагина. - v1, v2, v3, v4 — это, скорее всего, параметры математической формулы фрактала (например, коэффициенты в формуле Джулии). Плагин, вероятно, использует их для перерисовки изображения в реальном времени. - Твин плавно меняет эти значения в течение 4 секунд, возвращает их обратно (yoyo: true) и повторяет бесконечно (repeat: -1).

Второй твин аналогично анимирует свойства c1, c2, c3, отвечающие, возможно, за цветовую палитру фрактала. В результате получается живое, постоянно меняющееся фрактальное изображение.

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

Scene Plugin — это элегантный способ добавить в вашу сцену специализированную логику, сохранив код чистым и модульным. Вы можете создавать плагины для генерации уровней, сложных систем частиц, диалоговых движков или, как в примере, процедурной графики. **Идеи для экспериментов:** 1. Напишите простой плагин, который добавляет метод для быстрого создания кнопки с заданным текстом и callback-функцией. 2. Создайте плагин-менеджер для аудио, который упрощает управление фоновой музыкой и звуковыми эффектами внутри сцены. 3. Поэкспериментируйте с анимацией свойств вашего плагина через this.tweens, чтобы создавать динамические визуальные эффекты.