Phaser.js: всё об играх и разработке

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

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

Версия 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/apple.png');
    }

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

        const brush = this.add.image(0, 0, 'brush');

        for (let i = 0; i < 512; i++)
        {
            const x = Phaser.Math.Between(0, 800);
            const y = Phaser.Math.Between(0, 600);

            rt.draw(brush, x, y);
        }

        rt.render();
    }
}

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

const game = new Phaser.Game(config);

Что такое Render Texture?

RenderTexture — это специальный игровой объект, который представляет собой холст в памяти. На него можно рисовать другие игровые объекты, текстуры или графические примитивы, используя его методы. После завершения рисования на эту текстуру, она отображается в сцене как единое изображение (один draw call).

Ключевое преимущество: вместо сотен отдельных спрайтов, рендерер обрабатывает всего один объект — саму текстуру. Это идеально для статических фонов, тайловых карт или скоплений одинаковых объектов.

Создается текстура отрисовки с помощью this.add.renderTexture(x, y, width, height), где задаются её центр и размеры.

Разбор примера: создание и настройка

В методе preload загружается одно изображение — спрайт кисти. Это наш «штамп», который будет многократно нарисован.

this.load.image('brush', 'assets/sprites/apple.png');

В create создается сама RenderTexture размером 800x600, центрированная в точке (400, 300). Также создается спрайт-кисть, но он не добавляется в сцену напрямую — он будет использован как источник для рисования.

const rt = this.add.renderTexture(400, 300, 800, 600);
const brush = this.add.image(0, 0, 'brush');

Массовая отрисовка методом draw

Основная логика происходит в цикле. Метод rt.draw() «штампует» изображение спрайта-кисти на текстуру отрисовки в указанных координатах. Важно: координаты (x, y) указывают точку, куда будет помещен **центр** спрайта-кисти.

for (let i = 0; i < 512; i++)
{
    const x = Phaser.Math.Between(0, 800);
    const y = Phaser.Math.Between(0, 600);
    rt.draw(brush, x, y);
}

Phaser.Math.Between генерирует случайные координаты в пределах размеров текстуры. В результате 512 яблок будут нарисованы на текстуре в случайных позициях.

Финализация отрисовки и настройка сцены

После завершения цикла вызывается метод rt.render(). Этот вызов финализирует процесс рисования на текстуре. Хотя в данном примере он может работать и без него, явный вызов render() рекомендуется для гарантии корректного отображения всех изменений.

rt.render();

Конфигурация игры стандартна: задается тип рендерера, размеры холста, цвет фона и класс сцены.

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

const game = new Phaser.Game(config);

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

Render Texture — мощный инструмент для оптимизации рендеринга множества статичных объектов. Он превращает сотни отдельных спрайтов в один графический слой. Для экспериментов попробуйте: использовать разные спрайты в одном цикле, менять alpha или tint кисти перед рисованием, анимировать саму текстуру отрисовки или очищать её часть методом clear() для создания динамических эффектов, например, следов.