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

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

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

Живой запуск

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

Исходный код


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

        graphics.fillStyle(0xffff00, 1);
        graphics.fillRect(100, 100, 256, 256);

        graphics.fillStyle(0xff00ff, 0.5);
        graphics.fillRect(300, 200, 256, 256);

        graphics.fillStyle(0x00ff00, 1);
        graphics.fillTriangle(200, 200, 400, 50, 500, 300);
    }
}

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

const game = new Phaser.Game(config);

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

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

const graphics = this.add.graphics();

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

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

Для рисования залитых прямоугольников используется метод fillRect(x, y, width, height). Перед его вызовом необходимо задать стиль заливки с помощью fillStyle(color, alpha).

graphics.fillStyle(0xffff00, 1);
graphics.fillRect(100, 100, 256, 256);

Здесь fillStyle(0xffff00, 1) устанавливает цвет заливки на ярко-желтый (HEX-код 0xffff00) и непрозрачность (альфа-канал) в 1 (полностью непрозрачный). Затем fillRect(100, 100, 256, 256) рисует прямоугольник, где первые два аргумента — координаты X и Y верхнего левого угла, а следующие два — его ширина и высота.

Второй прямоугольник демонстрирует работу с прозрачностью:

graphics.fillStyle(0xff00ff, 0.5);
graphics.fillRect(300, 200, 256, 256);

Цвет — пурпурный (0xff00ff), а альфа-канал 0.5 делает фигуру полупрозрачной. Прямоугольники могут перекрываться, и сквозь верхний будет виден нижний, что полезно для создания слоев или выделения областей.

Рисование треугольника

Помимо прямоугольников, Graphics умеет рисовать и более сложные примитивы, например, треугольники с помощью метода fillTriangle(x1, y1, x2, y2, x3, y3).

graphics.fillStyle(0x00ff00, 1);
graphics.fillTriangle(200, 200, 400, 50, 500, 300);

Перед рисованием снова задается стиль — в данном случае ярко-зеленый цвет (0x00ff00). Аргументы метода fillTriangle — это пары координат (X, Y) для каждой из трех вершин треугольника: точка A (200, 200), точка B (400, 50) и точка C (500, 300). Phaser самостоятельно соединит эти точки и зальет получившуюся фигуру.

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

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

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

const game = new Phaser.Game(config);

В объекте config задаются базовые параметры: width и height определяют размеры игрового холста, type отвечает за выбор рендерера (WebGL или Canvas), parent — это ID HTML-элемента, в который будет встроена игра. Самое важное — поле scene, куда передается класс нашей сцены Example. Финальная строка создает экземпляр игры с этой конфигурацией, запуская весь процесс.

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

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

  1. нарисовать несколько треугольников, чтобы собрать из них многоугольник
  2. анимировать изменение позиции или прозрачности фигур в методе update()
  3. комбинировать fillRect с методами для обводки, например, lineStyle и strokeRect