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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const rt = this.add.renderTexture(400, 300, 800, 600);

        const circle = this.add.circle(0, 0, 120, 0x6666ff).setVisible(false);
        const rect = this.add.rectangle(0, 0, 300, 64, 0xff0000).setVisible(false);

        rt.draw(circle, 300, 300);
        rt.draw(rect, 500, 300);
        rt.render();
    }
}

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

const game = new Phaser.Game(config);

Создание Render Texture

Первым шагом является создание самой Render Texture. Это специальный игровой объект, который ведет себя как динамический холст.

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

Метод this.add.renderTexture принимает четыре аргумента: координаты X и Y центра текстуры на сцене, а затем её ширину и высоту. В нашем примере создается текстура размером 800x600 пикселей, размещенная по центру сцены (координаты 400, 300).

Подготовка объектов для рисования

На Render Texture можно рисовать любые игровые объекты Phaser. В данном примере используются простые геометрические фигуры: круг и прямоугольник.

const circle = this.add.circle(0, 0, 120, 0x6666ff).setVisible(false);
const rect = this.add.rectangle(0, 0, 300, 64, 0xff0000).setVisible(false);

Мы создаем круг (circle) и прямоугольник (rect) с помощью this.add.circle и this.add.rectangle. Ключевой момент — вызов метода .setVisible(false). Он скрывает эти оригинальные объекты от основной сцены, так как они нужны нам только как «кисти» для рисования на текстуре. Их первоначальные координаты (0,0) не важны, так как при рисовании мы укажем нужную позицию.

Рисование и финализация

Процесс рисования на текстуре похож на работу с реальным холстом. Мы помещаем на него наши подготовленные объекты.

rt.draw(circle, 300, 300);
rt.draw(rect, 500, 300);

Метод draw объекта Render Texture (rt) принимает три аргумента: игровой объект для отрисовки и координаты X, Y, где он должен быть размещен на текстуре. Здесь круг рисуется в точке (300, 300) текстуры, а прямоугольник — в (500, 300).

После того как все нужные элементы нарисованы, метод render финализирует текстуру.

rt.render();

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

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

Render Texture позволяет превратить динамическую сцену из множества объектов в единый оптимизированный спрайт. Это отличный способ снизить нагрузку на рендеринг для статичных или редко меняющихся элементов. Для экспериментов попробуйте: нарисовать на одной текстуре десятки скрытых спрайтов и анимировать саму текстуру; использовать rt.clear() для стирания части изображения и перерисовки; или создать сложный UI-элемент, скомбинировав несколько графических примитивов.