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

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

Версия 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.image('bubble', 'assets/particles/bubble.png');
        this.load.image('dude', 'assets/sprites/phaser-dude.png');
    }

    create ()
    {
        const rt = this.add.renderTexture(400, 300, 64, 64);

        rt.draw('bubble', 32, 32);
        rt.draw('dude', 32, 32);
        rt.render();
    }
}

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

const game = new Phaser.Game(config);

Что такое RenderTexture?

RenderTexture — это специальный игровой объект в Phaser, который представляет собой текстуру в памяти, на которую можно рисовать другие текстуры, графические примитивы или даже целые сцены. Его можно рассматривать как динамический спрайт или канву, содержимое которой вы контролируете программно.

Основное преимущество — это возможность объединить несколько визуальных элементов в один объект. Это снижает количество отрисовываемых объектов (draw calls) и может положительно сказаться на производительности, особенно на мобильных устройствах.

Загрузка ресурсов и создание RenderTexture

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

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('bubble', 'assets/particles/bubble.png');
    this.load.image('dude', 'assets/sprites/phaser-dude.png');
}

В методе create мы создаем сам объект RenderTexture. Ключевой метод — this.add.renderTexture(x, y, width, height). Он принимает координаты для размещения на сцене и его размеры.

const rt = this.add.renderTexture(400, 300, 64, 64);

Теперь у нас есть пустая текстура размером 64x64 пикселя, расположенная в центре экрана (при разрешении 800x600).

Рисование на RenderTexture

Самое интересное начинается с метода draw. Он позволяет нанести другое изображение (по его ключу текстуры) на RenderTexture. Важно понимать, что координаты внутри метода draw относятся не к сцене, а к самой RenderTexture. Точка (0, 0) — это ее верхний левый угол.

rt.draw('bubble', 32, 32);
rt.draw('dude', 32, 32);

В данном примере мы дважды рисуем на одну и ту же координату (32, 32) внутри нашей текстуры. Сначала рисуется "пузырек" (bubble), а поверх него — "человечек" (dude). Это позволяет легко создавать составные спрайты, например, персонажа с разным оружием или бонусами.

Обратите внимание: метод draw принимает координаты центра рисуемого изображения относительно RenderTexture. Поэтому указание (32, 32) поместит центр картинок в центр нашей текстуры размером 64x64.

Финализация отрисовки

После того как вы выполнили все необходимые операции draw, важно зафиксировать результат. Для этого используется метод render(). Он сообщает системе, что работа с текстурой завершена и ее можно отобразить.

rt.render();

Хотя в простых случаях, как в нашем примере, вызов render() может сработать и неявно, явный вызов является хорошей практикой. Он гарантирует, что все изменения применены, особенно если вы планируете динамически обновлять RenderTexture в реальном времени (например, в методе update).

Итоговый код создания сцены выглядит так:

create ()
{
    const rt = this.add.renderTexture(400, 300, 64, 64);
    rt.draw('bubble', 32, 32);
    rt.draw('dude', 32, 32);
    rt.render();
}

Конфигурация игры

Чтобы пример работал, необходимо создать экземпляр игры с конфигурацией, которая включает нашу сцену. Обратите внимание на цвет фона #2d2d88 — он подобран так, чтобы белый спрайт "человечка" и полупрозрачный "пузырек" были хорошо видны.

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

const game = new Phaser.Game(config);

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

RenderTexture — это гибкий инструмент для программного создания графики в Phaser. Вы научились создавать такую текстуру, загружать в нее изображения и финализировать отрисовку. Для экспериментов попробуйте: изменять координаты и порядок вызовов draw для создания разных композиций; использовать RenderTexture в цикле update для анимированных эффектов (например, следов или пламени); рисовать на ней не только изображения, но и графические примитивы с помощью методов вроде fill или stroke. Это откроет путь к созданию динамических интерфейсов, сложных частиц и уникальных визуальных стилей для вашей игры.