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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    rt;
    player;

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

    create ()
    {
        this.rt = this.add.renderTexture(0, 0, 800, 600).setOrigin(0, 0);

        this.player = this.add.image(256, 256, 'dude');
        this.player.setOrigin(0.5, 0.5);
    }

    update ()
    {
        this.player.setPosition(this.input.x, this.input.y);

        this.rt.draw(this.player).render();
    }
}

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

const game = new Phaser.Game(config);

Что такое Render Texture?

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

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

Настройка сцены и создание объектов

В методе preload загружается спрайт игрока. Ключевая работа происходит в методе create. Здесь инициализируются два основных объекта: Render Texture и сам спрайт игрока.

this.rt = this.add.renderTexture(0, 0, 800, 600).setOrigin(0, 0);

Эта строка создаёт Render Texture размером 800x600 пикселей (под размер игры) и устанавливает его точку вращения и масштабирования в левый верхний угол (0, 0). Это удобно, так как координаты мыши будут точно соответствовать координатам на текстуре.

this.player = this.add.image(256, 256, 'dude');
this.player.setOrigin(0.5, 0.5);

Здесь создаётся спрайт игрока из загруженного изображения и устанавливается его точка вращения (origin) в центр. Это важно для корректного позиционирования при отрисовке в текстуру.

Отрисовка следа в реальном времени

Вся магия происходит в методе update, который вызывается каждый кадр.

this.player.setPosition(this.input.x, this.input.y);

Сначала мы обновляем позицию спрайта игрока, привязывая её к текущим координатам курсора мыши (this.input.x, this.input.y). Спрайт следует за курсором.

this.rt.draw(this.player).render();

Это самая важная строка. Метод draw объекта Render Texture (this.rt) принимает игровой объект и отрисовывает его на текстуре в его текущих координатах. После отрисовки вызывается метод render(), который финализирует процесс и обновляет текстуру. Поскольку мы не очищаем текстуру каждый кадр, изображения спрайта из предыдущих позиций остаются, создавая накапливающийся след.

Важно понимать: спрайт player отображается в мире игры (мы его видим), а метод draw создаёт его копию на внутреннем холсте Render Texture, который тоже отображается на экране. Так как текстура создана первой, она находится под спрайтом.

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

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

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

const game = new Phaser.Game(config);

Здесь определяется тип рендерера (AUTO), элемент на странице для встраивания игры, класс сцены и её размеры. Затем создаётся экземпляр игры с этой конфигурацией.

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

Render Texture в Phaser — это универсальный инструмент для пост-обработки и динамических визуальных эффектов. С помощью всего нескольких строк кода мы создали эффект шлейфа. Для экспериментов попробуйте изменить глобальный альфа-канал Render Texture (this.rt.setAlpha(0.99)) в update, чтобы след постепенно исчезал, или рисуйте не спрайт, а графический примитив (this.add.graphics), чтобы создать цветную линию. Можно также использовать смешивание (blendMode) для более интересных визуальных результатов.