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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics({ fillStyle: { color: 0x0000aa } });

        const rect = new Phaser.Geom.Rectangle(400, 300, 1, 1);

        let angle = 0;
        let radius = 1;

        for (let i = 0; i < 73; i++)
        {
            rect.setSize(rect.width + 1);

            const spiralX = 400 + Math.cos(angle) * radius;
            const spiralY = 300 + Math.sin(angle) * radius;

            Phaser.Geom.Rectangle.CenterOn(rect, spiralX, spiralY);

            graphics.fillRectShape(rect);

            radius += 4;
            angle += rect.width / radius;
        }
    }
}

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

const game = new Phaser.Game(config);

Основная идея примера

Код создает спиральный узор из 73 прямоугольников. Каждый следующий прямоугольник немного больше предыдущего, а его центр позиционируется по точкам, рассчитанным по формуле спирали. Для отрисовки используется графический контекст (Graphics).

Ключевые элементы: - Phaser.Geom.Rectangle — объект для работы с прямоугольником. - CenterOn() — метод, перемещающий центр прямоугольника в заданные координаты. - graphics.fillRectShape() — отрисовка залитого прямоугольника.

Инициализация сцены и объектов

В методе create() сцены мы создаем графический объект и начальный прямоугольник. Изначально прямоугольник имеет размер 1x1 пиксель.

const graphics = this.add.graphics({ fillStyle: { color: 0x0000aa } });
const rect = new Phaser.Geom.Rectangle(400, 300, 1, 1);

Также объявляются переменные angle (угол) и radius (радиус) для расчета спирали. Начальная точка спирали (400, 300) — это центр холста.

Цикл построения спирали

Цикл выполняется 73 раза. На каждой итерации: 1. Размер прямоугольника увеличивается на 1 пиксель по ширине и высоте. 2. Рассчитываются координаты следующей точки на спирали. 3. Центр прямоугольника перемещается в эту точку. 4. Прямоугольник отрисовывается. 5. Обновляются параметры спирали.

rect.setSize(rect.width + 1);
const spiralX = 400 + Math.cos(angle) * radius;
const spiralY = 300 + Math.sin(angle) * radius;
Phaser.Geom.Rectangle.CenterOn(rect, spiralX, spiralY);
graphics.fillRectShape(rect);
radius += 4;
angle += rect.width / radius;

Метод setSize() изменяет ширину и высоту прямоугольника, сохраняя его текущую позицию (левый верхний угол). CenterOn() пересчитывает позицию прямоугольника так, чтобы его центр совпал с (spiralX, spiralY). Приращение угла rect.width / radius обеспечивает плавное закручивание спирали.

Как работает метод CenterOn

Метод Phaser.Geom.Rectangle.CenterOn(rect, x, y) — это статический метод класса. Он принимает объект прямоугольника и целевые координаты, затем изменяет свойства rect.x и rect.y так, чтобы центр фигуры оказался в указанной точке. Это удобная альтернатива ручному расчету позиции.

// Вместо этого:
// rect.x = targetX - rect.width / 2;
// rect.y = targetY - rect.height / 2;
// Используйте это:
Phaser.Geom.Rectangle.CenterOn(rect, targetX, targetY);

Метод модифицирует переданный объект rect напрямую.

Конфигурация игры

Стандартная конфигурация для создания экземпляра игры Phaser 3. Указывается размер холста, тип рендерера и класс сцены.

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

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

Пример наглядно показывает силу комбинации простых геометрических операций: изменение размера и точное позиционирование центра фигуры позволяют создавать сложные паттерны. Для экспериментов попробуйте изменить цвет, форму (например, использовать Phaser.Geom.Circle), шаг увеличения радиуса или зависимость угла от размера фигуры. Это можно использовать для создания эффектов "радара", визуализации роста или абстрактных фонов.