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

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

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

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

    create ()
    {
        const texture = this.textures.createCanvas('julia', 800, 600);

        //  These functions are all loaded in the fractals.js script file

        // drawMandelbrot(texture.canvas, texture.context, 64);
        // drawBurningShipFractal(texture.canvas, texture.context, 64);
        drawJulia(texture.canvas, texture.context, 100);

        //  Call this if running under WebGL, or you'll see nothing change
        texture.refresh();

        this.add.image(400, 300, 'julia');
    }
}

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

const game = new Phaser.Game(config);

Настройка базового URL и загрузка скрипта

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

Затем с помощью метода load.script() мы ставим в очередь на загрузку внешний JavaScript-файл. Этот метод принимает два ключевых аргумента: уникальный ключ для дальнейшего обращения (в нашем случае 'fractals') и путь к файлу относительно базового URL.

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

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

Создание динамической текстуры из Canvas

После загрузки всех ассетов управление передается методу create(). Здесь мы создаем специальную текстуру на основе HTML Canvas элемента с помощью this.textures.createCanvas(). Этот метод создает пустой canvas указанного размера и регистрирует его в менеджере текстур Phaser под заданным ключом ('julia').

Получившийся объект texture содержит ссылки на сам DOM-элемент canvas и его 2D-контекст context. Именно эти объекты мы передадим во внешнюю функцию для отрисовки.

const texture = this.textures.createCanvas('julia', 800, 600);

Использование функций из загруженного скрипта

К моменту выполнения create() скрипт fractals.js уже загружен и исполнен. Это означает, что объявленные в нем функции (например, drawMandelbrot, drawBurningShipFractal, drawJulia) доступны в глобальной области видимости.

В примере вызывается функция drawJulia, которая принимает три аргумента: DOM-элемент canvas, его 2D-контекст и максимальное количество итераций для алгоритма. Функция производит все вычисления и отрисовывает фрактал прямо на переданном canvas.

drawJulia(texture.canvas, texture.context, 100);

Обновление текстуры и добавление спрайта

Если игра работает под WebGL, простое рисование на canvas текстуры недостаточно. Рендереру Phaser нужно явно сообщить, что содержимое текстуры изменилось. Для этого вызывается метод texture.refresh(). Этот шаг критически важен для WebGL-рендера, но при использовании Canvas-рендера он не требуется.

Наконец, созданная и заполненная текстура используется как обычное изображение. Мы добавляем ее на сцену в координатах (400, 300). Phaser корректно отрисует наш динамически сгенерированный фрактал.

texture.refresh();
this.add.image(400, 300, 'julia');

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

Динамическая загрузка скриптов — мощный инструмент для модульной архитектуры игр на Phaser. Она позволяет разбивать код на логические части, подгружать пользовательский контент или даже реализовывать плагины. Поэкспериментируйте: попробуйте загружать скрипт по нажатию кнопки, создайте систему плагинов для мини-игр или реализуйте загрузку пользовательских шейдеров. Также стоит изучить метод load.plugin() для загрузки классов, совместимых с системой плагинов Phaser.