Phaser.js: всё об играх и разработке

О чем этот пример

Визуальные эффекты и геометрические построения — важная часть игровой разработки. Этот пример демонстрирует, как, используя простые методы геометрического модуля Phaser, можно создавать сложные и привлекательные паттерны. Вы научитесь работать с прямоугольниками, получать их стороны в виде линий и динамически строить графику, что пригодится для создания фонов, интерфейсов или спецэффектов.

Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.

Живой запуск

Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const rect = new Phaser.Geom.Rectangle(0, 0, 800, 600);

        const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x0000aa } });

        let count = 0;
        const lines = [];

        while (rect.height > 5)
        {
            switch (count++ % 4)
            {
                case 0:
                    lines.push(rect.getLineA());
                    break;
                case 1:
                    lines.push(rect.getLineB());
                    break;
                case 2:
                    lines.push(rect.getLineC());
                    break;
                case 3:
                    lines.push(rect.getLineD());
                    break;
            }

            rect.width *= 0.95;
            rect.height *= 0.95;

            rect.centerX = 400;
            rect.centerY = 300;
        }

        for (let i = 0; i < lines.length - 1; i++)
        {
            const firstLine = lines[i];

            const secondLine = lines[i + 1];

            graphics.lineBetween(firstLine.x1, firstLine.y1, secondLine.x1, secondLine.y1);
            graphics.lineBetween(firstLine.x2, firstLine.y2, secondLine.x2, secondLine.y2);
        }
    }
}

const config = {
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Создание основы: прямоугольник и графика

Всё начинается с создания прямоугольника и объекта для рисования. Прямоугольник задаёт исходную область, а объект Graphics позволяет визуализировать линии.

const rect = new Phaser.Geom.Rectangle(0, 0, 800, 600);
const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x0000aa } });

Прямоугольник rect инициализируется в точке (0,0) с шириной 800 и высотой 600 пикселей, что соответствует размерам сцены из конфигурации. Объект graphics настраивается на рисование синих линий толщиной 2 пикселя.

Извлечение линий и трансформация прямоугольника

Ключевая часть алгоритма — циклическое получение сторон прямоугольника и его постепенное уменьшение. Каждая сторона возвращается как объект линии с координатами начала (x1, y1) и конца (x2, y2).

switch (count++ % 4)
{
    case 0:
        lines.push(rect.getLineA());
        break;
    case 1:
        lines.push(rect.getLineB());
        break;
    case 2:
        lines.push(rect.getLineC());
        break;
    case 3:
        lines.push(rect.getLineD());
        break;
}
rect.width *= 0.95;
rect.height *= 0.95;
rect.centerX = 400;
rect.centerY = 300;

Методы getLineA(), getLineB(), getLineC() и getLineD() последовательно возвращают верхнюю, правую, нижнюю и левую стороны прямоугольника. После получения линии прямоугольник уменьшается на 5% (* 0.95), а его центр сбрасывается в середину экрана, создавая эффект вложенных прямоугольников. Цикл выполняется, пока высота не станет меньше 5 пикселей.

Визуализация узора: соединение линий

Собранный массив линий используется для рисования узора. Алгоритм последовательно соединяет соответствующие точки соседних линий.

for (let i = 0; i < lines.length - 1; i++)
{
    const firstLine = lines[i];
    const secondLine = lines[i + 1];
    graphics.lineBetween(firstLine.x1, firstLine.y1, secondLine.x1, secondLine.y1);
    graphics.lineBetween(firstLine.x2, firstLine.y2, secondLine.x2, secondLine.y2);
}

Метод graphics.lineBetween() рисует отрезок между двумя точками. Код соединяет начальные (x1, y1) и конечные (x2, y2) точки каждой линии с аналогичными точками следующей линии в массиве. Это создаёт характерный "скручивающийся" паттерн, так как линии принадлежат уменьшающимся и смещающимся прямоугольникам.

Что попробовать дальше

Вы освоили мощный приём для генерации геометрического искусства, используя всего несколько вызовов API Phaser. Экспериментируйте: измените коэффициент уменьшения прямоугольника, цвет и толщину линий, порядок извлечения сторон или попробуйте соединять не соседние, а случайные линии из массива для создания более абстрактных визуальных эффектов.