О чем этот пример
Когда нужно управлять множеством объектов как единым целым и анимировать их с минимальными усилиями, на помощь приходят контейнеры и система твинов Phaser. Этот пример демонстрирует, как создать сложный визуальный эффект "завихрения", управляя 128 контейнерами и их дочерними спрайтами. Вы научитесь централизованно трансформировать группы объектов и строить цепочки анимаций с задержками.
Версия 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('rick', 'assets/demoscene/purple-raster.png');
this.load.image('rick', 'assets/demoscene/sunset-raster.png');
this.load.image('rick2', 'assets/demoscene/rastercarpet32.png');
}
create ()
{
const sprite1 = this.add.sprite(0, 100, 'rick');
const sprite2 = this.add.sprite(-100, 0, 'rick2').setAngle(90);
const sprite3 = this.add.sprite(0, -100, 'rick').setAngle(180);
const sprite4 = this.add.sprite(100, 0, 'rick2').setAngle(270);
const containers = [];
for (let i = 0; i < 128; i++)
{
const container = this.add.container(400, 300);
if (i > 0)
{
container.setExclusive(false);
}
container.add([ sprite1, sprite2, sprite3, sprite4 ]);
containers.push(container);
}
this.tweens.add({
targets: sprite1,
y: -100,
ease: 'Quad.easeInOut',
duration: 4000,
repeat: -1,
yoyo: true
});
this.tweens.add({
targets: sprite2,
x: 100,
ease: 'Quad.easeInOut',
duration: 4000,
repeat: -1,
yoyo: true
});
this.tweens.add({
targets: sprite3,
y: 100,
ease: 'Quad.easeInOut',
duration: 4000,
repeat: -1,
yoyo: true
});
this.tweens.add({
targets: sprite4,
x: -100,
ease: 'Quad.easeInOut',
duration: 4000,
repeat: -1,
yoyo: true
});
this.tweens.add({
targets: containers,
angle: { value: 360, duration: 6000 },
scaleX: { value: 6, duration: 3000, yoyo: true, ease: 'Quart.easeInOut' },
scaleY: { value: 0.1, duration: 3000, yoyo: true, ease: 'Quad.easeInOut' },
repeat: -1,
delay: function (target, key, value, index, total, tween)
{
return index * 16;
}
});
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#000000',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Подготовка ресурсов и создание спрайтов
В методе preload загружаются два изображения, которые будут использоваться как текстуры для спрайтов. Обратите внимание на использование setBaseURL для указания базового пути.
В create создаются четыре спрайта, которые станут дочерними элементами для каждого контейнера. Они позиционируются по квадрату вокруг точки (0,0) и поворачиваются на разные углы с помощью метода .setAngle(). Это исходное расположение для будущей анимации.
const sprite1 = this.add.sprite(0, 100, 'rick');
const sprite2 = this.add.sprite(-100, 0, 'rick2').setAngle(90);
const sprite3 = this.add.sprite(0, -100, 'rick').setAngle(180);
const sprite4 = this.add.sprite(100, 0, 'rick2').setAngle(270);Массовое создание и настройка контейнеров
Контейнеры (Container) — это игровые объекты, которые могут содержать в себе других детей. Их главная мощь в том, что трансформации (позиция, масштаб, поворот), примененные к контейнеру, автоматически влияют на всех его потомков.
В цикле создается 128 контейнеров, каждый центрируется в точке (400, 300). Первому контейнеру оставляют стандартное свойство exclusive равным true, что означает его принадлежность к дисплейному списку сцены. Для всех последующих контейнеров это свойство сбрасывается в false с помощью setExclusive(false). Это важная оптимизация для большого количества контейнеров, не являющихся самостоятельными отображаемыми объектами.
В каждый контейнер добавляется один и тот же набор из четырех спрайтов, созданных ранее. Все контейнеры сохраняются в массив containers для дальнейшей анимации.
const container = this.add.container(400, 300);
if (i > 0) {
container.setExclusive(false);
}
container.add([ sprite1, sprite2, sprite3, sprite4 ]);
containers.push(container);Анимация дочерних спрайтов
Чтобы оживить внутренние спрайты каждого контейнера, используются твины (Tweens). Для каждого из четырех спрайтов создается отдельная анимация, заставляющая их двигаться по одной из осей (вверх-вниз или влево-вправо).
Ключевые параметры твина:
- targets: объект или массив объектов для анимации.
- ease: функция плавности движения.
- duration: длительность одного цикла в миллисекундах.
- repeat: -1: анимация повторяется бесконечно.
- yoyo: true: после завершения цикла анимация проигрывается в обратном порядке, создавая колебание.
Эти анимации присваиваются непосредственно спрайтам. Поскольку эти спрайты являются детьми всех контейнеров, их движение будет отражено в каждом из 128 контейнеров одновременно.
this.tweens.add({
targets: sprite1,
y: -100,
ease: 'Quad.easeInOut',
duration: 4000,
repeat: -1,
yoyo: true
});Сложная анимация всех контейнеров
Самая эффектная часть — анимация массива из 128 контейнеров одним твином. Твин в Phaser может принимать массив в качестве targets и анимировать каждый элемент с индивидуальной задержкой.
В этом твине задается три одновременных преобразования: 1. Поворот на 360 градусов за 6 секунд. 2. Масштабирование по оси X до значения 6 и обратно (эффект "растягивания"). 3. Масштабирование по оси Y до значения 0.1 и обратно (эффект "сплющивания").
Параметр delay — это функция, которая вычисляет задержку старта анимации для каждого контейнера в массиве. Здесь задержка равна индексу элемента, умноженному на 16 мс. Это создает волнообразный, последовательный запуск анимации для всех контейнеров, что и формирует основной визуальный паттерн "завихрения". Поскольку контейнеры вращаются и масштабируются, а их дети (спрайты) внутри двигаются по своим твинам, получается сложная композитная анимация.
delay: function (target, key, value, index, total, tween) {
return index * 16;
}Итоговая конфигурация игры
Сцена, описанная классом Example, передается в конфигурацию игры Phaser. Указываются размеры холста, цвет фона и элемент DOM, в который будет встроена игра. Это стандартная конфигурация для запуска любого примера Phaser.
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#000000',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);Что попробовать дальше
Комбинируя контейнеры для групповых трансформаций и мощную систему твинов с функциями задержки, можно создавать впечатляющие эффекты из сотен объектов, написав всего несколько десятков строк кода. Для экспериментов попробуйте изменить количество контейнеров, параметры delay-функции, значения масштаба или добавить анимацию свойства alpha для создания эффекта растворения.