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

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

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

Живой запуск

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

Исходный код


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

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

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

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

            redraw();

        });

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

            Phaser.Geom.Rectangle.MergeRect(baseRect, pointerRect);

            redraw();

        });

        redraw();

        function redraw ()
        {
            graphics.clear();

            graphics.fillRectShape(baseRect);

            graphics.strokeRectShape(pointerRect);
        }
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и создание прямоугольников

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

Базовый прямоугольник изначально располагается в центре сцены. Прямоугольник указателя будет следовать за курсором, а по клику — объединяться с базовым.

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

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

Обработка движения указателя

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

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

Объединение прямоугольников по клику

Ключевая механика реализуется в обработчике события 'pointerdown'. При клике мыши вызывается метод Phaser.Geom.Rectangle.MergeRect. Он принимает два аргумента: целевой прямоугольник (baseRect) и прямоугольник-источник (pointerRect).

Метод MergeRect изменяет размер и положение целевого прямоугольника (baseRect) таким образом, чтобы он мог полностью содержать в себе и себя прежнего, и прямоугольник-источник (pointerRect). Исходный pointerRect при этом не изменяется.

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

Функция перерисовки графики

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

Важно, что baseRect после объединения становится больше, а pointerRect продолжает следовать за курсором, что позволяет визуально оценить результат работы метода MergeRect.

function redraw ()
{
    graphics.clear();
    graphics.fillRectShape(baseRect);
    graphics.strokeRectShape(pointerRect);
}

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

Метод Phaser.Geom.Rectangle.MergeRect — это простой и мощный инструмент для работы с игровыми областями. Он идеально подходит для механик роста, слияния или создания сложных зон из простых частей. Для экспериментов попробуйте изменить исходный пример: добавьте несколько независимых базовых прямоугольников, которые будут объединяться при наведении, или используйте MergeRect для динамического расчета общей области видимости для группы объектов. Это отличная основа для систем, где игрок может расширять свою территорию или строить сложные конструкции.