О чем этот пример
Линии — это фундаментальный графический примитив, который может быть не только статичным элементом оформления, но и динамичной частью игровой механики. В Phaser для работы с линиями существует простой и гибкий API, позволяющий создавать индикаторы здоровья, траектории выстрелов, векторные эффекты и даже простые геометрические анимации. В этой статье мы разберем, как создавать и управлять линиями, используя официальный пример из репозитория 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.image('bg', 'assets/skies/background1.png');
}
create ()
{
this.add.image(400, 300, 'bg');
const r1 = this.add.line(200, 200, 0, 0, 140, 0, 0x6666ff);
const r2 = this.add.line(400, 200, 0, 0, 140, 0, 0x9966ff);
// WebGL only
r2.setLineWidth(10, 40);
const r3 = this.add.line(600, 200, 0, 0, 140, 0, 0x1a65ac);
// WebGL only
r3.setLineWidth(1, 16);
const r4 = this.add.line(200, 400, 0, 0, 140, 0, 0xff6699);
const r5 = this.add.line(400, 400, 0, 0, 140, 0, 0xff33cc);
const r6 = this.add.line(600, 400, 0, 0, 140, 0, 0xff66ff);
this.tweens.add({
targets: r4,
scaleX: 0.25,
scaleY: 0.5,
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut'
});
this.tweens.add({
targets: r5,
alpha: 0.2,
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut'
});
this.tweens.add({
targets: r6,
angle: 90,
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut'
});
}
}
const config = {
type: Phaser.AUTO,
parent: 'phaser-example',
width: 800,
height: 600,
scene: Example
};
const game = new Phaser.Game(config);
Создание базовой линии
Для добавления линии на сцену используется метод this.add.line(). Этот метод возвращает игровой объект типа Phaser.GameObjects.Line, который можно в дальнейшем анимировать или изменять.
Давайте посмотрим на его сигнатуру и создадим первую линию. Ключевой особенностью является задание координат начала и конца относительно локальных координат самого объекта (относительно его точки позиционирования).
const r1 = this.add.line(200, 200, 0, 0, 140, 0, 0x6666ff);Первые два аргумента (200, 200) — это глобальные координаты (x, y) точки позиционирования (origin) линии на сцене. Следующие два аргумента (0, 0) задают координаты начала линии *относительно* этой точки позиционирования. Пятый и шестой аргументы (140, 0) задают координаты конца линии, также относительно точки позиционирования. Последний аргумент (0x6666ff) — это цвет линии в шестнадцатеричном формате. В данном примере создается горизонтальная линия длиной 140 пикселей, расположенная в точке (200, 200) на сцене.
Управление толщиной линии (только WebGL)
Phaser позволяет управлять толщиной линии, но важно помнить, что эта функция доступна только при использовании рендерера WebGL. Для Canvas-рендеринга толщина линии всегда равна 1 пикселю и не может быть изменена через API Phaser.
Для изменения толщины используется метод .setLineWidth(). Он принимает два параметра: толщину линии и, опционально, ширину концевых заглушек (line caps).
// WebGL only
r2.setLineWidth(10, 40);
r3.setLineWidth(1, 16);В примере для объекта r2 задается толщина в 10 пикселей и ширина концевых заглушек в 40 пикселей, что создает эффект скругленных концов. Для объекта r3 толщина остается стандартной (1 пиксель), но устанавливаются более выраженные заглушки. Если вы разрабатываете кросс-платформенный проект, обязательно предусмотрите fallback-логику на случай использования Canvas.
Анимация линий с помощью Tween
Поскольку линии являются обычными игровыми объектами (Phaser.GameObjects), их свойства можно анимировать с помощью системы Tween. В примере показаны три типа анимации: масштабирование, изменение прозрачности и вращение.
Анимация создается через this.tweens.add(), где в качестве targets передается объект линии (или массив объектов).
this.tweens.add({
targets: r4,
scaleX: 0.25,
scaleY: 0.5,
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut'
});Эта анимация применяется к линии r4. Свойства scaleX и scaleY уменьшают линию по осям. Флаги yoyo: true и repeat: -1 заставляют анимацию играть вперед-назад бесконечно. ease: 'Sine.easeInOut' задает плавную, синусоидальную функцию easing.
this.tweens.add({
targets: r5,
alpha: 0.2,
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut'
});Здесь анимируется свойство alpha (прозрачность) линии r5, заставляя ее мигать.
this.tweens.add({
targets: r6,
angle: 90,
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut'
});Эта твин-анимация вращает линию r6 на 90 градусов вокруг ее точки позиционирования, а затем обратно.
Практическое применение: от траекторий до UI
Линии в Phaser — это не просто рисунок. Их можно использовать для решения множества практических задач в игре.
* **Предсказание траектории:** Рассчитав путь снаряда или мяча, вы можете отрисовать его пунктирной линией (реализуется через настраиваемый шаблон штриховки, который, однако, требует дополнительной логики или шейдера). * **Интерфейсы:** Линии идеально подходят для рисования индикаторов здоровья, шкал загрузки, рамок и соединительных элементов в меню. * **Визуальные эффекты:** Множество анимированных линий могут создавать эффекты энергии, силовых полей или сканирования. * **Геометрические головоломки:** Линии могут быть элементами игры, которые нужно вращать или масштабировать для решения задачи.
Главное преимущество — их программная управляемость. Все параметры (начало, конец, цвет, толщина, видимость) можно менять динамически в ответ на действия игрока или логику игры.
Что попробовать дальше
Метод this.add.line() предоставляет быстрый и эффективный способ добавления векторных линий в вашу игру на Phaser. Несмотря на простоту, этот объект открывает широкие возможности для создания динамичного визуального контента и игровой логики, особенно в связке с системой твинов. Для экспериментов попробуйте: создать линию, которая следует за курсором мыши; сделать анимацию "прорисовки" линии от начала к концу, изменяя координату конечной точки; или скомбинировать несколько вращающихся линий разного цвета для создания гипнотического фонового эффекта.