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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.atlas('banner', 'assets/atlas/banners.png', 'assets/atlas/banners.json');
    }

    create ()
    {
        const banner = this.textures.addDynamicTexture('playerBanner', 512, 512);

        banner.camera.scrollY -= 100;

        banner.stamp('banner', 'Banner_02', 256, 256).render();

        this.add.sprite(400, 300, 'playerBanner');
    }
}

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

const game = new Phaser.Game(config);

Что такое динамическая текстура?

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

Ключевое отличие от обычной текстуры в том, что её содержимое генерируется кодом во время выполнения, а не загружается из файла. Это открывает возможности для процедурной генерации.

Создание текстуры и управление камерой

В методе create() сцены мы создаём динамическую текстуру. Обратите внимание на параметры: название, ширина и высота.

const banner = this.textures.addDynamicTexture('playerBanner', 512, 512);

У каждой динамической текстуры есть своя внутренняя камера (banner.camera). По умолчанию она смотрит в центр текстуры. Сдвиг камеры изменяет точку, относительно которой будут отрисовываться элементы на этом холсте.

banner.camera.scrollY -= 100;

В данном примере мы сдвигаем камеру вверх на 100 пикселей. Это значит, что координата (0,0) для операций рисования на этой текстуре теперь находится не в левом верхнем углу холста, а на 100 пикселей выше. Это полезно для точного центрирования или смещения рисунка.

Рисование на текстуре методом Stamp

Основной способ добавить изображение на динамическую текстуру — использовать метод .stamp(). Он "штампует" (копирует) заданный кадр из атласа или изображения в указанные координаты на текстуре.

banner.stamp('banner', 'Banner_02', 256, 256).render();

Разберём аргументы: 1. 'banner' — ключ загруженного атласа текстуры. 2. 'Banner_02' — имя конкретного фрейма внутри этого атласа. 3. 256, 256 — координаты X и Y, куда будет помещён центр штампа.

**Важный нюанс:** координаты (256, 256) — это центр нашей текстуры размером 512x512. Однако из-за сдвига камеры (scrollY -= 100) эта точка фактически находится ниже видимого центра камеры. Штамп будет отрисован именно там.

Метод .stamp() возвращает ссылку на саму текстуру, что позволяет делать чейнинг. Завершающий вызов .render() обязателен — он фиксирует все произведённые изменения и делает текстуру готовой к использованию.

Использование созданной текстуры в игре

После генерации динамическая текстура становится доступна в менеджере текстур под своим ключом, как и любая загруженная. Мы можем создать обычный спрайт и указать эту текстуру.

this.add.sprite(400, 300, 'playerBanner');

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

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

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