Используем камеру Render Texture для нестандартных трансформаций объектов в Phaser 3

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

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

Версия 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('bunny', 'assets/sprites/bunny.png');
    }

    create ()
    {
        //  Create a Render Texture at 0x0 which is 800x600 in size
        const rt = this.add.renderTexture(400, 300, 800, 600);

        rt.camera.setAngle(20);
        rt.camera.setZoom(2);
        rt.camera.setPosition(450, 350);

        rt.stamp('bunny', null, 0, 0, { originX: 0, originY: 0 }).render();
    }
}

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

const game = new Phaser.Game(config);

Что такое Render Texture и зачем ей камера?

Объект RenderTexture в Phaser — это специальный текстурированный дисплейный объект. В него можно "штамповать" другие игровые объекты (спрайты, текст, графику), а затем отображать эту комбинацию как единое целое. Каждая Render Texture имеет свою собственную камеру (rt.camera), которая управляет областью видимости и преобразованиями всего, что на ней отрисовано.

Это позволяет применять глобальные трансформации (поворот, зум, смещение) ко всему содержимому текстуры, не затрагивая оригинальные объекты в сцене. Это похоже на то, как если бы вы снимали фотографию объектов, а затем вращали и масштабировали уже саму фотографию.

Создание Render Texture и настройка камеры

В методе create() сцены создается экземпляр Render Texture. Ключевые параметры — это начальные координаты (x, y) и её размеры (width, height). В примере текстура создается в центре экрана.

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

Сразу после создания мы получаем доступ к её камере и настраиваем три свойства: 1. setAngle(20) — поворачивает "видоискатель" камеры на 20 градусов. Всё содержимое будет отрисовано с этим поворотом. 2. setZoom(2) — устанавливает двукратное увеличение. Объекты внутри текстуры будут выглядеть в два раза крупнее. 3. setPosition(450, 350) — смещает точку, которую камера смотрит в координатах мира Render Texture. Это смещает "кадр" относительно содержимого.

rt.camera.setAngle(20);
rt.camera.setZoom(2);
rt.camera.setPosition(450, 350);

Штамповка объекта и применение трансформаций

Метод stamp() добавляет (отпечатывает) игровой объект в Render Texture. В данном случае мы штампуем изображение с ключом 'bunny'. Последний аргумент — объект конфигурации, где originX и originY установлены в 0. Это означает, что точка привязки спрайта 'bунни' (его левый верхний угол) будет помещена в координаты (0, 0) мира Render Texture.

rt.stamp('bunny', null, 0, 0, { originX: 0, originY: 0 });

Важный момент: вызов .render() в конце строки (хотя в данном конкретном примере он может быть избыточен, так как штамп уже вызывает перерисовку) явно указывает движку обновить текстуру после всех манипуляций. Все трансформации камеры (поворот на 20°, зум x2 и смещение обзора) применяются именно в момент этой финальной отрисовки содержимого текстуры на экран.

.render();

В результате на экране мы видим не просто спрайт кролика, а его версию, обработанную через виртуальную камеру Render Texture: увеличенную, повёрнутую и со смещённым центром.

Области применения и отличие от трансформаций спрайта

Почему бы просто не повернуть и не масштабировать сам спрайт bunny? Потому что подход с Render Texture даёт иные возможности:

* **Групповые трансформации:** Вы можете отштамповать на одну текстуру десятки объектов, и трансформации камеры применятся ко всем им одновременно, сохраняя их взаимное расположение. * **Эффекты постобработки:** Полученную текстуру можно использовать как источник для шейдеров, рисовать на ней частицы или применять другие эффекты к уже трансформированному изображению. * **Оптимизация:** Сложная композиция из множества объектов, отрендеренная один раз в текстуру, может быть дешевле для отрисовки в каждом кадре, чем рендеринг каждого объекта по отдельности, особенно если они статичны.

Трансформация через камеру Render Texture — это преобразование всего "мира" текстуры, а не отдельного элемента в нём.

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

Использование камеры Render Texture открывает путь к созданию сложных визуальных композиций и эффектов в Phaser 3. Вы можете анимировать свойства rt.camera (угол, зум, позицию) для создания плавных переходов, "дрожания" камеры для эффектов удара или реализовать мини-карту в углу экрана. Для экспериментов попробуйте заменить один спрайт 'bunny' на несколько, отштампованных в разных координатах, или анимируйте rt.camera.setPosition с помощью tweens, чтобы создать эффект панорамирования по отрисованной сцене.