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

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

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }
    create ()
    {
        const color1 = new Phaser.Display.Color(100, 0, 0);
        const color2 = new Phaser.Display.Color(100, 0, 0);

        const rect1 = this.add.rectangle(200, 300, 200, 400, color1.color);
        const rect2 = this.add.rectangle(420, 300, 200, 400, color2.color);

        this.input.on('pointerup', function () {

            //  lighten the color by 10%
            color2.lighten(10);

            rect2.setFillStyle(color2.color);

        });
    }
}

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

const game = new Phaser.Game(config);

Создание объектов цвета

В Phaser для программной работы с цветами используется класс Phaser.Display.Color. Он позволяет создавать, хранить и манипулировать цветами через их RGB-компоненты.

В примере создаются два идентичных цвета. Конструктор класса принимает три аргумента: значения для красного (red), зеленого (green) и синего (blue) каналов. Каждое значение должно быть в диапазоне от 0 до 255.

const color1 = new Phaser.Display.Color(100, 0, 0);
const color2 = new Phaser.Display.Color(100, 0, 0);

Оба объекта представляют один и тот же темно-красный цвет (RGB: 100, 0, 0). Далее эти цвета используются для заливки двух прямоугольников.

Визуализация цвета на сцене

Чтобы увидеть цвет в игре, его нужно применить к графическому объекту. В данном случае используются прямоугольники, созданные с помощью this.add.rectangle.

Метод this.add.rectangle принимает координаты X и Y, ширину, высоту и цвет заливки. Цвет передается через свойство .color объекта Phaser.Display.Color. Это свойство возвращает числовое представление цвета, которое понимает рендерер Phaser.

const rect1 = this.add.rectangle(200, 300, 200, 400, color1.color);
const rect2 = this.add.rectangle(420, 300, 200, 400, color2.color);

Изначально оба прямоугольника будут окрашены одинаково, так как созданы из одинаковых цветовых объектов.

Интерактивное осветление цвета

Магия происходит по клику мыши. Обработчик события 'pointerup' вешается на системный объект this.input. Внутри него вызывается ключевой метод .lighten().

Метод color2.lighten(10) изменяет сам объект color2, осветляя его на 10%. Процент задается целым числом. Алгоритм внутри Phaser равномерно увеличивает значения всех RGB-каналов на указанный процент от разницы между текущим значением и максимальным (255).

this.input.on('pointerup', function () {
    //  lighten the color by 10%
    color2.lighten(10);
    rect2.setFillStyle(color2.color);
});

После изменения цвета необходимо обновить внешний вид прямоугольника. Метод rect2.setFillStyle(color2.color) применяет новый числовой цвет из измененного объекта color2 к прямоугольнику rect2. Прямоугольник rect1 при этом остается неизменным, что наглядно демонстрирует разницу между исходным и осветленным цветом.

Конфигурация игры и запуск сцены

Весь функционал упакован в сцену (Scene) — основную структурную единицу Phaser. Конфигурационный объект config определяет базовые параметры игры, такие как тип рендерера, размеры холста и корневую сцену.

Ключевой параметр scene: Example указывает, что при запуске игры должна быть создана и активирована наша сцена Example.

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

const game = new Phaser.Game(config);

Создание экземпляра Phaser.Game с этой конфигурацией инициализирует игровой цикл, системы ввода и отрисовки, после чего управление передается в методы create() и update() сцены.

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

Метод .lighten() класса Phaser.Display.Color — это простой и мощный инструмент для динамического управления цветовой палитрой вашей игры. Он модифицирует исходный объект цвета, что позволяет легко обновлять множество визуальных элементов, ссылающихся на него. Для экспериментов попробуйте вызвать lighten() несколько раз подряд в одном обработчике, чтобы увидеть ступенчатое изменение, или привяжите изменение цвета не к клику, а, например, ко времени (this.time.addEvent). Исследуйте другие методы класса, такие как .darken(), .saturate() или .setTo(), чтобы получить полный контроль над цветом в реальном времени.