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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    text;
    line;
    graphics;

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

        this.line = new Phaser.Geom.Line(200, 300, 600, 300);

        this.text = this.add.text(100, 50, '');
    }

    update ()
    {
        Phaser.Geom.Line.Rotate(this.line, 0.02);

        this.graphics.clear();

        this.graphics.strokeLineShape(this.line);

        const angle = Phaser.Geom.Line.Angle(this.line);

        this.text.setText(`Line Angle: ${Phaser.Math.RadToDeg(angle)}`);
    }
}

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

const game = new Phaser.Game(config);

Создание линии и её визуализация

В Phaser для работы с линиями существует отдельный класс Phaser.Geom.Line. В примере мы создаем линию и отрисовываем ее с помощью Graphics.

Сначала инициализируем объект graphics для рисования. Задаем стиль линии: толщину 4 пикселя и фиолетовый цвет.

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

Затем создаем саму линию. Конструктор Phaser.Geom.Line принимает четыре аргумента: координаты начальной (x1, y1) и конечной (x2, y2) точек. В нашем случае линия будет горизонтальной, от точки (200, 300) до (600, 300).

this.line = new Phaser.Geom.Line(200, 300, 600, 300);

Также создаем текстовый объект для вывода информации об угле. Его начальное значение — пустая строка.

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

Вращение линии и обновление кадра

Вся динамика происходит внутри метода update(), который вызывается на каждом кадре игры.

Первым делом мы вращаем линию вокруг ее центра. Метод Phaser.Geom.Line.Rotate принимает два параметра: саму линию (объект) и угол вращения в радианах. Вращение на 0.02 радиана каждый кадр создает плавную анимацию.

Phaser.Geom.Line.Rotate(this.line, 0.02);

Поскольку Graphics отрисовывает поверх предыдущих кадров, необходимо очистить холст перед новой отрисовкой.

this.graphics.clear();

После очистки мы заново рисуем нашу линию с помощью метода strokeLineShape.

this.graphics.strokeLineShape(this.line);

Вычисление и отображение угла линии

Ключевой момент — получение текущего угла наклона линии. Для этого используется статический метод Phaser.Geom.Line.Angle().

Этот метод возвращает угол в радианах между линией и положительным направлением оси X. Угол измеряется против часовой стрелки.

const angle = Phaser.Geom.Line.Angle(this.line);

Поскольку в играх и интерфейсах чаще работают с градусами, мы конвертируем радианы с помощью Phaser.Math.RadToDeg(). Полученное значение обновляем в текстовом объекте.

this.text.setText(`Line Angle: ${Phaser.Math.RadToDeg(angle)}`);

Таким образом, на экране в реальном времени отображается угол вращающейся линии в градусах.

Практическое применение: от линии к игровому объекту

Вычисленный угол — это не просто число для отображения. Его можно напрямую использовать для ориентации игровых спрайтов.

Допустим, у вас есть спрайт снаряда или стрелки. Вместо вращения геометрической линии вы можете вращать сам спрайт, используя тот же самый угол.

// Предположим, bullet — это Physics Image
const lineAngle = Phaser.Geom.Line.Angle(this.trajectoryLine);
bullet.rotation = lineAngle;

Это особенно полезно в играх с топ-даун видом, где направление движения оружия или взгляда персонажа должно совпадать с линией прицеливания, которую может задавать игрок.

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

Метод Phaser.Geom.Line.Angle() предоставляет простой и мощный способ получить ориентацию отрезка в пространстве. Это основа для множества механик: от простого вращения указателя до сложных расчетов отскоков и траекторий в физических симуляциях. **Идеи для экспериментов:** 1. Свяжите угол линии с силой и направлением выброса объекта в Arcade Physics. 2. Создайте линию между курсором мыши и центром спрайта, чтобы реализовать «прицеливание». 3. Используйте угол для расчета нормали к поверхности и моделирования реалистичного отскока мяча от наклонной платформы.