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

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

По умолчанию примитив `Line` в Phaser рисуется толщиной в 1 пиксель, что сильно ограничивает его применение для визуальных эффектов или UI. В этой статье мы разберем, как с помощью одного метода `setLineWidth()` превратить тонкую черту в полноценную прямоугольную полосу с гибко настраиваемой геометрией. Этот прием полезен для рисования динамических шкал, индикаторов, лучей, границ или любых других элементов, где нужна линия переменной толщины.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{

    create ()
    {
        const line = this.add.line(400, 300, 0, 0, 256, 0, 0xff0000);

        line.setLineWidth(32, 64);
    }

}

const config = {
    type: Phaser.CANVAS,
    // type: Phaser.WEBGL,
    width: 800,
    height: 600,
    backgroundColor: '#2d2d2d',
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Создание базовой линии

Класс Phaser.GameObjects.Line позволяет нарисовать отрезок между двумя точками. В конструкторе мы указываем координаты центра линии, начальную и конечную точки относительно этого центра, а также цвет.

const line = this.add.line(400, 300, 0, 0, 256, 0, 0xff0000);

В этом примере мы создаем линию с центром в точке (400, 300). Относительно центра линия начинается в (0, 0) и заканчивается в (256, 0). То есть это горизонтальный красный отрезок длиной 256 пикселей. По умолчанию его толщина будет составлять 1 пиксель.

Метод setLineWidth()

Ключевой метод для управления толщиной — setLineWidth(startWidth, endWidth). Он принимает два аргумента, что делает линию не просто толстой, а позволяет создать трапециевидную полосу с линейным градиентом толщины.

line.setLineWidth(32, 64);

- startWidth: 32 — задает толщину линии (в пикселях) в ее начальной точке (0, 0). - endWidth: 64 — задает толщину линии в ее конечной точке (256, 0). В результате мы получаем не линию, а прямоугольную трапецию: один ее конец шириной 32 пикселя, другой — 64 пикселя. Толщина плавно интерполируется между этими значениями по всей длине отрезка.

Как это работает внутри

При вызове setLineWidth() Phaser перестает использовать примитив отрисовки линии графического API. Вместо этого он строит полигон (геометрическую фигуру) на основе четырех точек: двух исходных концов линии и двух расчетных, смещенных на половину заданной толщины по нормали к направлению линии. Для Canvas и WebGL рендерера этот полигон затем заливается сплошным цветом или текстурой. Именно поэтому мы видим не контур, а полноценную залитую фигуру.

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

Практическое применение и примеры

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

**Статическая полоса (интерфейс):**

// Простая полоса постоянной толщины
healthBar.setLineWidth(20, 20);

**Клиновидный луч или эффект:**

// Луч, который расширяется от источника
laserBeam.setLineWidth(5, 60);

**Динамическая шкала загрузки:**

// Длина линии меняется, толщина постоянна
loadingLine.setTo(0, 0, progress * 300, 0);
loadingLine.setLineWidth(16, 16);

**Искривление с помощью множества линий:** Комбинируя короткие линии с разной толщиной, можно имитировать плавные изогнутые формы, что может быть проще, чем работа с кривыми Безье для простых задач.

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

Метод setLineWidth() превращает простой примитив Line в мощный инструмент для создания разнообразных геометрических форм — от UI-элементов до визуальных эффектов. Главное преимущество — производительность, так как это все еще один графический объект. Для экспериментов попробуйте: анимировать толщину для пульсирующего эффекта, вращать линию с изменяющейся толщиной для создания «лопастей», или комбинировать несколько таких линий разного цвета для рисования сложных стрелок и указателей.