О чем этот пример
Создание сложных последовательностей анимаций, эффектов и вызовов функций — частая задача в разработке игр. Ручное управление таймерами и твинами быстро приводит к запутанному коду. Встроенная система Timeline в Phaser позволяет декларативно описывать цепочки событий во времени и легко управлять их воспроизведением. Эта статья на практическом примере покажет, как создать интерактивную сцену с анимированным объектом, визуальными эффектами и системой частиц, которая запускается по клику мыши.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.atlas('timeline', 'assets/atlas/timeline.png', 'assets/atlas/timeline.json');
this.load.image('bg', 'assets/skies/spookysky.jpg');
this.load.atlas('flares', 'assets/particles/flares.png', 'assets/particles/flares.json');
}
create ()
{
this.add.image(400, 300, 'bg');
this.add.text(10, 10, 'Click to play timeline', { font: '16px Courier', fill: '#ffffff' });
this.status = this.add.text(10, 30, 'Timeline Progress: 0%', { font: '16px Courier', fill: '#ffffff' });
const crystalball = this.add.sprite(400, 800, 'timeline', 'crystalball');
crystalball.enableFilters();
const glowFX = crystalball.filters.internal.addGlow();
const emitter = this.add.particles(400, 300, 'flares', {
frame: 'white',
blendMode: 'ADD',
lifespan: 1200,
gravityY: -100,
scale: { start: 0.3, end: 0 },
emitting: false
});
emitter.addEmitZone({ source: new Phaser.Geom.Circle(0, -20, 90) });
const timeline = this.add.timeline([
{
at: 0,
run: () => {
glowFX.setActive(false);
glowFX.outerStrength = 0;
glowFX.innerStrength = 0;
},
tween: {
targets: crystalball,
y: 300,
ease: 'sine.in',
duration: 750
}
},
{
at: 1000,
run: () => {
glowFX.setActive(true);
emitter.start();
},
tween: {
targets: glowFX,
outerStrength: 16,
innerStrength: 8,
ease: 'sine.in',
yoyo: true,
duration: 500,
repeat: 3
}
},
{
at: 4000,
run: () => {
emitter.stop();
},
tween: {
targets: crystalball,
y: 800,
ease: 'sine.in',
duration: 500
}
},
{
at: 5000,
stop: true
}
]);
this.input.on('pointerdown', () =>
{
if (!timeline.isPlaying())
{
timeline.play();
}
});
this.timeline = timeline;
}
update ()
{
this.status.setText('Timeline Progress: ' + this.timeline.getProgress() * 100 + '%');
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#000000',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Подготовка ресурсов и создание сцены
В методе preload загружаются все необходимые для сцены ресурсы: фоновое изображение, атлас для спрайта хрустального шара и атлас для системы частиц (эмиттера). Установка базового URL упрощает указание путей.
В create мы размещаем фон, информационный текст и создаем основной спрайт — хрустальный шар. Для него сразу активируются фильтры, и добавляется эффект свечения (addGlow). Это свечение мы будем анимировать позже.
const crystalball = this.add.sprite(400, 800, 'timeline', 'crystalball');
crystalball.enableFilters();
const glowFX = crystalball.filters.internal.addGlow();Создание эмиттера частиц и Timeline
Эмиттер частиц создается в центре экрана, но изначально не испускает частицы (emitting: false). Частицы будут появляться из зоны в форме круга, добавленной методом addEmitZone.
Ключевой объект — timeline. Он создается методом this.add.timeline(), который принимает массив объектов-событий. Каждое событие происходит в определенный момент времени (свойство at в миллисекундах) и может содержать три типа действий:
1. run: Функция, которая выполняется в заданный момент.
2. tween: Конфигурация твина для анимации свойств целевых объектов.
3. stop: Флаг для остановки всей временной линии.
const timeline = this.add.timeline([
{
at: 0,
run: () => { glowFX.setActive(false); },
tween: { targets: crystalball, y: 300, duration: 750 }
},
{
at: 1000,
run: () => { glowFX.setActive(true); emitter.start(); },
tween: { targets: glowFX, outerStrength: 16, duration: 500, repeat: 3 }
}
]);Запуск Timeline по интерактивному событию
Чтобы timeline не запускался автоматически, мы привязываем его воспроизведение к событию клика мыши. Обработчик проверяет, не проигрывается ли timeline в данный момент с помощью метода isPlaying(), и если нет — запускает его методом play().
this.input.on('pointerdown', () => {
if (!timeline.isPlaying())
{
timeline.play();
}
});Для отслеживания прогресса воспроизведения в методе update используется метод getProgress(), который возвращает значение от 0 до 1. Это значение обновляет текст на экране.
update ()
{
this.status.setText('Timeline Progress: ' + this.timeline.getProgress() * 100 + '%');
}Что попробовать дальше
Timeline в Phaser — мощный инструмент для организации нелинейных скриптовых сцен и кат-сцен. Он инкапсулирует логику времени, избавляя от ручного управления множеством таймеров. Для экспериментов попробуйте: добавить звуковые эффекты в события run; создать несколько независимых timeline для разных объектов и запускать их последовательно или параллельно; использовать timeline.seek() для перемотки анимации; или управлять timeline с клавиатуры для создания пошаговых презентаций.