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

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

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

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

Живой запуск

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

Исходный код

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

        graphics.fillGradientStyle(0xff0000, 0xff0000, 0x0000ff, 0x0000ff, 1);

        graphics.fillCircle(300, 300, 200);

        graphics.fillGradientStyle(0xff0000, 0xff0000, 0xffff00, 0xffff00, 1);

        graphics.fillCircle(500, 300, 140);
    }
}

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

const game = new Phaser.Game(config);

Создание контекста для рисования

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

const graphics = this.add.graphics();

Метод this.add.graphics() создает и добавляет на сцену новый объект Graphics. Теперь через переменную graphics мы можем управлять его стилями и рисовать фигуры. Этот объект автоматически становится частью игрового мира и будет отрендерен.

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

Перед рисованием фигуры необходимо задать стиль ее заливки. Для создания градиента используется метод fillGradientStyle().

graphics.fillGradientStyle(0xff0000, 0xff0000, 0x0000ff, 0x0000ff, 1);

Метод принимает пять аргументов: 1. topLeft (0xff0000): Цвет градиента в верхнем левом углу фигуры (в данном случае — красный). 2. topRight (0xff0000): Цвет в верхнем правом углу (также красный). 3. bottomLeft (0x0000ff): Цвет в нижнем левом углу (синий). 4. bottomRight (0x0000ff): Цвет в нижнем правом углу (также синий). 5. alpha (1): Значение прозрачности от 0 (полностью прозрачно) до 1 (полностью непрозрачно).

Поскольку верхние и нижние пары цветов одинаковы, мы создаем вертикальный градиент от красного к синему. Если бы совпадали левые и правые пары, градиент был бы горизонтальным.

Рисование фигуры с заливкой

После настройки стиля можно рисовать саму фигуру. Для создания круга используется метод fillCircle().

graphics.fillCircle(300, 300, 200);

Метод принимает три аргумента: 1. `x` (300): Координата X центра круга на холсте. 2. `y` (300): Координата Y центра круга. 3. radius (200): Радиус круга в пикселях.

Фигура будет немедленно нарисована на холсте graphics с использованием ранее заданного градиентного стиля.

Изменение стиля "на лету"

Один объект Graphics может содержать множество фигур с разными стилями. Чтобы нарисовать новую фигуру с другим стилем, нужно просто снова вызвать метод fillGradientStyle() с новыми параметрами.

graphics.fillGradientStyle(0xff0000, 0xff0000, 0xffff00, 0xffff00, 1);
graphics.fillCircle(500, 300, 140);

В этом примере мы меняем градиент на вертикальный переход от красного к желтому (0xffff00) и рисуем второй круг с центром в точке (500, 300) и радиусом 140 пикселей. Обе фигуры будут отрисованы в рамках одного объекта Graphics.

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

Объект Graphics в Phaser 3 предоставляет гибкий API для программного рисования. Вы можете использовать его для создания динамических индикаторов здоровья, радиолокационных карт, областей поражения заклинаний или простых геометрических фонов. Для экспериментов попробуйте: 1. Создать горизонтальный градиент, задав одинаковые цвета для topLeft/bottomLeft и topRight/bottomRight. 2. Анимировать цвет градиента или позицию фигур в функции update(), чтобы создать пульсирующий эффект. 3. Нарисовать не круг, а другие примитивы, например fillRect() или fillTriangle(), чтобы увидеть, как градиент применяется к разным формам.