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

В играх часто требуется вычислять геометрические свойства объектов: расстояние, углы, размеры. Phaser предоставляет набор статических методов в классе `Phaser.Geom.Line` для работы с линиями. В этой статье мы разберем, как быстро получить ширину линии (`Line.Width`) и визуализировать этот параметр в реальном времени, реагируя на движения мыши. Этот прием полезен для редакторов уровней, инструментов отладки коллизий или любых систем, где нужно анализировать форму и протяженность объектов.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    create ()
    {

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

        const line = new Phaser.Geom.Line(400, 0, 430, 400);

        const text = this.add.text(50, 50, '');

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

            line.x2 = pointer.x;
            line.y2 = pointer.y;

            redraw();
        });

        redraw();

        function redraw ()
        {
            graphics.clear();

            graphics.strokeLineShape(line);

            const width = Phaser.Geom.Line.Width(line);

            graphics.lineStyle(2, 0x00aa00);
            graphics.lineBetween(400, 2, 400 + width, 2);

            text.setText(`Line Width: ${width}`);
        }
    }
}

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

const game = new Phaser.Game(config);

Создание сцены и базовых объектов

В методе create() сцены мы создаем три ключевых объекта: графический контекст для рисования, экземпляр геометрической линии и текстовое поле для вывода информации.

const graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaa00aa } });
const line = new Phaser.Geom.Line(400, 0, 430, 400);
const text = this.add.text(50, 50, '');

Графика (graphics) настроена на рисование линий толщиной 4 пикселя пурпурным цветом. Линия (line) задана начальной точкой (400, 0) и конечной (430, 400). Текст (text) изначально пустой, его позиция — (50, 50).

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

Чтобы линия была интерактивной, мы подписываемся на событие pointermove. При каждом движении мыши обновляются координаты x2 и y2 линии, после чего вызывается функция redraw() для обновления изображения на холсте.

this.input.on('pointermove', pointer => {
    line.x2 = pointer.x;
    line.y2 = pointer.y;
    redraw();
});

Функция redraw() выполняет всю работу по очистке старого кадра, отрисовке обновленной линии, вычислению её ширины и отображению результата.

Функция redraw: визуализация и вычисления

Внутри redraw() происходит несколько важных действий. Сначала мы очищаем графический слой от предыдущих отрисовок.

graphics.clear();

Затем рисуем текущую линию с помощью strokeLineShape, используя изначально заданный стиль.

graphics.strokeLineShape(line);

Теперь ключевой момент — вычисление ширины линии. Мы используем статический метод Phaser.Geom.Line.Width, передавая ему нашу линию. Этот метод возвращает абсолютную разницу между координатами x1 и x2.

const width = Phaser.Geom.Line.Width(line);

Чтобы наглядно показать результат, мы меняем стиль графики на зеленый и рисуем небольшую горизонтальную линию, длина которой в точности равна вычисленной ширине.

graphics.lineStyle(2, 0x00aa00);
graphics.lineBetween(400, 2, 400 + width, 2);

Наконец, обновляем текстовое поле, выводя полученное числовое значение.

text.setText(`Line Width: ${width}`);

Конфигурация и запуск игры

Как и в любом проекте Phaser, нам нужна базовая конфигурация игры и её экземпляр. В конфиге мы указываем размеры холста, тип рендерера, родительский элемент в DOM и нашу сцену Example.

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

const game = new Phaser.Game(config);

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

Метод Phaser.Geom.Line.Width — простой, но мощный инструмент для получения горизонтального размера линии. В сочетании с интерактивным вводом это позволяет быстро создавать прототипы геометрических инструментов. Для экспериментов попробуйте заменить Line.Width на Line.Height или Line.Length, чтобы визуализировать другие свойства. Можно также вычислить угол наклона линии через Line.Angle и использовать его для поворота спрайта, создав прицел или указатель направления.