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

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

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

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

Живой запуск

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

Исходный код

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

        for (let i = 0; i < 11; ++i)
        {
            const color = 0xffff00;
            const alpha = 0.5 + ((i / 10) * 0.5);
        
            graphics.fillStyle(color, alpha);
            graphics.fillRect(32 * i, 32 * i, 256, 256);

        }
    }
}

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

const game = new Phaser.Game(config);

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

Вся работа начинается с создания объекта Graphics. Это холст для векторного рисования.

const graphics = this.add.graphics();

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

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

Перед рисованием фигуры необходимо задать её стиль. Для заливаемых фигур используется метод fillStyle.

graphics.fillStyle(color, alpha);

Здесь: - color — это числовое значение цвета в формате 0xRRGGBB (например, 0xffff00 — ярко-желтый). - alpha — значение прозрачности (альфа-канал) в диапазоне от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

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

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

Основная фигура в примере — прямоугольник, который рисуется методом fillRect.

graphics.fillRect(32 * i, 32 * i, 256, 256);

Метод принимает четыре аргумента: 1. `x— координата X верхнего левого угла прямоугольника на холстеGraphics`. 2. `y` — координата Y верхнего левого угла. 3. width — ширина прямоугольника. 4. height — высота прямоугольника.

В цикле координаты `xиyувеличиваются с каждой итерацией (32 * i`), что заставляет каждый новый прямоугольник смещаться вниз и вправо относительно предыдущего, образуя диагональную цепочку.

Логика цикла: создание последовательности

Весь рисунок генерируется в цикле for. Давайте разберем его логику.

for (let i = 0; i < 11; ++i) {
    const color = 0xffff00;
    const alpha = 0.5 + ((i / 10) * 0.5);
    // ... установка стиля и рисование ...
}

- Цикл выполняется 11 раз (`i` от 0 до 10). - Цвет (0xffff00) задается константой для всех итераций. - Прозрачность (alpha) вычисляется динамически. Выражение (i / 10) дает значение от 0.0 до 1.0. Умножив его на 0.5 и прибавив 0.5, мы получаем диапазон альфа-канала от 0.5 (при i=0) до 1.0 (при i=10). Таким образом, каждый следующий прямоугольник будет менее прозрачным, чем предыдущий.

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

Объект Graphics — это гибкий инструмент для программного рисования в Phaser. Как видно из примера, комбинируя простые методы в цикле, можно создавать сложные и интересные визуальные паттерны. Для экспериментов попробуйте изменить форму (используйте fillCircle или fillTriangle), добавить обводку с помощью lineStyle и strokeRect или управлять цветом в цикле, создавая радужный градиент. Это отличная основа для создания кастомных эффектов частиц или динамических элементов HUD.