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

Хотите добавить в игру интерактивное рисование, эффект следов или динамически изменяющийся фон? Phaser Render Texture — это мощный инструмент для рендеринга графики прямо во время выполнения игры. Эта статья покажет, как превратить движение мыши в мазки кисти, создав основу для мини-игр с рисованием, систем следов или кастомизации окружения. Мы разберем пример, где каждый клик и перемещение мыши оставляют на экране текстуру, используя легковесный и производительный объект `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('brush', 'assets/sprites/brush1.png');
    }

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

        this.input.on('pointermove', pointer =>
        {

            if (pointer.isDown)
            {
                rt.draw('brush', pointer.x - 32, pointer.y - 32).render();
            }

        }, this);
    }
}

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

const game = new Phaser.Game(config);

Что такое Render Texture и зачем он нужен?

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

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

Инициализация: создаем сцену и загружаем ассеты

Вся логика примера содержится в классе сцены. Метод preload отвечает за загрузку ресурсов. Здесь мы загружаем одно изображение — текстуру кисти, которая будет использоваться в качестве "краски".

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

Ключевой момент — метод setBaseURL устанавливает базовый путь для загрузки. Это позволяет указывать только относительные пути для остальных ресурсов, что делает код чище. Изображение загружается под ключом 'brush'.

Создание холста и обработка ввода

В методе create происходит основная настройка. Сначала создается объект RenderTexture, который будет нашим холстом.

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

Параметры конструктора: первые два числа (400, 300) — это координаты X и Y для размещения текстуры в центре сцены. Следующие два числа (800, 600) — это ширина и высота самой текстуры. В данном примере она покрывает весь экран игры.

Затем мы настраиваем обработчик события перемещения указателя (мыши или касания).

this.input.on('pointermove', pointer =>
{
    if (pointer.isDown)
    {
        rt.draw('brush', pointer.x - 32, pointer.y - 32).render();
    }
}, this);

Событие 'pointermove' срабатывает при каждом движении курсора. Внутри проверяется условие pointer.isDown — рисование происходит только если кнопка мыши зажата. Это имитирует поведение реальной кисти.

Магия метода draw: как наносятся мазки

Сердце примера — вызов метода draw у объекта rt (Render Texture).

rt.draw('brush', pointer.x - 32, pointer.y - 32).render();

Этот метод принимает ключ текстуры ('brush') и координаты X, Y для ее отрисовки. Почему из координат указателя вычитается 32? Предполагается, что текстура кисти имеет размер 64x64 пикселя. Вычитание половины размера (32) центрирует кисть относительно курсора, так что мазок появляется точно под его центром, а не в верхнем левом углу.

Цепочка .render() в конце немедленно применяет изменения к текстуре. Без этого вызова мазки могут не отображаться до следующего кадра рендеринга игры.

Конфигурация и запуск игры

Код завершается стандартной для Phaser конфигурацией игры и ее созданием.

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

const game = new Phaser.Game(config);

Конфиг задает основные параметры: type определяет рендерер (WebGL или Canvas), parent — ID HTML-элемента для встраивания игры, width и height — размеры игрового поля. Важнейшее поле scene указывает, какой класс сцены будет запущен первым. Создание экземпляра Phaser.Game с этой конфигурацией запускает весь цикл.

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

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