О чем этот пример
Работа с геометрическими примитивами — отличный способ быстро создавать прототипы игровых элементов, интерфейсов или визуальных эффектов. В Phaser для этого есть встроенный Game Object `Triangle`. Эта статья покажет, как создавать разноцветные и обведённые треугольники, а также анимировать их свойства с помощью твинов, превращая статичную фигуру в живой, движущийся элемент вашей сцены.
Версия 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.triangle(200, 200, 0, 148, 148, 148, 74, 0, 0x6666ff);
const r2 = this.add.triangle(400, 200, 0, 148, 148, 148, 74, 0, 0x9966ff);
r2.setStrokeStyle(4, 0xefc53f);
const r3 = this.add.triangle(600, 200, 0, 148, 148, 148, 74, 0);
r3.setStrokeStyle(2, 0x1a65ac);
const r4 = this.add.triangle(200, 400, 0, 148, 148, 148, 74, 0, 0xff6699);
const r5 = this.add.triangle(400, 400, 0, 148, 148, 148, 74, 0, 0xff33cc);
const r6 = this.add.triangle(600, 400, 0, 148, 148, 148, 74, 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.triangle(). Его сигнатура требует указания координат, точек вершин и цвета заливки.
const r1 = this.add.triangle(200, 200, 0, 148, 148, 148, 74, 0, 0x6666ff);Разберём параметры по порядку:
1. 200, 200 — координаты X и Y точки опоры (pivot point) треугольника на сцене.
2. 0, 148 — координаты X1, Y1 первой вершины относительно точки опоры.
3. 148, 148 — координаты X2, Y2 второй вершины.
4. 74, 0 — координаты X3, Y3 третьей вершины.
5. 0x6666ff — цвет заливки в шестнадцатеричном формате.
Таким образом, мы создаём треугольник с вершинами в точках (0,148), (148,148) и (74,0) относительно его центра (200,200) на сцене.
Добавление обводки (Stroke)
Phaser позволяет добавить контур к уже созданному треугольнику с помощью метода setStrokeStyle().
const r2 = this.add.triangle(400, 200, 0, 148, 148, 148, 74, 0, 0x9966ff);
r2.setStrokeStyle(4, 0xefc53f);Метод принимает два основных аргумента:
1. Толщину обводки в пикселях (в данном случае `4`).
2. Цвет обводки (0xefc53f).
Можно создать треугольник без заливки, указав только обводку. Для этого при создании пропустите параметр цвета, а затем примените setStrokeStyle.
const r3 = this.add.triangle(600, 200, 0, 148, 148, 148, 74, 0);
r3.setStrokeStyle(2, 0x1a65ac);Анимация с помощью твинов
Система твинов Phaser (this.tweens) позволяет плавно изменять свойства игровых объектов. В примере анимируются три разных свойства треугольника.
**Масштабирование:** Твин изменяет масштаб по осям X и Y, создавая эффект "пульсации".
this.tweens.add({
targets: r4,
scaleX: 0.25,
scaleY: 0.5,
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut'
});**Прозрачность:** Анимация свойства alpha делает треугольник полупрозрачным и обратно.
this.tweens.add({
targets: r5,
alpha: 0.2,
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut'
});**Вращение:** Изменение угла angle поворачивает фигуру.
this.tweens.add({
targets: r6,
angle: 90,
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut'
});Ключевые параметры твина:
- targets: объект или массив объектов для анимации.
- yoyo: true: твин будет проигрываться в обратном направлении после завершения.
- repeat: -1: анимация повторяется бесконечно.
- ease: функция плавности, определяющая характер движения.
Практическое применение в играх
Треугольники — не просто демонстрация API. Их можно использовать как:
* **Указатели и маркеры:** Острые треугольники идеальны для курсоров прицела, стрелок навигации или меток на карте. * **Прототипы рельефа:** Быстрое создание гор, холмов или пиков для фона. * **Части сложных фигур:** Комбинируя несколько треугольников, можно собирать ромбы, шестиугольники или произвольные полигоны для коллайдеров. * **Визуальные эффекты:** Анимированные треугольники могут стать частью силового поля, магического щита или области поражения.
Поскольку Triangle наследуется от Phaser.GameObjects.Shape, он обладает всеми стандартными свойствами: позиция (`x,y), масштаб (scaleX,scaleY), угол поворота (angle), видимость (visible) и глубина (depth`). Это позволяет легко интегрировать его в игровую логику.
Что попробовать дальше
Как видите, Phaser предоставляет простой и мощный инструмент для работы с треугольниками через this.add.triangle(). Комбинируя заливку, обводку и твины, вы можете создавать как статичный декор, так и динамичные интерактивные элементы. Для экспериментов попробуйте: анимировать не одну, а несколько вершин треугольника, используя пользовательские данные; создать композицию из множества треугольников для партиклового эффекта; или привязать физическое тело к форме треугольника для создания нестандартных коллайдеров.