О чем этот пример
При создании игр часто возникает задача отображения большого количества анимированных объектов — например, пузырьков, частиц или врагов. Обычный подход с созданием отдельных спрайтов через `this.add.sprite()` быстро упирается в ограничения производительности. В этой статье мы рассмотрим мощный метод использования `SpriteGPULayer` для рендеринга тысяч анимированных спрайтов с минимальными затратами ресурсов, используя один draw call на весь слой. Этот подход особенно полезен для эффектов фона, массовых сцен и любых ситуаций, где требуется высокая плотность визуальных элементов без просадки FPS. Мы разберём пример создания 4096 анимированных пузырьков, плавно движущихся по экрану.
Версия 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.path = 'assets/atlas/trimsheet/';
this.load.atlas('testanims', 'trimsheet.png', 'trimsheet.json');
}
create ()
{
const count = 1024 * 4; // Try a million!
const b2 = this.textures.addSpriteSheetFromAtlas(
'bubble2',
{
atlas: 'testanims',
frame: 'bubble',
frameWidth: 34,
frameHeight: 68
}
);
const config4 = {
key: 'bobble2',
frames: this.anims.generateFrameNumbers('bubble2', { start: 0, end: 6 }),
frameRate: 10
};
const bobble2Anim = this.anims.create(config4);
const layer = this.add.spriteGPULayer('testanims', count);
layer.setAnimations([bobble2Anim]);
console.log(layer);
const template = {
animation: {
base: 'bobble2',
duration: 500,
delay: 0
},
x: {
base: -100,
ease: 'Linear',
amplitude: 1100,
duration: 15000,
yoyo: false
}
};
for (let i = 0; i < count; i++)
{
template.animation.delay = Math.random() * 500;
template.x.duration = (Math.random() * 10000 + 10000) / ((count + i) / (count * 2));
template.x.delay = Math.random() * 30000;
template.y = 50 + 550 * i / count;
template.scaleX = (count + i) / (count * 2);
template.scaleY = template.scaleX;
layer.addMember(template);
}
}
}
const config = {
type: Phaser.WEBGL,
parent: 'phaser-example',
width: 800,
height: 600,
scene: Example,
backgroundColor: '#808080'
};
const game = new Phaser.Game(config);
Подготовка ассетов: атлас и генерация спрайтшита
Перед созданием GPU-слоя необходимо подготовить текстуры. В примере используется атлас testanims, содержащий кадры анимации. Ключевой момент — создание спрайтшита из одного кадра атласа с помощью this.textures.addSpriteSheetFromAtlas. Этот метод «вырезает» указанный фрейм из атласа и нарезает его на отдельные кадры для анимации.
const b2 = this.textures.addSpriteSheetFromAtlas(
'bubble2',
{
atlas: 'testanims',
frame: 'bubble',
frameWidth: 34,
frameHeight: 68
}
);Здесь мы создаём новую текстуру bubble2. Параметры указывают, что нужно взять фрейм с именем 'bubble' из атласа 'testanims' и нарезать его на кадры размером 34x68 пикселей. Результат — готовая последовательность кадров для анимации.
Создание анимации и GPU-слоя
Следующий шаг — создание анимации из сгенерированных кадров. Для этого используется this.anims.generateFrameNumbers и this.anims.create. Это стандартный способ создания анимации в Phaser.
const config4 = {
key: 'bobble2',
frames: this.anims.generateFrameNumbers('bubble2', { start: 0, end: 6 }),
frameRate: 10
};
const bobble2Anim = this.anims.create(config4);Анимация 'bobble2' будет проигрывать кадры с 0 по 6 текстуры 'bubble2' со скоростью 10 кадров в секунду.
Теперь создаём сам GPU-слой. Метод this.add.spriteGPULayer принимает ключ текстуры (можно использовать базовый атлас) и максимальное количество спрайтов, которое слой сможет содержать.
const layer = this.add.spriteGPULayer('testanims', count);
layer.setAnimations([bobble2Anim]);Метод setAnimations регистрирует анимации, которые могут быть использованы спрайтами внутри этого слоя. Все спрайты в слое будут использовать одни и те же текстуры и анимации, что и является основой оптимизации.
Шаблон объекта и массовое добавление
Основная логика настройки каждого спрайта в слое заключается в использовании шаблона конфигурации. Шаблон — это JavaScript-объект, описывающий начальные свойства и анимации для одного элемента слоя.
const template = {
animation: {
base: 'bobble2',
duration: 500,
delay: 0
},
x: {
base: -100,
ease: 'Linear',
amplitude: 1100,
duration: 15000,
yoyo: false
}
};В этом шаблоне:
* animation — определяет, что спрайт должен проигрывать анимацию 'bobble2' с базовой длительностью 500 мс.
* `x— определяет твин для свойстваx(горизонтального положения). Спрайт начнёт с координаты-100`, будет двигаться с амплитудой 1100 пикселей в течение 15000 мс, используя линейную интерполяцию.
В цикле мы создаём 4096 (count) уникальных спрайтов, модифицируя параметры шаблона для каждого.
for (let i = 0; i < count; i++)
{
template.animation.delay = Math.random() * 500;
template.x.duration = (Math.random() * 10000 + 10000) / ((count + i) / (count * 2));
template.x.delay = Math.random() * 30000;
template.y = 50 + 550 * i / count;
template.scaleX = (count + i) / (count * 2);
template.scaleY = template.scaleX;
layer.addMember(template);
}Здесь для каждого пузырька задаётся случайная задержка старта анимации (animation.delay) и задержка начала движения (x.delay). Длительность движения (x.duration) и масштаб (scaleX, scaleY) зависят от индекса `i, создавая эффект перспективы. Координатаyравномерно распределяет пузырьки по вертикали. Методlayer.addMember(template)` добавляет новый спрайт, сконфигурированный по текущему шаблону, в GPU-слой.
Конфигурация игры и важные детали
Для работы SpriteGPULayer критически важно использовать рендерер WEBGL, а не CANVAS. Это указано в конфигурации игры.
const config = {
type: Phaser.WEBGL,
parent: 'phaser-example',
width: 800,
height: 600,
scene: Example,
backgroundColor: '#808080'
};Также обратите внимание, что в примере спрайты используют текстуру из атласа ('testanims'), но анимация создана на основе сгенерированного спрайтшита ('bubble2'). Это демонстрирует гибкость подхода: GPU-слой может работать с базовым атласом, в то время как логика анимации оперирует его производными.
Что попробовать дальше
Использование SpriteGPULayer — это мощный инструмент для оптимизации рендеринга в Phaser, позволяющий отображать тысячи анимированных объектов с минимальным ударом по производительности. Всё управление анимацией и движением происходит на стороне шейдера, что освобождает основной поток JavaScript.
Для экспериментов попробуйте:
1. Изменить count на большее значение (например, 10000) и оценить производительность.
2. Добавить в шаблон твины для других свойств: alpha, angle или tint.
3. Использовать несколько разных анимаций в одном слое, передав массив в setAnimations и выбирая разные animation.base в шаблоне.
4. Реализовать интерактивность: проверять клик/касание по слою, используя данные о положении спрайтов.