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

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

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

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

Живой запуск

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

Исходный код

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

        graphics.fillGradientStyle(0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 1);
        graphics.fillRect(100, 100, 256, 256);

        graphics.fillGradientStyle(0xff0000, 0xff0000, 0xffff00, 0xffff00, 1);
        graphics.fillRect(250, 200, 400, 256);

        graphics.fillStyle(0x00ff00, 0.5);
        graphics.fillRect(550, 300, 160, 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();

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

Настройка градиентной заливки

Метод fillGradientStyle задаёт цвета для углов прямоугольника, создавая линейный градиент. Цвета задаются в формате 0xRRGGBB. Пятый параметр — это альфа-канал (прозрачность) для всей заливки.

graphics.fillGradientStyle(0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 1);

Здесь: - Первый цвет (0xff0000 — красный) применяется к верхнему левому углу. - Второй (0x00ff00 — зелёный) — к верхнему правому. - Третий (0x0000ff — синий) — к нижнему левому. - Четвёртый (0xffff00 — жёлтый) — к нижнему правому. Phaser автоматически интерполирует цвета между этими точками, создавая плавный переход.

Рисование фигуры с заливкой

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

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

Параметры метода: координаты X и Y левого верхнего угла прямоугольника, затем его ширина и высота. Фигура будет залита тем градиентом, который был задан последним вызовом fillGradientStyle или fillStyle.

Комбинирование стилей и наложение

Вы можете менять стиль заливки между рисованием разных фигур. Это позволяет создавать сложные композиции. Следующий код задаёт градиент от красного к жёлтому по вертикали (верхние и нижние цвета попарно одинаковы), а затем рисует полупрозрачный зелёный прямоугольник поверх.

graphics.fillGradientStyle(0xff0000, 0xff0000, 0xffff00, 0xffff00, 1);
graphics.fillRect(250, 200, 400, 256);

graphics.fillStyle(0x00ff00, 0.5);
graphics.fillRect(550, 300, 160, 256);

Обратите внимание на метод fillStyle. Он устанавливает сплошной цвет заливки (в данном случае зелёный 0x00ff00) с прозрачностью 0.5. Фигуры, нарисованные после его вызова, будут полупрозрачными, что позволяет создавать эффекты наложения.

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

Graphics с градиентами — это быстрый и гибкий способ добавить «живости» в вашу игру. Поэкспериментируйте: анимируйте положение или цвета градиента в цикле update для создания мерцающих энергетических полей, плавно появляющихся областей или индикаторов здоровья. Попробуйте комбинировать множество мелких градиентных прямоугольников для создания эффекта частиц или сложного фонового паттерна, который будет весить гораздо меньше, чем текстура аналогичного разрешения.