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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{

    create ()
    {
        const graphics = this.add.graphics();

        graphics.lineStyle(1, 0x00ff00, 1);
        graphics.strokeRect(100, 100, 256, 256);

        graphics.lineStyle(1, 0xff0000, 0.5);
        graphics.strokeRect(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. Это специальный игровой объект (Game Object), который можно добавлять на сцену, как спрайт или текст.

const graphics = this.add.graphics();

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

Настройка стиля линии

Перед тем как рисовать контур фигуры, нужно определить, как будет выглядеть эта линия. За это отвечает метод lineStyle().

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

Метод принимает три основных аргумента: 1. lineWidth (толщина): Ширина линии в пикселях. В нашем примере это `1`. 2. color (цвет): Цвет линии в шестнадцатеричном формате (0xRRGGBB). Значение 0x00ff00 соответствует чистому зеленому цвету. 3. alpha (прозрачность): Значение от `0(полностью прозрачно) до1(полностью непрозрачно). Установлено в1`.

Установленный стиль будет применяться ко всем последующим операциям рисования контуров, пока он не будет изменен новым вызовом lineStyle().

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

Чтобы нарисовать контур (только границу) прямоугольника, используется метод strokeRect().

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

Метод принимает четыре аргумента, определяющих положение и размеры прямоугольника в системе координат сцены: - `x`: Координата X левого верхнего угла прямоугольника. - `y`: Координата Y левого верхнего угла прямоугольника. - width: Ширина прямоугольника. - height: Высота прямоугольника.

Фигура рисуется с использованием текущего стиля линии, заданного ранее в lineStyle().

Динамическая смена стиля

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

graphics.lineStyle(1, 0xff0000, 0.5);
graphics.strokeRect(250, 200, 400, 256);

В этом блоке мы: 1. Сначала меняем стиль линии: толщина осталась `1, но цвет стал красным (0xff0000), а прозрачность уменьшилась до0.5` (полупрозрачный). 2. Затем рисуем новый прямоугольник с новыми координатами и размерами. Он будет отрисован красной полупрозрачной линией, в то время как первый прямоугольник (зеленый) остается неизменным.

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

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

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