О чем этот пример
Полигоны — это мощный и гибкий инструмент для создания сложных геометрических фигур в ваших играх на 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 data = [ 0,20, 84,20, 84,0, 120,50, 84,100, 84,80, 0,80 ];
const r1 = this.add.polygon(200, 200, data, 0x6666ff);
const r2 = this.add.polygon(400, 200, data, 0x9966ff);
r2.setStrokeStyle(4, 0xefc53f);
const r3 = this.add.polygon(600, 200, data);
r3.setStrokeStyle(2, 0x1a65ac);
const r4 = this.add.polygon(200, 400, data, 0xff6699);
const r5 = this.add.polygon(400, 400, data, 0xff33cc);
const r6 = this.add.polygon(600, 400, data, 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);
Подготовка сцены и загрузка ассетов
Как и в любом проекте на Phaser, работа начинается с подготовки сцены. В методе preload мы устанавливаем базовый URL для загрузки ресурсов и загружаем фоновое изображение. Это стандартная практика, которая гарантирует, что все необходимые ассеты будут готовы к моменту создания игровых объектов.
preload ()
{
this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
this.load.image('bg', 'assets/skies/background1.png');
}В методе create мы первым делом размещаем фоновое изображение, чтобы создать визуальный контекст для наших полигонов.
Создание полигона: основа — массив точек
Ключевой элемент при создании полигона — это массив данных, описывающий его форму. Каждые два числа в массиве представляют собой координаты X и Y одной вершины относительно центра полигона.
const data = [ 0,20, 84,20, 84,0, 120,50, 84,100, 84,80, 0,80 ];Этот массив описывает фигуру, похожую на стрелку или шестиугольник со смещенной вершиной. Первый полигон создается с помощью метода this.add.polygon(x, y, data, fillColor). Первые два аргумента задают позицию центра фигуры на сцене, третий — массив данных, а четвертый — цвет заливки в шестнадцатеричном формате (например, 0x6666ff).
const r1 = this.add.polygon(200, 200, data, 0x6666ff);Настройка внешнего вида: обводка и цвет
Phaser позволяет не только заливать полигон цветом, но и добавлять контур. В примере второй полигон r2 создается с заливкой, а затем для него вызывается метод setStrokeStyle(lineWidth, strokeColor), который добавляет обводку заданной толщины и цвета.
const r2 = this.add.polygon(400, 200, data, 0x9966ff);
r2.setStrokeStyle(4, 0xefc53f);Третий полигон r3 создается без указания цвета заливки, что делает его прозрачным, но с хорошо видимой обводкой. Это полезно для создания контуров или рамок.
const r3 = this.add.polygon(600, 200, data);
r3.setStrokeStyle(2, 0x1a65ac);Динамическая анимация с помощью твинов
Настоящая магия начинается, когда статические фигуры оживают. Phaser предоставляет мощную систему твинов через this.tweens. В примере три нижних полигона (r4, r5, r6) анимируются по-разному.
Полигон r4 масштабируется по осям X и Y с эффектом "йо-йо" (возврат к исходному состоянию) и бесконечным повторением.
this.tweens.add({
targets: r4,
scaleX: 0.25,
scaleY: 0.5,
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut'
});Полигон r5 плавно изменяет свою прозрачность (alpha), создавая эффект пульсации или мерцания.
this.tweens.add({
targets: r5,
alpha: 0.2,
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut'
});Полигон r6 вращается, изменяя свой угол (angle). Это отлично подходит для создания вращающихся элементов интерфейса, стрелок или декоративных элементов.
this.tweens.add({
targets: r6,
angle: 90,
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut'
});Ключевые параметры твина: targets (объект для анимации), yoyo: true (возврат к началу), repeat: -1 (бесконечное повторение) и ease (функция плавности, определяющая характер движения).
Что попробовать дальше
Полигоны в Phaser — это не просто статические фигуры, а полноценные игровые объекты, которые можно создавать, стилизовать и анимировать. Они открывают широкие возможности для создания уникального визуального стиля: от сложных геометрических паттернов до анимированных элементов HUD. Для экспериментов попробуйте: изменить массив data, чтобы нарисовать собственную фигуру; комбинировать несколько твинов на одном объекте (например, вращение + пульсация); или использовать полигоны в качестве хитбоксов для нестандартной физической формы объекта.