О чем этот пример
Создание сложных, последовательных изменений свойств игровых объектов обычно требует написания громоздкого кода с таймерами и твинами. Таймлайн (Timeline) в Phaser решает эту задачу элегантно, позволяя описывать цепочку событий в декларативном стиле. Эта статья покажет, как использовать `this.add.timeline()` для создания управляемых временем последовательностей, где вы можете изменять `alpha`, `scale`, `tint` и другие свойства спрайтов в заданные моменты времени. Это мощный инструмент для нелинейных скриптовых сцен, интро или реакций объектов на игровые события.
Версия 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');
}
create ()
{
this.add.image(400, 300, 'bg');
const bat = this.add.sprite(400, 300, 'timeline', 'bat');
const timeline = this.add.timeline([
{
at: 2000,
target: bat,
set: {
alpha: 0.2
}
},
{
at: 4000,
target: bat,
set: {
alpha: 1,
scaleX: 2,
scaleY: 2
}
},
{
at: 6000,
target: bat,
set: {
tint: 0xff0000,
angle: 22
}
}
]);
timeline.play();
}
}
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
backgroundColor: '#000000',
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Что такое таймлайн и зачем он нужен
Таймлайн — это контейнер для событий, привязанных к конкретным временным меткам. В отличие от классических анимаций спрайтов, он не управляет кадрами, а позволяет задавать мгновенные изменения любых свойств объекта в указанный момент времени.
Это идеально для сценариев, где нужно: * Постепенно раскрывать интерфейс. * Создавать сценарные последовательности (например, объект появляется, увеличивается, затем меняет цвет). * Синхронизировать действия нескольких объектов по времени без связывания их жесткой логикой.
В предоставленном примере мы управляем одним объектом — летучей мышью (bat), — но таймлайн может одновременно управлять множеством разных target.
Создание и конфигурация таймлайна
Таймлайн создается с помощью метода this.add.timeline(), который принимает массив объектов-событий. Каждое событие описывает, **когда** (at) и **с каким объектом** (target) что произойдет.
Ключевое свойство set внутри события определяет, какие именно свойства объекта будут изменены в указанный момент. Изменения применяются мгновенно.
const timeline = this.add.timeline([
{
at: 2000,
target: bat,
set: {
alpha: 0.2
}
}
]);В этом фрагменте через 2000 миллисекунд (2 секунды) после старта таймлайна свойство alpha (прозрачность) спрайта bat будет мгновенно изменено на 0.2.
Метка времени at всегда указывается в миллисекундах относительно момента запуска таймлайна командой timeline.play().
Строим последовательность событий
Сила таймлайна раскрывается при создании цепочек событий. Каждое новое событие в массиве выполняется независимо в свое время, создавая последовательный сценарий.
Посмотрите на полную цепочку из примера:
const timeline = this.add.timeline([
{
at: 2000,
target: bat,
set: { alpha: 0.2 } // Через 2 сек. мышь почти исчезает
},
{
at: 4000,
target: bat,
set: { // Через 4 сек. (еще +2 сек.)
alpha: 1, // Полная видимость
scaleX: 2, // Увеличение по X в 2 раза
scaleY: 2 // Увеличение по Y в 2 раза
}
},
{
at: 6000,
target: bat,
set: { // Через 6 сек. (еще +2 сек.)
tint: 0xff0000, // Окрашивание в красный
angle: 22 // Поворот на 22 градуса
}
}
]);Таким образом, мы получаем сценарий: объект плавно (но мгновенно в каждый момент времени) тускнеет, затем резко становится крупным и видимым, и, наконец, краснеет и поворачивается. Все интервалы четко контролируются.
Запуск и управление
Созданный таймлайн по умолчанию не активен. Для старта последовательности необходимо явно вызвать метод play().
timeline.play();Phaser также предоставляет другие методы для управления, такие как stop(), pause() и resume(), которые позволяют гибко интегрировать таймлайн в игровую логику (например, останавливать скриптовую сцену, если игрок ушел в меню).
Важно: время at отсчитывается от момента вызова play(), а не от создания таймлайна.
Что попробовать дальше
Таймлайн — это простой и мощный инструмент для создания временных последовательностей в Phaser. Он избавляет от необходимости ручного управления множеством таймеров и делает код сценариев чистым и наглядным.
**Идеи для экспериментов:**
1. Сделайте таймлайн цикличным, используя свойство loop при создании.
2. Назначьте одно и то же время at для нескольких событий с разными target, чтобы синхронизировать действия нескольких объектов (например, взрыв и тряску камеры).
3. Используйте свойства `xиyвнутриset` для мгновенных телепортаций объекта по сцене по сценарию.
4. Скомбинируйте таймлайн с обычными твинами (tweens) для более плавных переходов между ключевыми состояниями.