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

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

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

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

Живой запуск

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

Исходный код

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

        graphics.lineStyle(20, 0x2ECC40);

        graphics.strokeRect(50, 50, 100, 40);

        graphics.strokeCircle(600, 400, 64);

        graphics.beginPath();

        graphics.moveTo(400, 100);
        graphics.lineTo(200, 278);
        graphics.lineTo(340, 430);
        graphics.lineTo(650, 80);

        graphics.closePath();
        graphics.strokePath();
    }
}

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

const game = new Phaser.Game(config);

Создание и настройка контекста Graphics

Перед началом рисования необходимо создать объект Graphics и задать стиль линий, которыми будут обводиться фигуры. Основной метод для этого — lineStyle().

const graphics = this.add.graphics();
graphics.lineStyle(20, 0x2ECC40);

В этом примере создается объект graphics. Метод lineStyle принимает два основных аргумента: толщину линии (в пикселях) и ее цвет в шестнадцатеричном формате. Здесь задана довольно толстая линия в 20 пикселей зеленого цвета. Этот стиль будет применяться ко всем последующим операциям рисования, пока не будет изменен.

Рисование стандартных фигур

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

graphics.strokeRect(50, 50, 100, 40);
graphics.strokeCircle(600, 400, 64);

Метод strokeRect рисует контур прямоугольника. Его аргументы: координаты X и Y верхнего левого угла, ширина и высота. Метод strokeCircle рисует контур окружности, принимая координаты центра (X, Y) и радиус. Обратите внимание: обводка рисуется наружу от математического контура фигуры, поэтому визуальные размеры объекта будут больше заданных на половину толщины линии с каждой стороны.

Рисование произвольных путей

Для создания сложных многоугольников или ломаных линий используется работа с путем (path). Это последовательность команд, которая определяет форму.

graphics.beginPath();
graphics.moveTo(400, 100);
graphics.lineTo(200, 278);
graphics.lineTo(340, 430);
graphics.lineTo(650, 80);
graphics.closePath();
graphics.strokePath();

Процесс состоит из нескольких шагов: 1. beginPath() — начинает определение нового пути. 2. moveTo(x, y) — перемещает «перо» в начальную точку без рисования. 3. lineTo(x, y) — рисует линию от текущей позиции к указанным координатам. 4. closePath() — автоматически рисует линию от последней точки обратно к первой, замыкая контур. 5. strokePath() — выполняет отрисовку обводки для всего описанного пути, используя текущий lineStyle.

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

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

const config = {
    width: 800,
    height: 600,
    type: Phaser.WEBGL,
    backgroundColor: '#118eb3',
    parent: 'phaser-example',
    scene: Example
};
const game = new Phaser.Game(config);

В этом конфиге задается размер холста 800x600, используется рендерер WEBGL для лучшей производительности, устанавливается синий фон и указывается HTML-элемент (parent), внутрь которого будет встроен canvas. Создание экземпляра Phaser.Game с этой конфигурацией запускает игру и отображает нашу сцену с рисунками.

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

Объект Graphics — мощный инструмент для программируемой векторной графики в Phaser. Вы научились задавать толщину и цвет линий, рисовать простые фигуры и создавать сложные контуры. Для экспериментов попробуйте: - Анимировать толщину линии, меняя первый аргумент в lineStyle со временем. - Комбинировать обводку (strokeRect) и заливку (fillRect) для одной фигуры. - Использовать пути для создания динамических траекторий или границ нестандартной формы.