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

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

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

Живой запуск

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

Исходный код


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

        graphics.fillStyle(0x00ff00);
        graphics.fillRect(100, 100, 256, 256);

        graphics.fillGradientStyle(0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 1);
        graphics.fillRect(350, 300, 256, 256);
    }
}

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

const game = new Phaser.Game(config);

Создание контекста для рисования: объект Graphics

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

Создается он через фабричный метод this.add.graphics(). Этот метод доступен внутри любого объекта Scene (сцены). Полученный объект автоматически добавляется на текущую сцену и в список отрисовки.

var graphics = this.add.graphics();

Теперь в переменной graphics находится наш инструмент для рисования. Все последующие операции (установка стилей, рисование фигур) будут применяться к этому объекту.

Рисование простого залитого прямоугольника

Перед тем как нарисовать фигуру, нужно задать стиль заливки с помощью метода fillStyle(). Этот метод определяет цвет и прозрачность (альфа-канал) для внутренней области будущих фигур.

graphics.fillStyle(0x00ff00);

Здесь 0x00ff00 — это шестнадцатеричный код цвета (ярко-зеленый). Второй, необязательный параметр — значение альфа-канала от 0 до 1 (по умолчанию 1, то есть полностью непрозрачный).

После установки стиля можно рисовать саму фигуру. Метод fillRect(x, y, width, height) рисует прямоугольник, залитый текущим стилем.

graphics.fillRect(100, 100, 256, 256);

Параметры метода: * `x,y` (100, 100) — координаты левого верхнего угла прямоугольника на холсте сцены. * width, height (256, 256) — ширина и высота прямоугольника в пикселях.

В итоге на сцене появится зеленый квадрат.

Создание прямоугольника с градиентной заливкой

Phaser позволяет создавать более сложные визуальные эффекты, например, градиенты. Для этого используется метод fillGradientStyle(). Он заменяет простой цветной стиль на градиентный.

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

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

Градиент рассчитывается автоматически, интерполируя цвета между этими четырьмя угловыми точками.

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

graphics.fillRect(350, 300, 256, 256);

На сцене появится второй квадрат, расположенный по координатам (350, 300), с плавным переходом цветов от красного и зеленого вверху к синему и желтому внизу.

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

Чтобы пример заработал, необходимо создать конфигурационный объект для игры и инициализировать экземпляр Phaser.Game. В конфигурации мы указываем базовые настройки и передаем класс нашей сцены.

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

const game = new Phaser.Game(config);

Ключевые параметры конфига: * width, height: Размеры игрового холста. * type: Рендерер. Phaser.WEBGL обеспечивает высокую производительность и поддержку большего количества визуальных эффектов по сравнению с Phaser.CANVAS. * parent: ID HTML-элемента, в который будет встроен canvas игры. Если элемента с таким ID нет, canvas будет добавлен в тело документа. * scene: Класс или конфигурация сцены, которая будет запущена сразу после инициализации игры. В нашем случае это класс Example, описанный выше.

Создание экземпляра new Phaser.Game(config) запускает весь жизненный цикл фреймворка.

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

Объект Graphics в Phaser — это ваш швейцарский нож для программируемой графики. Освоив рисование примитивов и работу с градиентами, вы сможете быстро визуализировать идеи, создавать динамические элементы интерфейса и сложные эффекты прямо в коде. Для экспериментов попробуйте: 1. Изменить координаты и размеры прямоугольников, чтобы расположить их в разных частях экрана. 2. Поиграть с альфа-каналом (последним аргументом fillStyle и fillGradientStyle), чтобы создавать полупрозрачные объекты. 3. Нарисовать несколько фигур подряд с разными стилями, вызывая fillStyle и fillRect несколько раз. 4. Создать анимацию, изменяя параметры прямоугольника (например, ширину) в методе update() сцены.