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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics({ lineStyle: { color: 0xaa00aa } });

        const line = new Phaser.Geom.Line(0, 10, 10, 0);

        graphics.strokeLineShape(line);

        for (let i = 0; i < 60; i++)
        {
            line.setTo(line.x1 + 8, line.y1 + 15, line.x2 + 15, line.y2 + 6);

            graphics.strokeLineShape(line);
        }
    }
}

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

const game = new Phaser.Game(config);

Создание сцены и базовой геометрии

Вся работа начинается в методе create() сцены. Первым делом мы создаем объект Graphics, который отвечает за примитивное рисование. Мы сразу задаем ему стиль линии — цвет.

Затем создается объект линии (Phaser.Geom.Line). Его начальные координаты задаются в конструкторе: первая точка (x1, y1) и вторая точка (x2, y2). Сразу после создания мы отрисовываем эту линию на холсте.

const graphics = this.add.graphics({ lineStyle: { color: 0xaa00aa } });
const line = new Phaser.Geom.Line(0, 10, 10, 0);
graphics.strokeLineShape(line);

Магия метода `setTo()`

Ключевой элемент примера — метод line.setTo(). Он не создает новую линию, а переопределяет координаты существующего объекта. Это очень эффективно с точки зрения производительности, так как не требует выделения новой памяти.

Метод принимает четыре аргумента: новые значения для x1, y1, x2 и y2. В нашем цикле мы на каждой итерации вычисляем новые координаты, прибавляя к старым определенные числа.

line.setTo(line.x1 + 8, line.y1 + 15, line.x2 + 15, line.y2 + 6);

Цикл отрисовки и визуальный результат

Чтобы увидеть движение линии, мы помещаем вызов setTo() и последующую отрисовку в цикл на 60 итераций. На каждом шаге линия "перепрыгивает" на новую позицию, а graphics.strokeLineShape(line) рисует ее в этом месте. Так как объект Graphics не очищается, все 60 позиций линии остаются на экране, формируя красивый геометрический узор.

Именно последовательность отрисованных состояний одной и той же линии создает итоговый паттерн.

for (let i = 0; i < 60; i++)
{
    line.setTo(line.x1 + 8, line.y1 + 15, line.x2 + 15, line.y2 + 6);
    graphics.strokeLineShape(line);
}

Почему это работает и где применять

Код демонстрирует чистую работу с геометрией, отделенной от логики рендеринга. Объект Line — это просто данные (координаты). Объект Graphics использует эти данные для рисования. Такой подход дает гибкость: одну и ту же линию можно передавать в физический движок для расчетов коллизий или использовать ее для вычисления точек спавна объектов.

Использование setTo() вместо создания новых объектов в цикле (new Phaser.Geom.Line(...)) — это пример оптимизации, критически важной для игр, где такие операции выполняются десятки раз за кадр.

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

Метод setTo() — это простой и мощный инструмент для управления геометрическими объектами в реальном времени. Попробуйте изменить приращения координат в цикле, чтобы получить спирали, волны или хаотичные узоры. Экспериментируйте с цветом и толщиной линии внутри цикла, чтобы создавать градиентные эффекты. Этот принцип можно перенести на другие объекты, например, динамически менять положение прямоугольника (Phaser.Geom.Rectangle.setPosition()) для визуализации зоны поражения.