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

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

Визуальное разнообразие — ключ к удержанию внимания игрока. Часто простые геометрические фигуры выглядят скучно и технично. В Phaser 3 Graphics API есть мощный, но малоизвестный метод `lineGradientStyle()`, который позволяет рисовать линии с плавным цветовым переходом. Это простой способ добавить динамики статичным интерфейсам, силовым полям, лазерным лучам или траекториям полёта без использования тяжёлых текстур или шейдеров.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics();

        graphics.lineGradientStyle(128, 0xff0000, 0xff0000, 0x0000ff, 0x0000ff, 1);

        graphics.lineBetween(100, 100, 600, 500);
    }
}

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

const game = new Phaser.Game(config);

Создание объекта Graphics

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

const graphics = this.add.graphics();

Эта строка в методе create() создаёт новый объект Graphics и добавляет его на сцену. Объект хранится в переменной graphics, через которую мы будем вызывать все методы рисования.

Настройка стиля градиентной линии

Сердце нашего примера — метод lineGradientStyle(). Он определяет, как будет выглядеть последующая линия. Важно настроить стиль *перед* командой рисования линии.

graphics.lineGradientStyle(128, 0xff0000, 0xff0000, 0x0000ff, 0x0000ff, 1);

Разберём его параметры по порядку: 1. 128 — Толщина линии в пикселях. 2. 0xff0000 — Цвет градиента в начальной точке (в формате HEX, здесь — красный). 3. 0xff0000 — Цвет градиента в начальной точке для альфа-канала (обычно совпадает с основным цветом). 4. 0x0000ff — Цвет градиента в конечной точке (синий). 5. 0x0000ff — Цвет градиента в конечной точке для альфа-канала. 6. `1` — Альфа (прозрачность) всей линии от 0 до 1. Градиент автоматически рассчитывается между начальной и конечной точками линии, которую мы нарисуем следующей.

Рисование линии

После настройки стиля мы рисуем саму линию с помощью метода lineBetween(). Он принимает координаты начальной и конечной точек на холсте игры.

graphics.lineBetween(100, 100, 600, 500);

Параметры метода: - 100, 100 — координаты X и Y начальной точки. - 600, 500 — координаты X и Y конечной точки. Phaser возьмёт установленный ранее градиентный стиль и нарисует линию толщиной 128 пикселя, цвет которой плавно перейдёт от красного в начальной точке к синему в конечной.

Конфигурация игры

Код сцены должен быть запущен в рамках игрового экземпляра Phaser. Для этого определяется конфигурационный объект.

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

const game = new Phaser.Game(config);

Ключевой момент здесь — type: Phaser.WEBGL. Градиенты для линий и некоторые другие эффекты Graphics работают только в контексте WebGL. Если указать Phaser.CANVAS, градиент отрисуется не будет. Параметр parent указывает ID HTML-элемента, в который будет встроен canvas игры.

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

Метод lineGradientStyle() — это лаконичный и производительный инструмент для создания визуально привлекательных линий. Для экспериментов попробуйте анимировать градиент, меняя цвета или позиции точек во времени в методе update(). Можно рисовать не одну линию, а целые узоры или контуры сложных фигур, создавая эффекты энергетических щитов, неоновых надписей или цветных траекторий для врагов.