О чем этот пример
Анимация — это душа игры. Простые перемещения объектов оживают, когда объединяются в логические последовательности. В этой статье разберём пример из официальной коллекции Phaser, где с помощью цепочек твинов создаётся живая сцена: сундук подпрыгивает, затем открывается с помощью ключа, который летит и вращается. Вы научитесь управлять сложными последовательностями анимаций с помощью всего одного метода `tweens.chain()`, что идеально подходит для кат-сцен, реакций игровых объектов или визуальных эффектов.
Версия 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('assets', 'assets/atlas/tweenparts.png', 'assets/atlas/tweenparts.json');
}
create ()
{
const chest = this.add.image(400, 600, 'assets', 'blue-closed').setOrigin(0.5, 1);
const key = this.add.image(-200, 300, 'assets', 'simple-key-gold');
const chain1 = this.tweens.chain({
targets: chest,
tweens: [
{
y: 470,
scaleX: 0.7,
duration: 300,
ease: 'quad.out'
},
{
y: 600,
scaleX: 1,
duration: 1000,
ease: 'bounce.out'
},
],
loop: -1,
loopDelay: 300,
onComplete: () => this.openChest(chest, key)
});
this.input.once('pointerdown', () => {
chain1.completeAfterLoop(0);
});
}
openChest (chest, key)
{
this.tweens.add({
targets: chest,
x: 550,
ease: 'power3',
duration: 500
});
const chain2 = this.tweens.chain({
targets: key,
tweens: [
{
x: 200,
duration: 300,
ease: 'quad.out',
delay: 500
},
{
angle: 360,
duration: 200,
ease: 'linear',
repeat: 4
},
{
angle: 270,
duration: 200,
ease: 'linear'
},
{
scale: 0.65,
y: 380,
duration: 200,
ease: 'power2'
},
{
x: 410,
duration: 300,
ease: 'bounce.out'
},
{
targets: chest,
texture: [ 'assets', 'blue-open' ],
duration: 100
},
{
alpha: 0,
duration: 400,
ease: 'linear'
}
]
});
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#2d2d2d',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Что такое цепочка твинов и зачем она нужна
Метод this.tweens.chain() — это мощный инструмент Phaser для создания последовательности анимаций. Вместо того чтобы вручную запускать каждый следующий твин в коллбеке предыдущего (что ведёт к "аду коллбеков"), вы описываете весь сценарий в одном конфигурационном объекте. Цепочка гарантирует, что твины будут выполняться строго друг за другом, обеспечивая чистый и поддерживаемый код для сложных анимаций.
В нашем примере цепочка используется дважды: первая зацикленная анимация подпрыгивающего сундука и вторая — детальная последовательность открытия сундука ключом.
Разбор первой цепочки: анимируем сундук
В методе create() создаётся первая цепочка chain1. Её цель — бесконечно воспроизводить прыжок сундука, пока пользователь не кликнет.
const chain1 = this.tweens.chain({
targets: chest,
tweens: [
{
y: 470,
scaleX: 0.7,
duration: 300,
ease: 'quad.out'
},
{
y: 600,
scaleX: 1,
duration: 1000,
ease: 'bounce.out'
},
],
loop: -1,
loopDelay: 300,
onComplete: () => this.openChest(chest, key)
});Ключевые параметры:
- targets: chest: объект сундука — цель для всех твинов в массиве.
- tweens: массив из двух конфигураций твинов. Первый поднимает сундук и сжимает его по X, второй — опускает с "пружинящим" отскоком (bounce.out).
- loop: -1: бесконечное повторение цепочки.
- loopDelay: 300: пауза в 300 мс между повторами.
- onComplete: функция, которая вызовется, когда цепочка завершится. Но из-за бесконечного цикла она сама по себе не сработает. Её вызов триггерится извне.
Обработчик клика запускает завершение анимации:
this.input.once('pointerdown', () => {
chain1.completeAfterLoop(0);
});Метод completeAfterLoop(0) говорит цепочке: "завершись после текущей итерации цикла". Только после этого выполнится коллбек onComplete, который запускает метод openChest.
Вторая цепочка: ключ открывает сундук
Метод openChest сначала отодвигает сундук в сторону простым твином, а затем запускает сложную цепочку chain2 для ключа.
const chain2 = this.tweens.chain({
targets: key,
tweens: [
{
x: 200,
duration: 300,
ease: 'quad.out',
delay: 500
},
{
angle: 360,
duration: 200,
ease: 'linear',
repeat: 4
},
// ... другие твины в цепочке
]
});Особенности этой цепочки:
1. **Смена цели внутри цепочки**: Обратите внимание на шестой твин в массиве. У него явно указан свой параметр targets: chest. Это меняет цель анимации на лету! В данном случае меняется текстура сундука с закрытой на открытую.
{
targets: chest,
texture: [ 'assets', 'blue-open' ],
duration: 100
}2. **Комбинация свойств**: Твины могут анимировать несколько свойств одновременно. Например, четвёртый твин меняет и масштаб (scale), и позицию по Y.
3. **Повтор внутри шага**: Второй твин вращает ключ (angle: 360) и имеет параметр repeat: 4, заставляя его совершить 4 полных оборота, прежде чем цепочка перейдёт к следующему шагу. Это демонстрирует гибкость — каждый шаг цепочки может быть самостоятельной, возможно, повторяющейся анимацией.
Важные детали API и типичные ошибки
**Базовая точка (setOrigin)**: Сундук создаётся с setOrigin(0.5, 1). Это устанавливает точку привязки (anchor) в центр по X и вниз по Y. Вся анимация прыжков строится относительно этой нижней точки, что выглядит естественно, будто сундук отталкивается от земли.
**Easing-функции**: В примере используется несколько функций плавности (ease). 'quad.out' — для быстрого старта и плавного завершения, 'bounce.out' — для эффекта отскока, 'linear' — для равномерной анимации (вращение). Правильный выбор ease критически важен для "ощущений" от анимации.
**Загрузка атласа**: В preload загружается не просто изображение, а атлас (spritesheet) с помощью this.load.atlas. Это позволяет использовать отдельные кадры (фреймы) по их именам, например 'blue-closed' и 'blue-open'.
**Типичная ошибка**: Попытка анимировать свойства, которых нет у объекта. Например, texture можно менять у Image или Sprite, но не у графического примитива. В данном примере всё согласовано.
Что попробовать дальше
Цепочки твинов (tweens.chain) — это декларативный и мощный способ создавать сложные последовательные анимации в Phaser. Они избавляют от необходимости вручную управлять временем и коллбеками, позволяя сосредоточиться на творческой части.
**Идеи для экспериментов:**
1. Добавьте в цепочку звуковые эффекты, используя коллбеки onStart у отдельных твинов.
2. Создайте цепочку, где цели меняются несколько раз (например, летящий снаряд поражает цель, которая затем взрывается).
3. Поэкспериментируйте с параметром hold в конфигурации цепочки, чтобы добавлять паузы между определенными твинами.
4. Сделайте цепочку интерактивной — добавьте условие, по которому следующий твин будет выбираться из нескольких вариантов.