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

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

Геометрические вычисления — основа для игровой механики, интерфейсов и визуальных эффектов. В этой статье мы разберем, как работать с высотой линии в Phaser, используя метод `Phaser.Geom.Line.Height()`. Вы научитесь динамически измерять вертикальный размер отрезка и визуализировать этот параметр в реальном времени, что полезно для создания редакторов уровней, коллайдеров или интерактивных инфографик.

Версия 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(0, 300, 400, 100);

        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 height = Phaser.Geom.Line.Height(line);

            graphics.lineStyle(2, 0x00aa00);
            graphics.lineBetween(2, 300, 2, 300 - height);

            text.setText(`Line Height: ${height}`);
        }
    }
}

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

const game = new Phaser.Game(config);

Что такое высота линии?

В контексте Phaser высота линии (Height) — это разница между максимальным и минимальным значением Y-координат её конечных точек. Это не длина отрезка, а именно его вертикальный «размах». Метод Phaser.Geom.Line.Height() мгновенно вычисляет это значение.

Это полезно, когда нужно определить, насколько линия «высока» относительно мировой системы координат. Например, для проверки пересечения с горизонтальными платформами или для выравнивания графических элементов.

Разбираем код примера

В примере создаётся сцена, где одна из точек линии привязана к курсору мыши, а её высота отображается численно и графически.

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

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

Здесь graphics — холст для рисования, line — отрезок с началом в (0,300) и концом (400,100), text — текстовый объект для вывода значения.

Обработка движения мыши:

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

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

Функция redraw() и вычисление высоты

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

Очистка и рисование основной линии:

graphics.clear();
graphics.strokeLineShape(line);

Вычисление высоты:

const height = Phaser.Geom.Line.Height(line);

Метод Height() принимает объект линии и возвращает число — её высоту.

Визуализация высоты:

graphics.lineStyle(2, 0x00aa00);
graphics.lineBetween(2, 300, 2, 300 - height);
text.setText(`Line Height: ${height}`);

Зелёная вертикальная линия рисуется от фиксированной точки (2,300) вверх на вычисленную высоту. Текст обновляется актуальным значением. Это наглядно демонстрирует, что высота — это проекция на ось Y.

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

Код завершается стандартной конфигурацией Phaser Game, которая задаёт размеры окна, тип рендерера и указывает класс сцены.

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

Этот блок создаёт экземпляр игры, инициализирует сцену Example и запускает весь описанный выше интерактивный пример.

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

Метод Phaser.Geom.Line.Height() предоставляет простой способ получить вертикальную проекцию отрезка. Понимание таких базовых геометрических операций открывает путь к созданию сложных интерактивных систем. Для экспериментов попробуйте привязать к курсору первую точку линии, вычислить и отрисовать также её ширину (Phaser.Geom.Line.Width()), или использовать высоту для управления скоростью падающего объекта вдоль этой линии.