О чем этот пример
В игровых сценах часто нужно реагировать не только на завершение цикла анимации, но и на её принудительную остановку. Например, когда игрок кликает на персонажа, чтобы прервать его бег, и логика игры должна это обработать. Встроенное событие `ANIMATION_STOP` в Phaser позволяет легко интегрировать такую реакцию, поддерживая отзывчивость и согласованность состояния игры. Эта статья разберёт пример, где фон движется только во время анимации персонажа, и покажет, как правильно подписаться на событие остановки.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
constructor ()
{
super();
this.isRunning = true;
}
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.atlas('knight', 'assets/animations/knight.png', 'assets/animations/knight.json');
this.load.image('bg', 'assets/skies/clouds.png');
this.load.spritesheet('tiles', 'assets/tilemaps/tiles/fantasy-tiles.png', { frameWidth: 64, frameHeight: 64 });
}
create ()
{
// The background and floor
this.bg = this.add.tileSprite(0, 16, 800, 600, 'bg').setOrigin(0);
this.ground = this.add.tileSprite(0, 536, 800, 64, 'tiles', 1).setOrigin(0);
this.add.text(400, 8, 'Click to stop animation', { color: '#ffffff' }).setOrigin(0.5, 0);
// Our run animation
const animConfig = {
key: 'run',
frames: this.anims.generateFrameNames('knight', { prefix: 'run/frame', start: 0, end: 7, zeroPad: 4 }),
frameRate: 12,
repeat: -1
};
this.anims.create(animConfig);
const lancelot = this.add.sprite(400, 536, 'knight');
lancelot.setOrigin(0.5, 1);
lancelot.setScale(8);
lancelot.play('run');
// Event handler for when the animation completes on our sprite
lancelot.on(Phaser.Animations.Events.ANIMATION_STOP, function () {
this.isRunning = false;
}, this);
// And a click handler to stop the animation
this.input.once('pointerdown', function () {
lancelot.stop();
});
}
update ()
{
if (this.isRunning)
{
this.bg.tilePositionX += 2;
this.ground.tilePositionX += 4;
}
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
backgroundColor: '#026bc6',
pixelArt: true,
scene: Example
};
const game = new Phaser.Game(config);
Подготовка сцены и загрузка ассетов
Класс сцены наследуется от Phaser.Scene. В конструкторе инициализируется флаг isRunning, который будет отслеживать состояние анимации. Его значение true означает, что анимация активна и фон должен двигаться.
В методе preload загружаются необходимые ресурсы: атлас анимации рыцаря, фоновое изображение и тайлы для земли. Обратите внимание на использование load.atlas для анимации — это эффективный способ работы с последовательностью кадров.
this.load.atlas('knight', 'assets/animations/knight.png', 'assets/animations/knight.json');
this.load.image('bg', 'assets/skies/clouds.png');
this.load.spritesheet('tiles', 'assets/tilemaps/tiles/fantasy-tiles.png', { frameWidth: 64, frameHeight: 64 });Создание анимации и спрайта
В методе create сначала создаётся статический фон и земля с помощью add.tileSprite. Важно, что земля использует тайл из загруженного спрайтшита.
Затем конфигурация анимации run создаётся через this.anims.create. Ключевой параметр repeat: -1 задаёт бесконечное повторение. Спрайт lancelot добавляется на сцену, масштабируется и сразу начинает проигрывать анимацию с помощью play('run').
const animConfig = {
key: 'run',
frames: this.anims.generateFrameNames('knight', { prefix: 'run/frame', start: 0, end: 7, zeroPad: 4 }),
frameRate: 12,
repeat: -1
};
this.anims.create(animConfig);
const lancelot = this.add.sprite(400, 536, 'knight');
lancelot.setOrigin(0.5, 1);
lancelot.setScale(8);
lancelot.play('run');Обработка события остановки анимации
Чтобы отреагировать на остановку анимации, используется событие Phaser.Animations.Events.ANIMATION_STOP. Мы подписываем на него спрайт lancelot с помощью метода on. Обработчик события — это функция, которая устанавливает флаг isRunning в false. Контекст this в обработчике привязан к экземпляру сцены благодаря третьему аргументу this в вызове on.
lancelot.on(Phaser.Animations.Events.ANIMATION_STOP, function () {
this.isRunning = false;
}, this);Отдельно настраивается обработчик клика мыши через this.input.once. При клике вызывается метод stop() у спрайта lancelot, что и инициирует событие ANIMATION_STOP.
this.input.once('pointerdown', function () {
lancelot.stop();
});Обновление игрового состояния
Метод update выполняется на каждом кадре игры. В нём проверяется значение флага isRunning. Пока анимация активна (isRunning === true), фон и земля сдвигаются по горизонтали, создавая иллюзию движения. Как только анимация останавливается и флаг становится false, движение фона прекращается.
update ()
{
if (this.isRunning)
{
this.bg.tilePositionX += 2;
this.ground.tilePositionX += 4;
}
}Что попробовать дальше
Событие ANIMATION_STOP — это мощный инструмент для синхронизации игровой логики с состоянием анимации. В рассмотренном примере оно позволяет связать движение фона с анимацией персонажа, обеспечивая целостность игрового процесса. Для экспериментов попробуйте:
1. Запускать другую анимацию (например, idle) сразу после остановки бега.
2. Добавить звуковое сопровождение события.
3. Использовать ANIMATION_STOP в сочетании с ANIMATION_COMPLETE для управления сложными состояниями персонажа.