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

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

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

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

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

            Phaser.Geom.Line.CenterOn(this.line, pointer.x, pointer.y);

        });
    }

    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);

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

Создадим базовую структуру сцены, где graphics отвечает за отрисовку, а line — геометрический объект, который мы будем вращать.

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(300, 300, 400, 300);
    }
}

Здесь this.add.graphics создаёт холст для рисования с заданным стилем линии. Phaser.Geom.Line определяет отрезок по начальной (300, 300) и конечной (400, 300) точкам — изначально это горизонтальная линия.

Центрирование линии по курсору мыши

Добавим интерактивности: линия будет следовать за указателем, сохраняя свою форму и ориентацию.

this.input.on('pointermove', pointer => {
    Phaser.Geom.Line.CenterOn(this.line, pointer.x, pointer.y);
});

Метод CenterOn перемещает линию так, чтобы её центр совпадал с координатами курсора. Это не изменяет длину или угол линии, а только её позицию на сцене. Обратите внимание: мы передаём сам объект this.line первым аргументом — метод модифицирует его напрямую.

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

В методе update, который вызывается каждый кадр, мы вращаем линию и перерисовываем её.

update () {
    Phaser.Geom.Line.Rotate(this.line, 0.02);
    this.graphics.clear();
    this.graphics.strokeLineShape(this.line);
}

Rotate поворачивает линию на 0.02 радиана вокруг её центра (который теперь следует за курсором). Поскольку update выполняется постоянно, линия плавно вращается. clear стирает предыдущий кадр, а strokeLineShape рисует обновлённую линию с заданным стилем.

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

Стандартная настройка Phaser Game для запуска примера.

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

const game = new Phaser.Game(config);

Здесь определяется размер холста (800x600), графический рендерер (AUTO выбирает WebGL или Canvas) и корневая сцена Example.

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

Вы научились манипулировать геометрическим объектом Line: центрировать его по точке и вращать. Попробуйте изменить скорость вращения, длину линии или привязать её не к курсору, а к спрайту. Это можно использовать для создания прицела, вращающегося щита или индикатора направления ветра.