О чем этот пример
Анимации оживляют игровой мир, но без контроля они подобны необъезженной лошади. События анимаций в Phaser 3 — это мощный инструмент для синхронизации игровой логики с визуальным представлением. Вы сможете запускать звуки в определённый кадр, создавать сложные цепочки действий, останавливать или перезапускать анимацию по условию и точно знать, когда анимация завершилась или началась заново. Эта статья на практическом примере покажет, как подписаться на пять ключевых событий анимации и эффективно использовать их в вашей игре.
Версия 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('sf2', 'assets/animations/sf2.png', 'assets/animations/sf2.json');
}
create ()
{
var animConfig = {
key: 'ryu',
frames: this.anims.generateFrameNames('sf2', { prefix: 'frame_', end: 22 }),
frameRate: 20,
repeat: 3
};
this.anims.create(animConfig);
const sprite = this.add.sprite(550, 600, 'sf2', 'frame_0')
.setOrigin(0.5, 1)
.setScale(2);
const text = this.add.text(32, 32, 'Click to Start Animation', { color: '#00ff00' });
let log = [];
let u = 0;
let ui = 0;
sprite.on(Phaser.Animations.Events.ANIMATION_START, function (anim, frame, gameObject) {
log.push('ANIMATION_START');
text.setText(log);
u = 0;
ui = 0;
});
sprite.on(Phaser.Animations.Events.ANIMATION_STOP, function (anim, frame, gameObject) {
log.push('ANIMATION_STOP');
text.setText(log);
u = 0;
ui = 0;
});
sprite.on(Phaser.Animations.Events.ANIMATION_UPDATE, function (anim, frame, gameObject) {
if (u === 0)
{
log.push('ANIMATION_UPDATE x0');
u++;
ui = log.length - 1;
}
else
{
log[ui] = 'ANIMATION_UPDATE x' + u.toString();
u++;
}
text.setText(log);
});
sprite.on(Phaser.Animations.Events.ANIMATION_REPEAT, function (anim, frame, gameObject) {
u = 0;
log.push('ANIMATION_REPEAT');
text.setText(log);
});
sprite.on(Phaser.Animations.Events.ANIMATION_COMPLETE, function (anim, frame, gameObject) {
log.push('ANIMATION_COMPLETE');
text.setText(log);
});
this.input.on('pointerdown', function () {
if (sprite.anims.isPlaying)
{
sprite.stop();
}
else
{
log = [];
sprite.play('ryu');
}
});
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
pixelArt: true,
scene: Example
};
const game = new Phaser.Game(config);
Подготовка анимации и спрайта
Перед работой с событиями необходимо создать саму анимацию и спрайт, который будет её воспроизводить. В методе preload загружается атлас анимации, а в create — конфигурируется и создаётся анимация.
Атлас sf2 содержит все кадры для персонажа. Конфигурация анимации задаёт её ключ, кадры, скорость и количество повторений. Спрайт помещается в нижнюю часть экрана и масштабируется.
var animConfig = {
key: 'ryu',
frames: this.anims.generateFrameNames('sf2', { prefix: 'frame_', end: 22 }),
frameRate: 20,
repeat: 3
};
this.anims.create(animConfig);
const sprite = this.add.sprite(550, 600, 'sf2', 'frame_0')
.setOrigin(0.5, 1)
.setScale(2);Событие ANIMATION_START
Событие ANIMATION_START генерируется один раз в самом начале воспроизведения анимации. Это идеальный момент для инициализации логики, связанной со стартом действия: сброса счётчиков, запуска вступительного звука или активации визуальных эффектов.
В примере при старте анимации в лог добавляется соответствующая запись, а внутренние счётчики `uиui` обнуляются. Обратите внимание, что событие срабатывает даже если анимация была запущена не впервые.
sprite.on(Phaser.Animations.Events.ANIMATION_START, function (anim, frame, gameObject) {
log.push('ANIMATION_START');
text.setText(log);
u = 0;
ui = 0;
});Событие ANIMATION_UPDATE
Событие ANIMATION_UPDATE — самое частое. Оно генерируется на каждом обновлении кадра анимации, то есть с частотой, заданной в frameRate. Это позволяет привязывать код к конкретным моментам внутри анимации.
В примере реализована логика группировки вызовов этого события. Первый вывод в лог отмечается как x0, а последующие обновления перезаписывают эту строку, увеличивая счётчик. Так мы видим, сколько раз подряд сработало событие обновления.
sprite.on(Phaser.Animations.Events.ANIMATION_UPDATE, function (anim, frame, gameObject) {
if (u === 0) {
log.push('ANIMATION_UPDATE x0');
u++;
ui = log.length - 1;
} else {
log[ui] = 'ANIMATION_UPDATE x' + u.toString();
u++;
}
text.setText(log);
});События ANIMATION_REPEAT и ANIMATION_COMPLETE
Эти события помогают управлять циклическими и конечными анимациями. Событие ANIMATION_REPEAT срабатывает каждый раз, когда анимация завершает свой цикл и начинает его заново (если задано repeat > 0). ANIMATION_COMPLETE вызывается один раз, когда анимация проиграна полностью, включая все повторения.
В примере при повторе сбрасывается счётчик обновлений `uи добавляется запись в лог. По завершении всей анимации фиксируется событиеANIMATION_COMPLETE`, что сигнализирует о готовности к следующему действию.
sprite.on(Phaser.Animations.Events.ANIMATION_REPEAT, function (anim, frame, gameObject) {
u = 0;
log.push('ANIMATION_REPEAT');
text.setText(log);
});
sprite.on(Phaser.Animations.Events.ANIMATION_COMPLETE, function (anim, frame, gameObject) {
log.push('ANIMATION_COMPLETE');
text.setText(log);
});Событие ANIMATION_STOP и управление с клика
Событие ANIMATION_STOP вызывается при принудительной остановке анимации методом .stop(). Это отличается от завершения COMPLETE. Остановка может быть полезна для прерывания действия по требованию игрока или из-за изменения игрового состояния.
В примере управление вынесено на клик мыши. Клик проверяет, играет ли анимация сейчас (sprite.anims.isPlaying). Если играет — останавливает её, вызывая ANIMATION_STOP. Если нет — очищает лог и запускает анимацию заново, что повлечёт вызов ANIMATION_START.
sprite.on(Phaser.Animations.Events.ANIMATION_STOP, function (anim, frame, gameObject) {
log.push('ANIMATION_STOP');
text.setText(log);
u = 0;
ui = 0;
});
this.input.on('pointerdown', function () {
if (sprite.anims.isPlaying) {
sprite.stop();
} else {
log = [];
sprite.play('ryu');
}
});Что попробовать дальше
События анимации Phaser 3 предоставляют детальный контроль над игровым процессом. Вы можете точно синхронизировать геймплейные события, звуки и визуальные эффекты с движением спрайтов. Для экспериментов попробуйте: привязать к ANIMATION_UPDATE проверку столкновений для атаки в определённый кадр, использовать ANIMATION_REPEAT для создания циклических паттернов поведения врагов или комбинировать ANIMATION_COMPLETE с цепочками анимаций для сложных кат-сцен. Главное — не перегружайте UPDATE тяжелой логикой, чтобы не просадить производительность.