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

Работа с цветом — ключевой элемент визуального стиля игры. Часто требуется создать приглушенную, атмосферную палитру, например, для фона, тумана или статичных элементов. Вручную подбирать такие цвета утомительно. В этой статье разберем, как с помощью встроенного класса `Phaser.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.randomGray(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. Этот объект — удобная обертка для управления цветом, которая позволяет задавать значения, конвертировать форматы и, что важно для нас, генерировать случайные цвета.

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

После создания объект color будет хранить цвет по умолчанию (черный). Теперь мы можем использовать его методы для манипуляций.

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

Метод .randomGray() — это наша главная функция. Он генерирует случайный оттенок серого и сразу же применяет его к объекту color. Оттенки серого — это цвета, у которых значения красного (red), зеленого (green) и синего (blue) каналов одинаковы.

color.randomGray(50);

Единственный необязательный параметр этого метода — min. Он устанавливает минимальное значение для каждого цветового канала (R, G, B). Значение 50 означает, что каждый канал получит случайное число от 50 до 255. Таким образом, мы гарантируем, что все сгенерированные цвета будут достаточно светлыми (не ниже 50 из 255), избегая слишком темных, почти черных оттенков.

Визуализация и применение цвета

После вызова color.randomGray() обновленный цвет хранится в свойстве .color объекта. Это числовое значение в формате RGB, которое можно напрямую использовать в графических примитивах Phaser.

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

for (let i = 0; i < 100; i++) {
    color.randomGray(50);
    this.add.rectangle(400, i * 6, 800, 6, color.color);
}

Здесь this.add.rectangle() создает прямоугольник. Ключевой пятый аргумент — color.color — это и есть сгенерированный цвет. Цикл рисует 100 полос, постепенно заполняя все игровое окно (height: 600) градиентом из случайных светлых серых оттенков.

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

Такой подход полезен не только для создания статичных фонов. Вот несколько идей: * **Динамический фон:** Генерировать новый набор цветов при смене уровня или времени суток в игре. * **Эффекты частиц:** Задавать случайный, но приглушенный цвет для дыма, пыли или пепла. * **Цветовая схема UI:** Создавать согласованные оттенки для элементов интерфейса.

Чтобы получить более темную, мрачную палитру, просто увеличьте параметр min.

// Темные, глубокие оттенки серого
color.randomGray(150);
// Очень светлые, почти белые оттенки
color.randomGray(200);

Метод randomGray() — это быстрый способ получить эстетически приятный, однородный набор цветов без риска создать слишком яркую или кричащую палитру.

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

Класс Phaser.Display.Color с методом .randomGray() предоставляет простой и мощный инструмент для управления цветовой палитрой. Он избавляет от рутинного подбора RGB-значений и помогает создавать целостную визуальную атмосферу. **Идеи для экспериментов:** 1. Свяжите параметр min в randomGray() со временем в игре, чтобы фон плавно темнел с наступлением ночи. 2. Используйте этот метод для окрашивания тайловой карты, создавая участки с разной «засветкой». 3. Комбинируйте серые прямоугольники с текстурами, накладывая их с режимами смешивания (blendMode), для создания сложных текстурных эффектов.