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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    image;
    screen1;

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

    create ()
    {
        this.image = this.add.image(400, 300, 'einstein');

        // Create render textures to capture key elements of the scene.
        this.screen1 = this.add.renderTexture(100, 150, 200, 300);
        this.screen2 = this.add.renderTexture(300, 450, 200, 300);
        this.screen3 = this.add.renderTexture(500, 150, 200, 300);
        this.screen4 = this.add.renderTexture(700, 450, 200, 300);

        // Change the view of the render texture cameras.
        // This is half the resolution of the target image.
        this.screen1.camera.setScroll(320, 257);
        this.screen2.camera.setScroll(320, 257);
        this.screen3.camera.setScroll(320, 257);
        this.screen4.camera.setScroll(320, 257);

        // Do things that regular cameras can't do.
        this.screen1.setTint(0xff7f00);
        this.screen2.setRotation(0.1);
        this.screen4.enableFilters();
        const blur = this.screen4.filters.internal.addBlur();
        blur.setPaddingOverride(null);
    }

    update ()
    {
        this.image.rotation += 0.01;

        this.screen3.camera.rotation -= 0.005;

        this.screen1.draw(this.image).render();
        this.screen2.draw(this.image).render();
        this.screen3.draw(this.image).render();
        this.screen4.draw(this.image).render();
    }
}

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

const game = new Phaser.Game(config);

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

RenderTexture в Phaser — это специальный игровой объект, представляющий собой динамическую текстуру (холст), на которую можно отрисовывать другие объекты. Её ключевая особенность — встроенная камера (renderTexture.camera), которая определяет, какую именно область исходной сцены захватывать.

В отличие от обычной камеры this.cameras.main, которая управляет общим видом на весь холст игры, RenderTexture позволяет: * Создавать несколько независимых «видов» на сцену. * Применять к каждому виду уникальные трансформации (поворот, оттенок) и фильтры. * Размещать эти обработанные виды как отдельные спрайты в любой точке экрана. Это открывает возможности для создания мини-карт, порталов, экранов наблюдения или стилизованных эффектов.

Создание и настройка Render Textures

В примере создается четыре RenderTexture, каждая из которых будет показывать свой «кадр» вращающегося изображения Эйнштейна.

// Создание Render Texture с указанием позиции (x, y) и размера (width, height)
this.screen1 = this.add.renderTexture(100, 150, 200, 300);
this.screen2 = this.add.renderTexture(300, 450, 200, 300);
this.screen3 = this.add.renderTexture(500, 150, 200, 300);
this.screen4 = this.add.renderTexture(700, 450, 200, 300);

Сразу после создания каждая RenderTexture имеет свою собственную камеру. С помощью метода setScroll мы настраиваем, какую область исходной сцены эта камера будет «видеть». В данном случае все четыре камеры смотрят на одну и ту же точку (320, 257) — центр исходного изображения.

// Настройка области захвата для камеры Render Texture
this.screen1.camera.setScroll(320, 257);

Применение эффектов: то, что не умеют обычные камеры

Здесь проявляется главное преимущество подхода. К объекту RenderTexture можно применять методы, доступные обычным игровым объектам (как к Image или Sprite), а также специальные методы для фильтров.

// 1. Наложение цветового оттенка (Tint)
this.screen1.setTint(0xff7f00); // Оранжевый оттенок

// 2. Поворот самого холста Render Texture
this.screen2.setRotation(0.1); // Небольшой наклон

// 3. Включение и добавление фильтров постобработки
this.screen4.enableFilters(); // Активируем систему фильтров для этой текстуры
const blur = this.screen4.filters.internal.addBlur(); // Добавляем фильтр размытия
blur.setPaddingOverride(null); // Отключаем автоматический паддинг для точного контроля

Важно: эти эффекты применяются не к исходному изображению на сцене, а к его «снимку», который хранится в RenderTexture. Исходное изображение (this.image) остается неизменным.

Динамическое обновление и рендеринг

Чтобы содержимое RenderTexture обновлялось каждый кадр и отражало изменения на сцене, необходим вызов методов draw и render в функции update.

update ()
{
    // Вращаем исходное изображение на сцене
    this.image.rotation += 0.01;

    // Вращаем камеру третьей RenderTexture (меняет угол обзора захватываемой области)
    this.screen3.camera.rotation -= 0.005;

    // Ключевой момент: отрисовка текущего состояния объекта в каждую текстуру и её обновление
    this.screen1.draw(this.image).render();
    this.screen2.draw(this.image).render();
    this.screen3.draw(this.image).render();
    this.screen4.draw(this.image).render();
}

Метод draw добавляет указанный игровой объект (или массив объектов) в очередь отрисовки текстуры, используя текущее состояние её камеры. Метод render выполняет саму отрисовку из очереди на холст текстуры. Без вызова render изменения не появятся. Обратите внимание, что screen3 демонстрирует двойное вращение: исходное изображение вращается, и одновременно вращается камера, которая его захватывает, что создает сложный визуальный эффект.

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

Использование RenderTexture в роли камеры — это продвинутая техника, которая значительно расширяет палитру визуальных возможностей в Phaser. Вы можете создавать динамические картины в картине, применять различные эффекты к разным частям геймплея или реализовывать сложные интерфейсы. **Идеи для экспериментов:** 1. Захватывайте в RenderTexture не статическое изображение, а целую группу (Group) движущихся врагов или частиц. 2. Используйте setAlpha для RenderTexture, чтобы создать эффект полупрозрачного окна. 3. Динамически меняйте положение камеры (setScroll) текстуры, чтобы она следовала за конкретным игроком на большой карте для мини-карты. 4. Комбинируйте несколько фильтров (например, размытие и цветокоррекцию) на одной текстуре.