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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    line;
    graphics;

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

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

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

        this.graphics.clear();

        this.graphics.strokeLineShape(this.line);
    }
}

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

const game = new Phaser.Game(config);

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

В классе сцены Example мы объявляем два свойства: line для хранения геометрического объекта и graphics для его визуализации.

В методе create() инициализируется графический контекст Graphics с заданным стилем линии и создается сама линия. Конструктор Phaser.Geom.Line принимает четыре аргумента: начальные координаты (x1, y1) и конечные координаты (x2, y2).

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

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

Изначально линия горизонтальна и расположена по центру экрана по вертикали. Графический объект graphics будет использоваться для отрисовки.

Вращение и отрисовка в реальном времени

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

Сначала мы применяем статический метод Phaser.Geom.Line.Rotate к нашей линии. Первый аргумент — это сам объект линии, второй — угол поворота в радианах.

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

Метод Rotate модифицирует исходный объект line, поворачивая его на 0.02 радиана вокруг его центральной точки.

Перед отрисовкой обновленной линии необходимо очистить графический буфер от старого кадра.

this.graphics.clear();

this.graphics.strokeLineShape(this.line);

Метод strokeLineShape принимает геометрический объект (в нашем случае линию) и рисует его в соответствии с установленным стилем линии.

Как работает вращение?

Метод Phaser.Geom.Line.Rotate(line, angle) вращает линию вокруг ее центральной точки. Центр вычисляется автоматически как среднее арифметическое начальной и конечной точек.

Важно понимать, что вращение накапливается. Поскольку метод update вызывается постоянно, каждые 0.02 радиана добавляются к текущему углу, создавая плавную непрерывную анимацию.

Исходные координаты линии (200, 300, 600, 300) после каждого вызова Rotate пересчитываются по формулам поворота точки относительно центра. Вся сложная математика инкапсулирована в одном вызове API.

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

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

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

const game = new Phaser.Game(config);

Ключевой параметр scene связывает игровой цикл с логикой нашего класса. После создания экземпляра Game автоматически запускаются методы create() и update() нашей сцены.

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

Вращение линии с помощью Phaser.Geom.Line.Rotate — это наглядный пример работы с геометрией в движении. Этот принцип применим к любым другим геометрическим примитивам, таким как прямоугольники (Phaser.Geom.Rectangle) или круги (Phaser.Geom.Circle). **Идеи для экспериментов:** 1. Попробуйте вращать линию не вокруг центра, а вокруг одной из ее конечных точек. Для этого сначала переместите линию так, чтобы нужная точка оказалась в начале координат (0,0), выполните поворот, а затем верните ее на место. 2. Измените скорость вращения, заменив константу 0.02 на значение, зависящее от времени (this.time.now), чтобы создать эффект ускорения или замедления. 3. Добавьте интерактивность: привяжите угол поворота к положению курсора мыши, используя this.input.activePointer.x. 4. Создайте несколько линий, вращающихся с разной скоростью, для формирования сложного паттерна.