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

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

Версия 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({
            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 и как его загрузить

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

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

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

Рассмотрим параметры конфигурационного объекта: - key: Внутренний ключ для загрузчика. - url: Путь к файлу плагина. - sceneKey: Это самый важный параметр. Он определяет имя свойства, под которым плагин будет доступен в сцене. В нашем примере после загрузки мы сможем обращаться к плагину как this.fractals.

Использование плагина после загрузки

После успешной загрузки в методе preload() и создания сцены в create(), плагин становится доступен через указанное в sceneKey свойство. В исходном коде плагин FractalPlugin предоставляет метод create() для генерации изображения.

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

Здесь this.fractals.create() — это метод, который определен в загруженном плагине. Мы вызываем его с координатами (400, 300) и размерами 256x256, получая игровой объект image, который затем масштабируем. Важно понимать, что API плагина (доступные методы и свойства) полностью зависит от его реализации. В данном случае, судя по контексту, плагин создает фрактальное изображение.

Анимация параметров плагина через Tweens

Одна из сильных сторон Phaser — система твинов, которая может анимировать не только стандартные свойства игровых объектов (x, y, alpha), но и любые числовые свойства любого объекта. В нашем примере объектом анимации выступает сам экземпляр плагина this.fractals.

Первый твин анимирует свойства v1, v2, v3, v4.

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

Второй твин анимирует свойства c1, c2, c3.

this.tweens.add({
    targets: this.fractals,
    c1: 16,
    c2: 10,
    c3: 0,
    duration: 16000,
    yoyo: true,
    repeat: -1
});

Ключевые параметры твинов: - targets: Указывает объект для анимации (this.fractals). - v1, c1 и т.д.: Это пользовательские свойства, которые, скорее всего, используются внутри плагина FractalPlugin для расчета фрактала (например, как коэффициенты в математической формуле). Твин будет плавно менять их значения от текущих до указанных. - yoyo: Если true, твин проиграется в обратном порядке после завершения, создавая циклическое движение. - repeat: -1: Задает бесконечное повторение анимации.

Таким образом, анимируя внутренние параметры плагина, мы динамически меняем генерируемое фрактальное изображение, создавая живой, перетекающий визуальный эффект.

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

Конфигурация игры стандартна и указывает на нашу сцену Example как на начальную.

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

let game = new Phaser.Game(config);

Этот код создает экземпляр игры Phaser с холстом размером 800x600. Важно, что плагин загружается и инициализируется внутри жизненного цикла сцены Example, поэтому он не будет доступен в других сценах, если явно не загружен в них аналогичным образом.

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

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

  1. Написать свой простой плагин, добавляющий, например, метод this.utils.spawnEnemies()
  2. Поиграть с параметрами твинов (длительность, функции эasing) для получения разных визуальных ритмов
  3. Загружать один и тот же плагин с разными sceneKey в нескольких сценах