О чем этот пример
В игровом движке Phaser 3 реализация сложных траекторий движения объектов и визуальных эффектов может быть простой и элегантной. Эта статья разбирает пример сцены, где космический корабль следует по заранее заданному сплайну, оставляя за собой красивый шлейф из частиц. Вы узнаете, как создавать плавные, повторяющиеся пути для игровых объектов и привязывать к ним динамические системы частиц для усиления визуального восприятия.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class SceneE extends Phaser.Scene {
constructor ()
{
super('SceneE');
this.ship;
this.particles;
this.emitter;
this.splineData = [
50, 300,
146, 187,
35, 94,
180, 40,
446, 35,
438, 100,
337, 150,
452, 185,
560, 155,
641, 90,
723, 147,
755, 262,
651, 271,
559, 318,
620, 384,
563, 469,
433, 457,
385, 395,
448, 334,
406, 265,
316, 305,
268, 403,
140, 397,
205, 309,
204, 240,
144, 297,
50, 300
];
this.curve;
}
create ()
{
this.cameras.main.setViewport(0, 136, 1024, 465);
this.curve = new Phaser.Curves.Spline(this.splineData);
let ship = this.add.follower(this.curve, 50, 300, 'space', 'ship');
ship.startFollow({
duration: 12000,
yoyo: true,
ease: 'Sine.easeInOut',
repeat: -1
});
this.particles = this.add.particles(0, 0, 'space', {
frame: 'blue',
speed: 100,
lifespan: 2000,
alpha: 0.6,
angle: 180,
scale: { start: 0.7, end: 0 },
blendMode: 'ADD'
});
ship.setDepth(1);
this.ship = ship;
this.particles.startFollow(this.ship);
}
}
Подготовка данных и инициализация сцены
В конструкторе класса сцены SceneE мы определяем ключевые свойства и данные для построения кривой. Массив splineData содержит координаты X и Y контрольных точек, по которым будет построен сплайн. Каждая пара чисел представляет собой позицию на экране. Это основа для траектории движения.
this.splineData = [
50, 300,
146, 187,
// ... остальные координаты
50, 300
];Также в конструкторе объявляются переменные для хранения ссылок на игровой объект корабля (this.ship), систему частиц (this.particles) и саму кривую (this.curve). Метод super('SceneE') регистрирует сцену в менеджере сцен движка под уникальным ключом 'SceneE'.
Создание кривой и объекта-последователя
В методе create() сначала задается область просмотра для камеры сцены с помощью this.cameras.main.setViewport. Затем на основе подготовленного массива точек создается объект сплайна — плавной кривой, проходящей через эти точки.
this.curve = new Phaser.Curves.Spline(this.splineData);Следующий шаг — создание игрового объекта, который будет следовать по этой кривой. Для этого используется фабричный метод this.add.follower. Первым аргументом передается созданная кривая, следующими — стартовые координаты (они будут проигнорированы, так как объект встанет на начало кривой) и ключи для текстуры и кадра.
let ship = this.add.follower(this.curve, 50, 300, 'space', 'ship');После создания объекта на него сразу вызывается метод startFollow, который запускает анимацию движения. В конфигурационном объекте задаются параметры: длительность одного прохода по кривой, флаг возврата обратно (yoyo), функция плавности и количество повторений (-1 для бесконечного).
ship.startFollow({
duration: 12000,
yoyo: true,
ease: 'Sine.easeInOut',
repeat: -1
});Настройка и привязка системы частиц
Чтобы создать визуальный эффект шлейфа, используется система частиц. Она создается методом this.add.particles. Первые два аргумента — это изначальные координаты эмиттера (0, 0), но они не важны, так как эмиттер будет следовать за кораблем. Далее указывается ключ атласа текстур и конфигурация частиц.
this.particles = this.add.particles(0, 0, 'space', {
frame: 'blue', // Кадр текстуры для частиц
speed: 100, // Скорость разлета частиц
lifespan: 2000, // Время жизни частицы в миллисекундах
alpha: 0.6, // Прозрачность
angle: 180, // Направление эмиссии (вверх)
scale: { start: 0.7, end: 0 }, // Изменение размера от начала к концу жизни
blendMode: 'ADD' // Режим наложения для эффекта свечения
});Чтобы частицы появлялись позади движущегося объекта, кораблю принудительно задается большая глубина отрисовки с помощью ship.setDepth(1). Это гарантирует, что он будет поверх частиц.
Финальный и ключевой шаг — заставить систему частиц следовать за кораблем. Это делает метод startFollow, вызванный у системы частиц.
this.particles.startFollow(this.ship);Теперь эмиттер частиц будет постоянно находиться в той же позиции, что и спрайт корабля, создавая реалистичный эффект двигательного следа.
Практические советы по адаптации
Этот паттерн можно использовать для множества игровых элементов: траектории вражеских самолетов, движения платформ или пути, по которому игрок должен провести мяч.
* **Изменение пути:** Отредактируйте массив splineData. Вы можете визуализировать кривую для отладки, добавив ее отрисовку в сцену: this.curve.draw(graphics), где graphics — объект this.add.graphics().
* **Настройка движения:** Поэкспериментируйте с параметрами в startFollow. Уменьшите duration для более быстрого движения, измените ease на 'Linear' для постоянной скорости или уберите yoyo, чтобы движение шло только в одну сторону с мгновенным возвратом в начало.
* **Визуальные эффекты:** Попробуйте изменить параметры частиц. Например, angle: 90 создаст шлейф влево, а изменение blendMode на 'NORMAL' уберет эффект наложения. Можно создать несколько систем частиц с разными текстурами и привязать их к одному объекту для сложных эффектов.
Что попробовать дальше
Использование Curves.Spline и Follower в связке с системой частиц — мощный и лаконичный способ добавить в игру сложную анимацию движения и качественные визуальные эффекты. Для экспериментов попробуйте заставить частицы реагировать на скорость объекта (например, менять их количество) или создайте несколько независимых объектов, движущихся по одной и той же кривой с разной скоростью.