О чем этот пример
Работа с геометрическими фигурами — основа визуализации в играх. В Phaser класс Rectangle предоставляет мощный инструмент для создания прямоугольных объектов, которые можно заливать цветом, обводить контуром и анимировать. Эта статья покажет, как создавать статические и анимированные прямоугольники, что полезно для прототипирования интерфейсов, создания фоновых элементов и визуальных эффектов без использования текстур.
Версия 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.rectangle(200, 200, 148, 148, 0x6666ff);
const r2 = this.add.rectangle(400, 200, 148, 148, 0x9966ff);
r2.setStrokeStyle(4, 0xefc53f);
const r3 = this.add.rectangle(600, 200, 148, 148);
r3.setStrokeStyle(2, 0x1a65ac);
const r4 = this.add.rectangle(200, 400, 148, 148, 0xff6699);
const r5 = this.add.rectangle(400, 400, 148, 148, 0xff33cc);
const r6 = this.add.rectangle(600, 400, 148, 148, 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 прямоугольник создаётся методом this.add.rectangle(). Этот метод принимает ключевые параметры для позиционирования и стилизации.
const r1 = this.add.rectangle(200, 200, 148, 148, 0x6666ff);Параметры метода идут в таком порядке: координата X, координата Y, ширина, высота и цвет заливки в шестнадцатеричном формате. Цвет — это число, где 0x указывает на шестнадцатеричную систему. В примере r1 создаётся в точке (200, 200) с синей заливкой.
Добавление контура (обводки)
Прямоугольник может быть не только залитым, но и с контуром. Для этого используется метод setStrokeStyle().
r2.setStrokeStyle(4, 0xefc53f);Метод принимает два аргумента: толщину линии в пикселях и цвет контура. В примере для r2 задаётся золотистая обводка толщиной 4 пикселя. Можно создать прямоугольник вообще без заливки, указав только контур. Для этого при создании просто не передавайте цвет заливки (пятый параметр), как сделано с r3, а затем примените setStrokeStyle().
const r3 = this.add.rectangle(600, 200, 148, 148);
r3.setStrokeStyle(2, 0x1a65ac);Анимация через Tween-объекты
Phaser предоставляет мощную систему анимаций — Tweens. С её помощью можно плавно изменять свойства игровых объектов, включая прямоугольники.
this.tweens.add({
targets: r4,
scaleX: 0.25,
scaleY: 0.5,
yoyo: true,
repeat: -1,
ease: 'Sine.easeInOut'
});В этом твине:
- targets — объект или массив объектов для анимации.
- scaleX и scaleY — целевые значения масштаба по осям.
- yoyo: true — заставляет анимацию проигрываться в обратном порядке после завершения.
- repeat: -1 — устанавливает бесконечное повторение.
- ease: 'Sine.easeInOut' — функция плавности, которая делает начало и конец анимации более мягкими.
Разные типы анимаций
Tween-система позволяет анимировать множество свойств. Рассмотрим анимацию прозрачности и поворота из исходного кода.
// Анимация прозрачности (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'
});Свойство alpha меняет прозрачность от 1 (полностью непрозрачный) до 0 (полностью прозрачный). Свойство angle задаёт угол поворота в градусах. Использование одинаковых параметров yoyo, repeat и ease для всех твинов создаёт гармоничный набор циклических анимаций.
Порядок отрисовки и контекст
Важно помнить, что порядок создания объектов определяет их слой (z-index). Объекты, созданные позже, отображаются поверх ранее созданных. В примере сначала добавляется фон (this.add.image), а затем все прямоугольники — они будут поверх фона.
Прямоугольники, как и другие игровые объекты Phaser, наследуют общие свойства, которые можно менять динамически:
// Изменение позиции после создания
r1.x = 250;
r1.y = 250;
// Изменение цвета заливки
r1.fillColor = 0xff0000;
// Изменение видимости
r1.visible = false;Эти свойства также можно анимировать через Tweens, что открывает широкие возможности для интерактивности.
Что попробовать дальше
Прямоугольники в Phaser — это простые, но невероятно гибкие строительные блоки. Вы научились создавать их, стилизовать и оживлять с помощью твинов. Для экспериментов попробуйте: создать сетку из прямоугольников и анимировать их по очереди, изменить свойство origin для вращения вокруг другой точки, комбинировать несколько анимаций (например, scale и alpha) в одном твине или использовать прямоугольники в качестве кнопок, меняя цвет по наведению курсора.