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

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

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

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

Живой запуск

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

Исходный код

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

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

        graphics.fillStyle(0xff0000, 0.5);
        graphics.fillRect(250, 200, 400, 256);
    }
}

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 и сразу добавляет его на сцену. Этот объект будет использоваться для всех последующих операций заливки и обводки.

Задаем цвет и прозрачность заливки

Перед тем как рисовать фигуру, необходимо задать стиль заливки. Для этого используется метод fillStyle. Он определяет, каким цветом и с какой прозрачностью будет заполнена внутренняя область фигуры.

graphics.fillStyle(0x00ff00, 1);

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

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

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

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

Метод принимает четыре аргумента: координаты `xиyверхнего левого угла прямоугольника, а затем егоширинуивысоту`. В данном примере рисуется зеленый квадрат со стороной 256 пикселя, отстоящий от левого и верхнего края сцены на 100 пикселей.

Наложение фигур с разной прозрачностью

Сила объекта Graphics в том, что можно последовательно рисовать множество фигур с разными стилями. Каждый новый вызов fillStyle меняет стиль для всех последующих команд рисования.

graphics.fillStyle(0xff0000, 0.5);
graphics.fillRect(250, 200, 400, 256);

Здесь мы сначала меняем цвет заливки на красный (0xff0000) с полупрозрачностью (0.5). Затем рисуем новый прямоугольник, который частично перекроет первый. Благодаря прозрачности, в области пересечения будет виден смешанный цвет, что полезно для визуализации перекрывающихся зон.

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

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

const config = {
    width: 800,
    height: 600,
    type: Phaser.WEBGL, // Используется WebGL-рендерер
    parent: 'phaser-example', // ID контейнера в DOM
    scene: Example // Главный класс сцены
};

const game = new Phaser.Game(config);

Класс сцены Example (показан в полном исходнике) содержит метод create, в котором и выполняется весь код рисования. Инициализация игры через new Phaser.Game(config) запускает весь процесс.

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

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