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

При разработке игр часто возникает необходимость в движении объектов по прямой. Знание угла наклона этой линии позволяет не только визуализировать траекторию, но и создавать плавные, предсказуемые перемещения. На примере из официальной документации Phaser рассмотрим, как работает расчёт наклона линии (`slope`) и как его можно применить для анимации точки, движущейся от начала к концу отрезка.

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

Живой запуск

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

Исходный код


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

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

        this.line = new Phaser.Geom.Line(150, 400, 550, 450);

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

        this.position = 50;

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

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

            this.calculate();
        });

        this.calculate();
    }

    update ()
    {
        this.position += this.slope;

        this.position = Phaser.Math.Clamp(this.position, 0, 100);

        this.graphics.clear();

        this.graphics.strokeLineShape(this.line);

        const point = Phaser.Geom.Line.GetPoint(this.line, this.position / 100);

        this.graphics.fillPointShape(point, 25);
    }

    calculate ()
    {
        this.slope = Phaser.Geom.Line.Slope(this.line);

        this.text.setText(`Line Slope: ${this.slope}`);
    }
}

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

const game = new Phaser.Game(config);

Подготовка сцены и создание линии

В методе create() происходит инициализация всех необходимых объектов. Сначала создаётся объект Graphics для отрисовки. Затем создаётся геометрический объект Line с начальными координатами. Точка A линии фиксирована, а точка B будет следовать за курсором.

this.graphics = this.add.graphics({ lineStyle: { width: 4, color: 0xaa00aa }, fillStyle: { color: 0x0000aa } });
this.line = new Phaser.Geom.Line(150, 400, 550, 450);

Также создаётся текстовый объект для вывода значения наклона и устанавливается слушатель события движения указателя, который обновляет координаты второй точки линии и пересчитывает наклон.

Расчёт наклона линии (Slope)

Ключевой метод для работы с наклоном — Phaser.Geom.Line.Slope(). Наклон линии (slope) — это отношение изменения координаты Y к изменению координаты X между двумя точками (ΔY/ΔX). В контексте экрана компьютера, где ось Y направлена вниз, положительный наклон означает, что линия идёт вниз и вправо.

this.slope = Phaser.Geom.Line.Slope(this.line);

Это значение вычисляется в методе calculate(), который вызывается при создании сцены и при каждом движении мыши. Полученное число (которое может быть отрицательным, положительным или равным бесконечности для вертикальных линий) выводится на экран.

Анимация точки с использованием наклона

В методе update() реализовано движение точки вдоль линии. Переменная this.position (от 0 до 100) определяет местоположение точки на линии как процент от её длины.

this.position += this.slope;
this.position = Phaser.Math.Clamp(this.position, 0, 100);

Каждый кадр к позиции прибавляется значение наклона (this.slope). Это создаёт эффект: чем круче линия (больше абсолютное значение наклона), тем быстрее изменяется позиция. Затем позиция ограничивается диапазоном от 0 до 100.

Для отрисовки точки в вычисленной позиции используется метод Phaser.Geom.Line.GetPoint(), который возвращает координаты точки на линии, заданной в долях от 0 до 1.

const point = Phaser.Geom.Line.GetPoint(this.line, this.position / 100);
this.graphics.fillPointShape(point, 25);

Практическое применение в играх

Этот пример демонстрирует базовый принцип, который можно адаптировать для различных игровых механик: 1. **Движение снаряда:** Рассчитав наклон линии между пушкой и целью, вы можете задать начальную скорость снаряда по осям X и Y, пропорциональную этому наклону. 2. **Патрулирование по маршруту:** Задав массив точек, можно вычислять наклон для каждого отрезка пути и плавно перемещать врага от одной точки к другой. 3. **Предсказание траектории:** В стратегиях или играх с физикой можно визуализировать расчётную траекторию движения объекта (например, шара) перед его запуском.

Важно помнить, что slope — это тангенс угла наклона. Для непосредственного задания скорости через компоненты вектора (velocity.x, velocity.y) чаще используется нормализация вектора направления.

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

Расчёт наклона линии в Phaser — это мощный и простой инструмент для работы с направленным движением. Он открывает возможности для создания интерактивной визуализации, плавных анимаций и расчёта траекторий. Для экспериментов попробуйте зафиксировать линию и менять скорость прибавления значения к this.position или используйте slope для управления скоростью спрайта, а не просто позицией точки на графике.