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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics({ lineStyle: { width: 2, color: 0x0000aa, alpha: 0.6 }, fillStyle: { color: 0x00aa00, alpha: 0.7 } });

        const baseRect = new Phaser.Geom.Rectangle(350, 250, 100, 100);
        const pointerRect = new Phaser.Geom.Rectangle(0, 0, 25, 25);

        const rectangles = [];

        this.input.on('pointermove', pointer =>
        {

            Phaser.Geom.Rectangle.CenterOn(pointerRect, pointer.x, pointer.y);

            redraw();

        });

        this.input.on('pointerdown', pointer =>
        {

            rectangles.push(Phaser.Geom.Rectangle.Union(baseRect, pointerRect));

            redraw();

        });

        redraw();

        function redraw ()
        {
            graphics.clear();

            graphics.fillRectShape(baseRect);

            graphics.fillRectShape(pointerRect);

            for (let i = 0; i < rectangles.length; i++)
            {
                graphics.strokeRectShape(rectangles[i]);
            }
        }
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и объявление фигур

В методе create() мы создаём графический объект graphics для отрисовки и два прямоугольника. Базовый прямоугольник baseRect фиксирован, а pointerRect будет следовать за указателем.

Обратите внимание, что pointerRect изначально создаётся с нулевыми координатами, так как его центр будет перемещаться позже. Массив rectangles будет хранить результаты всех операций объединения.

const graphics = this.add.graphics({
    lineStyle: { width: 2, color: 0x0000aa, alpha: 0.6 },
    fillStyle: { color: 0x00aa00, alpha: 0.7 }
});

const baseRect = new Phaser.Geom.Rectangle(350, 250, 100, 100);
const pointerRect = new Phaser.Geom.Rectangle(0, 0, 25, 25);

const rectangles = [];

Обработка перемещения указателя

Мы подписываемся на событие pointermove, чтобы прямоугольник pointerRect всегда был под курсором. Для этого используется статический метод Phaser.Geom.Rectangle.CenterOn(), который перемещает центр прямоугольника в заданные координаты (x, y). После каждого движения вызывается функция redraw() для обновления изображения на холсте.

this.input.on('pointermove', pointer => {
    Phaser.Geom.Rectangle.CenterOn(pointerRect, pointer.x, pointer.y);
    redraw();
});

Создание объединённого прямоугольника

По клику мыши (pointerdown) запускается ключевая операция. Метод Phaser.Geom.Rectangle.Union() принимает два прямоугольника в качестве аргументов и возвращает **новый** прямоугольник, который является минимальным по площади прямоугольником, содержащим оба исходных.

Полученная фигура добавляется в массив rectangles для последующей отрисовки, и сцена перерисовывается.

this.input.on('pointerdown', pointer => {
    rectangles.push(Phaser.Geom.Rectangle.Union(baseRect, pointerRect));
    redraw();
});

Логика отрисовки

Функция redraw() отвечает за визуализацию. Сначала она очищает холст с помощью graphics.clear(). Затем заливает оба исходных прямоугольника (baseRect и pointerRect).

Наконец, в цикле она обводит контуром (рисует границы) всех прямоугольников, которые были созданы в результате объединения и хранятся в массиве rectangles. Это позволяет видеть историю всех операций.

function redraw() {
    graphics.clear();
    graphics.fillRectShape(baseRect);
    graphics.fillRectShape(pointerRect);
    for (let i = 0; i < rectangles.length; i++) {
        graphics.strokeRectShape(rectangles[i]);
    }
}

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

Метод Union() — мощный инструмент для работы с игровым пространством. Он позволяет из простых блоков конструировать сложные области. Попробуйте поэкспериментировать: например, сохранять объединённый прямоугольник как новый базовый для создания цепочки фигур, или реализовать выделение группы объектов на карте, динамически объединяя их bounding box'ы. Это откроет дорогу к созданию продвинутых систем управления и взаимодействия.