О чем этот пример
Твины в Phaser — это мощный инструмент для создания плавных анимаций. Но что, если вам нужно выполнить какое-то действие в середине анимации, например, в момент разворота (yoyo) или повтора (repeat)? На помощь приходят кастомные коллбеки, которые позволяют встраивать свою логику в жизненный цикл твина. В этой статье мы разберем, как работают `onYoyo`, `onRepeat` и другие события, и как с их помощью оживить вашу игру.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
var progressText;
var tween;
class Example extends Phaser.Scene
{
constructor()
{
super();
}
preload()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('arrow', 'assets/sprites/arrow.png');
}
create()
{
var marker = this.add.image(64, 64, 'arrow').setAlpha(0.3);
var image = this.add.image(64, 64, 'arrow');
var text = this.add.text(32, 128, '', { font: '16px Courier', fill: '#00ff00' });
progressText = this.add.text(500, 128, '', { font: '16px Courier', fill: '#00ff00' });
var eventList = ['Events:', '-------', ''];
var addEvent = function (event)
{
eventList.push(event);
text.setText(eventList);
};
/*
tween = this.tweens.add({
targets: image,
props: {
x: {
value: 600,
delay: 2000
},
y: {
value: 200,
delay: 4000
}
},
x: 600,
ease: 'Power1',
duration: 3000,
yoyo: true,
repeat: 2,
delay: 2000,
onActive: function () { addEvent('onActive') },
onStart: function () { addEvent('onStart') },
onYoyo: function () { addEvent('onYoyo') },
onRepeat: function () { addEvent('onRepeat') },
onComplete: function () { addEvent('onComplete') }
});
*/
/*
tween = this.tweens.add({
targets: image,
props: {
x: {
value: 600,
delay: 2000
},
y: {
value: 200,
delay: 4000
}
},
ease: 'Power1',
duration: 3000,
yoyo: true,
repeat: 1,
completeDelay: 2000,
paused: true,
onActive: function () { addEvent('onActive') },
onStart: function () { addEvent('onStart') },
onYoyo: function () { addEvent('onYoyo') },
onRepeat: function () { addEvent('onRepeat') },
onComplete: function () { addEvent('onComplete') }
});
*/
/*
tween = this.tweens.add({
targets: image,
props: {
x: {
value: 600,
delay: 2000
},
y: {
value: 200,
delay: 4000
}
},
ease: 'Power1',
duration: 3000,
yoyo: true,
loop: 1,
paused: true,
onActive: function () { addEvent('onActive') },
onStart: function () { addEvent('onStart') },
onLoop: function () { addEvent('onLoop') },
onYoyo: function () { addEvent('onYoyo') },
onRepeat: function () { addEvent('onRepeat') },
onComplete: function () { addEvent('onComplete') }
});
*/
tween = this.tweens.add({
targets: image,
props: {
x: {
value: 600,
delay: 1000
}
},
ease: 'Power1',
duration: 3000,
yoyo: true,
paused: true,
onActive: function () { addEvent('onActive') },
onStart: function () { addEvent('onStart') },
onLoop: function () { addEvent('onLoop') },
onYoyo: function () { addEvent('onYoyo') },
onRepeat: function () { addEvent('onRepeat') },
onComplete: function () { addEvent('onComplete') }
});
console.log(tween);
this.input.on('pointerdown', function ()
{
tween.play();
});
}
update()
{
progressText.setText('Progress: ' + tween.totalProgress);
}
// The callback is always sent a reference to the Tween as the first argument and the targets as the second,
// then whatever you provided in the onStartParams array as the rest
onYoyoHandler(tween, target)
{
console.log(arguments);
target.toggleFlipX().setAlpha(0.2 + Math.random());
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#2d2d2d',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Жизненный цикл твина: от Active до Complete
Твин в Phaser проходит через несколько этапов. Понимание этого цикла — ключ к использованию коллбеков.
- onActive: Вызывается, когда твин становится активным в менеджере твинов.
- onStart: Срабатывает при первом запуске твина (после всех задержек).
- onYoyo: Вызывается каждый раз, когда твин начинает движение в обратном направлении (при условии, что yoyo: true).
- onRepeat: Срабатывает, когда твин начинает новый повтор цикла (если repeat больше 0).
- onLoop: Похож на onRepeat, но используется при настройке через свойство loop.
- onComplete: Финализирует анимацию, вызывается после завершения всех циклов и йо-йо.
Эти коллбеки можно задать прямо в конфигурационном объекте при создании твина.
Разбираем пример: логирование событий
В исходном примере создается твин для спрайта стрелки. Основная логика — это функция addEvent, которая добавляет название сработавшего события в массив eventList и обновляет текстовый объект на экране.
var addEvent = function (event) {
eventList.push(event);
text.setText(eventList);
};Таким образом, на экране в реальном времени отображается последовательность вызовов: onActive, onStart, onYoyo и т.д. Это наглядный способ отследить порядок работы коллбеков.
Ключевой момент: коллбек onYoyo
Событие onYoyo — это ваш шанс вмешаться в момент, когда объект достигает конечной точки и начинает движение назад. В коде примера оно объявлено так:
onYoyo: function () { addEvent('onYoyo') }Однако в закомментированных блоках и в функции onYoyoHandler класса Example показана более продвинутая форма. Коллбек получает параметры: ссылку на сам твин и его целевой объект (или массив целей).
// Метод в классе сцены
onYoyoHandler(tween, target) {
console.log(arguments);
target.toggleFlipX().setAlpha(0.2 + Math.random());
}Эта функция переворачивает спрайт по горизонтали и задает ему случайную прозрачность каждый раз при развороте анимации. Чтобы подключить такой метод, его нужно указать в конфиге твина:
onYoyo: function (tween, target) { this.scene.onYoyoHandler(tween, target) }Обратите внимание на использование this.scene для доступа к контексту сцены из коллбека.
Управление твином: play, pause, progress
Пример также демонстрирует управление твином. Твин создается с параметром paused: true, поэтому он не запускается автоматически.
paused: true,Запуск происходит по клику мыши через метод play():
this.input.on('pointerdown', function () {
tween.play();
});В методе update сцены отображается общий прогресс твина от 0 до 1 с помощью свойства tween.totalProgress. Это полезно для создания индикаторов выполнения или синхронизации других событий с анимацией.
progressText.setText('Progress: ' + tween.totalProgress);Разница между repeat, loop и yoyo
В закомментированных блоках показаны три разных подхода к циклам, что часто вызывает путаницу.
1. **yoyo: true, repeat: 2**: Объект пройдет от точки A к B, вернется к A (йо-йо), затем повторит этот полный цикл (A→B→A) еще 2 раза. onYoyo сработает на каждом обратном ходе, onRepeat — в начале каждого нового полного цикла.
2. **yoyo: true, repeat: 1, completeDelay: 2000**: После завершения всего цикла (включая йо-йо) твин сделает паузу в 2 секунды (completeDelay), а затем вызовет onComplete.
3. **yoyo: true, loop: 1**: Свойство loop — альтернатива repeat. loop: 1 означает, что твин выполнит один основной проход (A→B) и затем еще один дополнительный цикл (всего 2 прохода). При этом также работает йо-йо. Вместо onRepeat используется коллбек onLoop.
Выбор зависит от нужной логики анимации. yoyo отвечает за движение назад, repeat/loop — за количество повторений всего процесса.
Что попробовать дальше
Коллбеки твинов в Phaser — это мощный механизм для создания сложных, реактивных анимаций. Используйте onYoyo для изменения внешнего вида или логики объекта в точке разворота, onRepeat для синхронизации действий с новым циклом, а onComplete для запуска следующих событий. Для экспериментов попробуйте в коллбеке onYoyo не только менять прозрачность, но и переключать текстуру, испускать частицы, играть звуковой эффект или запускать цепочку зависимых твинов для других объектов.