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

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

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

Живой запуск

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

Исходный код


class RandomNamePlugin extends Phaser.Plugins.BasePlugin {

    constructor (pluginManager)
    {
        super('RandomNamePlugin', pluginManager);

        this.syllables = [ 'fro', 'tir', 'nag', 'bli', 'mon', 'fay', 'shi', 'zag', 'blarg', 'rash', 'izen' ];
    }

    init ()
    {
        console.log('Plugin is alive');
    }

    getName ()
    {
        let name = '';

        for (let i = 0; i < Phaser.Math.Between(2, 4); i++)
        {
            name = name.concat(Phaser.Utils.Array.GetRandom(this.syllables));
        }

        return Phaser.Utils.String.UppercaseFirst(name);
    }

}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    plugins: {
        global: [
            { key: 'RandomNamePlugin', plugin: RandomNamePlugin, start: true }
        ]
    },
    scene: {
        preload: preload,
        create: create
    }
};

let game = new Phaser.Game(config);

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

function create ()
{
    let image = this.add.image(400, 300, 'elephant');

    let plugin = this.plugins.get('RandomNamePlugin');

    let name = plugin.getName();

    this.add.text(10, 10, 'The elephants name is: ' + name, { font: '16px Courier', fill: '#00ff00' });
}

Структура класса плагина

Каждый плагин в Phaser должен наследоваться от базового класса Phaser.Plugins.BasePlugin. Это даёт доступ к менеджеру плагинов и жизненному циклу.

В конструкторе мы вызываем родительский конструктор, передавая имя плагина и менеджер. Здесь же инициализируются внутренние данные, в нашем случае — массив слогов для генерации имён.

Метод init — это хук, который вызывается, когда плагин готов. Он идеально подходит для первоначальной настройки.

class RandomNamePlugin extends Phaser.Plugins.BasePlugin {
    constructor (pluginManager) {
        super('RandomNamePlugin', pluginManager);
        this.syllables = [ 'fro', 'tir', 'nag', 'bli', 'mon', 'fay', 'shi', 'zag', 'blarg', 'rash', 'izen' ];
    }
    init () {
        console.log('Plugin is alive');
    }
}

Реализация основной логики

Основная функциональность плагина реализуется в виде его публичных методов. В нашем примере это метод getName.

Он использует встроенные утилиты Phaser для работы со случайными числами и массивами: Phaser.Math.Between и Phaser.Utils.Array.GetRandom. Это гарантирует, что генерация будет корректно интегрирована в игровой цикл Phaser.

Сгенерированная строка приводится к формату с заглавной первой буквой с помощью Phaser.Utils.String.UppercaseFirst.

getName () {
    let name = '';
    for (let i = 0; i < Phaser.Math.Between(2, 4); i++) {
        name = name.concat(Phaser.Utils.Array.GetRandom(this.syllables));
    }
    return Phaser.Utils.String.UppercaseFirst(name);
}

Регистрация плагина в конфигурации игры

Чтобы сделать плагин глобально доступным, его необходимо прописать в конфигурационном объекте игры, в секции plugins.global. Ключевые параметры: - key: строковый идентификатор для последующего получения плагина. - plugin: ссылка на класс плагина. - start: флаг, указывающий на необходимость немедленного запуска (вызова init).

const config = {
    type: Phaser.AUTO,
    // ... другие настройки ...
    plugins: {
        global: [
            { key: 'RandomNamePlugin', plugin: RandomNamePlugin, start: true }
        ]
    },
    scene: {
        preload: preload,
        create: create
    }
};
let game = new Phaser.Game(config);

Использование плагина внутри сцены

После регистрации плагин становится доступен через менеджер плагинов экземпляра сцены this.plugins. Для получения экземпляра используется метод get с ключом, указанным при конфигурации.

Получив экземпляр, можно вызывать его публичные методы, как и любой другой объект. В примере сгенерированное имя выводится на экран с помощью this.add.text.

function create ()
{
    let image = this.add.image(400, 300, 'elephant');
    // Получаем экземпляр нашего плагина
    let plugin = this.plugins.get('RandomNamePlugin');
    // Используем его функционал
    let name = plugin.getName();
    this.add.text(10, 10, 'The elephants name is: ' + name, { font: '16px Courier', fill: '#00ff00' });
}

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

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

  1. Добавить в плагин метод для генерации имён по определённому шаблону (например, "воин", "маг")
  2. Сделать массив слогов настраиваемым извне
  3. Создать плагин-обёртку для работы с локальным хранилищем (localStorage)