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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    create ()
    {
        const color = new Phaser.Display.Color();
        for (let i = 0; i < 100; i++)
        {
            color.random(50);
            this.add.rectangle(400, i * 6, 800, 6, color.color);
        }
    }
}

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

const game = new Phaser.Game(config);

Введение в Phaser.Display.Color

Класс Phaser.Display.Color — это утилита для создания, преобразования и управления цветами. Он работает с цветом в формате RGBA (красный, зеленый, синий, альфа-канал), где каждый компонент представлен целым числом от 0 до 255.

Основное преимущество использования этого класса вместо простых шестнадцатеричных значений (0xFF0000) — возможность проводить математические операции с цветом (осветление, затемнение, интерполяция) и, что особенно важно для нашего примера, генерировать случайные цвета.

Создадим экземпляр класса в начале работы с цветом.

const color = new Phaser.Display.Color();

Генерация случайного цвета

Метод random() объекта Phaser.Display.Color заполняет его внутренние каналы (red, green, blue) случайными значениями. Это ключевая функция для нашей задачи.

Метод принимает один необязательный параметр — min. Этот параметр устанавливает минимальное значение для каждого из цветовых каналов (R, G, B). Это позволяет контролировать общую яркость генерируемого цвета. - color.random() — генерирует полностью случайный цвет (каналы от 0 до 255). - color.random(50) — генерирует цвет, где каждый канал будет иметь значение не меньше 50. Это гарантирует, что цвет не будет слишком темным. - color.random(200) — создаст очень светлые, пастельные тона.

После вызова random() обновленное цветовое значение доступно в свойстве color.color, которое представляет собой целочисленное значение, готовое для использования в графических API Phaser.

// Создаем новый случайный цвет с минимальной яркостью 50
color.random(50);
// Теперь свойство color.color содержит обновленное значение
let currentColorValue = color.color;

Визуализация: рисуем цветные полосы

Для отображения сгенерированных цветов используем простейший графический примитив — прямоугольник. В Phaser за это отвечает фабрика this.add.rectangle().

Функция принимает несколько аргументов: 1. Координата X центра прямоугольника. 2. Координата Y центра прямоугольника. 3. Ширина прямоугольника. 4. Высота прямоугольника. 5. Цвет заливки.

В нашем примере мы создаем 100 горизонтальных полос, расположенных друг под другом. Каждая итерация цикла: 1. Генерирует новый случайный цвет. 2. Создает прямоугольник во всю ширину экрана (800 пикселей) и высотой 6 пикселей. 3. Позиционирует его по вертикали, увеличивая координату Y на 6 пикселей за каждый шаг (i * 6). 4. Использует сгенерированный цвет (color.color) для заливки.

for (let i = 0; i < 100; i++) {
    // 1. Генерация цвета для текущей полосы
    color.random(50);
    // 2. Создание и отрисовка полосы
    this.add.rectangle(400, i * 6, 800, 6, color.color);
}

В результате получается красочная вертикальная последовательность из 100 уникальных полос, образующих абстрактный градиентный фон.

Практическое применение в играх

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

* **Процедурные фоны платформеров:** Создавайте уникальный цветовой набор для каждого уровня или биома. * **Эффекты частиц (Particles):** Задавайте случайный цвет для каждой новой частицы в эмиттере, чтобы создать разноцветный фейерверк или магическую ауру. * **Индикаторы состояния:** Динамически менять цвет шкалы здоровья (от зеленого к красному) или маны. * **Подсветка объектов:** Случайным образом или по определенному правилу окрашивать врагов, бонусы или элементы окружения.

Код для создания разноцветных частиц мог бы выглядеть так:

// Внутри цикла создания частиц
color.random();
emitter.setParticleTint(color.color);

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

Класс Phaser.Display.Color — это простой, но чрезвычайно мощный инструмент для добавления динамики и разнообразия в визуальную часть вашей игры. Использование метода random() с параметром для контроля яркости открывает широкие возможности для процедурной графики. **Идеи для экспериментов:** 1. Попробуйте изменить параметр min в random() на лету, чтобы создать анимированный переход от темных к светлым тонам. 2. Сгенерируйте один базовый цвет, а затем создавайте вариации, используя методы brighten() или darken(). 3. Вместо прямоугольников создавайте круги (this.add.circle) или звезды (this.add.star) разных размеров, окрашенные случайными цветами, чтобы получить более сложную текстуру фона.