О чем этот пример
Создание динамичных и живых сцен часто требует нелинейного воспроизведения анимаций. Если ваш персонаж или объект должен действовать с непредсказуемыми паузами, простого циклического проигрывания кадров может быть недостаточно. В этой статье мы разберем, как использовать метод `playAfterDelay` для запуска анимации спустя случайный промежуток времени, что позволяет легко имитировать естественное, неритмичное поведение, например, дыхание существа или мигание света.
Версия 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('alien', 'assets/animations/alien.png', 'assets/animations/alien.json');
this.load.image('bg', 'assets/pics/space-wreck.jpg');
}
create ()
{
this.add.image(400, 300, 'bg');
this.anims.create({ key: 'idle', frames: this.anims.generateFrameNames('alien', { prefix: '01_Idle_', end: 17, zeroPad: 3 }), frameRate: 18 });
const ripley = this.add.sprite(400, 300, 'alien').play('idle');
const debug = this.add.text(10, 10);
this.timer = this.add.text(10, 32);
ripley.on('animationcomplete-idle', () => {
const delay = Phaser.Math.Between(100, 5000);
debug.setText('Next animation in ' + delay + ' ms');
this.v = delay;
// works as expected:
ripley.playAfterDelay('idle', delay);
// delay is accumulated:
// ripley.play({ key: 'idle', delay: delay }, true);
});
}
update (time, delta)
{
this.v -= delta;
if (this.v < 0)
{
this.v = 0;
}
this.timer.setText(this.v);
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
scene: Example
};
const game = new Phaser.Game(config);
Подготовка анимации и сцены
В методе preload загружаются необходимые ресурсы: атлас спрайтов для анимации и фоновое изображение. Ключевой этап происходит в create, где создается сама анимация.
this.anims.create({
key: 'idle',
frames: this.anims.generateFrameNames('alien', { prefix: '01_Idle_', end: 17, zeroPad: 3 }),
frameRate: 18
});Здесь this.anims.create регистрирует новую анимацию с ключом 'idle'. Кадры генерируются из атласа 'alien' по именам, соответствующим шаблону 01_Idle_000, 01_Idle_001 и так далее, до 17-го кадра. Параметр zeroPad: 3 гарантирует, что в названии кадра будет три цифры. frameRate устанавливает скорость воспроизведения в кадрах в секунду. Сразу после создания спрайта ripley ему проигрывается эта анимация с помощью play('idle').
Обработка завершения анимации
Чтобы запустить анимацию заново не сразу, а с задержкой, нужно отследить момент её окончания. Для этого используется событие animationcomplete, к которому можно привязать конкретную анимацию по её ключу.
ripley.on('animationcomplete-idle', () => {
// Код выполнится после завершения проигрывания анимации 'idle'
});Внутри обработчика события мы можем определить логику для следующего запуска. В данном примере для создания случайной паузы используется Phaser.Math.Between(min, max), которая возвращает целое число в заданном диапазоне.
Запуск с задержкой и отладка
Phaser предоставляет для нашей задачи два основных метода: playAfterDelay и play с параметром delay. В примере используется первый, как наиболее прямой и предсказуемый способ.
const delay = Phaser.Math.Between(100, 5000);
debug.setText('Next animation in ' + delay + ' ms');
ripley.playAfterDelay('idle', delay);Метод sprite.playAfterDelay(key, delay) запланирует однократный запуск анимации key через указанное количество миллисекунд (delay). Задержка не накапливается при повторных вызовах, что является его ключевым преимуществом.
В методе update реализован простой обратный отсчет для визуализации оставшегося времени до следующей анимации, что полезно для отладки.
Почему не `play` с параметром `delay`?
В закомментированной части исходного кода показана альтернатива, которая ведет себя иначе.
// ripley.play({ key: 'idle', delay: delay }, true);В этом случае параметр delay передается в объекте конфигурации методу play. Второй аргумент true указывает на то, что анимация должна проигрываться с начала (игнорируя возможный текущий прогресс). Критическая разница в том, что при таком вызове задержка имеет накопительный эффект: если событие animationcomplete сработает снова до истечения предыдущей задержки, новая задержка добавится к остатку предыдущей. Это может привести к неожиданно долгим паузам. Метод playAfterDelay лишен этого недостатка и каждый раз устанавливает новую, независимую задержку.
Что попробовать дальше
Использование playAfterDelay — это простой и надежный способ добавить в игру элементы непредсказуемости и естественности, будь то анимация бездействия персонажа, редкие события в окружении или визуальные эффекты. Для экспериментов попробуйте: изменить диапазон задержки в зависимости от состояния игры (например, в бою паузы короче), привязать запуск анимации не к её завершению, а к внешнему событию (клику мыши), или создать цепочку из нескольких анимаций, каждая из которых запускается со своей случайной задержкой.