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

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

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

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

Живой запуск

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

Исходный код

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

        graphics.lineStyle(4, 0x00ff00, 1);

        graphics.strokeRect(32, 32, 256, 256);

        graphics.fillStyle(0xff0000, 0.8);

        graphics.fillCircle(260, 260, 120);

        graphics.lineStyle(4, 0xff00ff, 1);

        graphics.strokeEllipse(400, 300, 200, 128);

        // graphics.setAlpha(0.5);
    }
}

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

const game = new Phaser.Game(config);

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

Перед тем как рисовать, нужен «холст». В Phaser этим холстом является объект Graphics. Он создается через фабрику this.add.graphics() и становится полноценным игровым объектом, который можно позиционировать, вращать и анимировать.

const graphics = this.add.graphics();

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

Настройка стилей: контур и заливка

Рисование происходит в два этапа: сначала настраивается стиль, затем вызывается команда для отрисовки фигуры. Стили для контура и заливки задаются отдельно.

Метод lineStyle определяет, как будет выглядеть обводка фигуры. Его параметры: толщина линии, цвет в формате HEX и альфа-канал (прозрачность).

graphics.lineStyle(4, 0x00ff00, 1);

Метод fillStyle работает аналогично, но для заливки внутренней области фигуры.

graphics.fillStyle(0xff0000, 0.8);

Важно: установленный стиль действует для всех последующих команд рисования, пока не будет изменен новым вызовом lineStyle или fillStyle.

Рисование фигур: от прямоугольников до эллипсов

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

Метод strokeRect рисует только контур прямоугольника. Его аргументы: X и Y координаты верхнего левого угла, ширина и высота.

graphics.strokeRect(32, 32, 256, 256);

Метод fillCircle заливает сплошным цветом круг. Аргументы: X и Y координаты центра круга и его радиус.

graphics.fillCircle(260, 260, 120);

Для более сложных форм, например, эллипса, используется strokeEllipse. Его аргументы: X и Y координаты центра, ширина по горизонтали и высота по вертикали.

graphics.lineStyle(4, 0xff00ff, 1);
graphics.strokeEllipse(400, 300, 200, 128);

Обратите внимание, как перед рисованием эллипса мы снова вызвали lineStyle, чтобы изменить цвет контура с зеленого на пурпурный.

Управление видимостью и практическое применение

Объект Graphics наследует все свойства GameObject. Это значит, с ним можно работать так же, как со спрайтом. Например, изменить его общую прозрачность.

// graphics.setAlpha(0.5);

Раскомментировав эту строку, вы сделаете всю нарисованную графику полупрозрачной. Это крайне полезно на практике: 1. **Отладка:** Визуализация невидимых зон (область поражения оружия, триггеры событий, путь ИИ). 2. **Прототипирование:** Быстрая «набросочная» графика для проверки геймплея. 3. **Динамические эффекты:** Создание вспышек, щитов, областей заклинаний, которые меняют форму и размер во время игры.

Поскольку объект живой, вы можете в любой момент очистить холст методом graphics.clear() и перерисовать фигуры с новыми параметрами в update()-цикле.

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

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