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

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

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

Живой запуск

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

Исходный код


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

    create ()
    {
        const color1 = new Phaser.Display.Color(150, 0, 0);
        const color2 = new Phaser.Display.Color(150, 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 () {

            //  brighten the color by 10%
            color2.brighten(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. Он позволяет оперировать цветом как объектом, а не просто числовым значением. Это удобно для хранения и последовательных преобразований.

В примере создаются два идентичных объекта цвета темно-красного оттенка.

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

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

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.on('pointerup', function () {
    //  brighten the color by 10%
    color2.brighten(10);
    rect2.setFillStyle(color2.color);
});

Метод brighten() изменяет внутреннее состояние объекта color2. Он принимает один аргумент — процент, на который нужно увеличить яркость каждого канала цвета (красный, зеленый, синий). Важно: метод модифицирует именно тот объект, у которого был вызван.

После изменения цвета мы обновляем заливку второго прямоугольника, передав новое значение color2.color в метод setFillStyle().

Как работает brighten() и его противоположность

Метод brighten(amount) увеличивает значение каждого компонента RGB на указанный процент от его максимального значения (255). Формула для каждого канала выглядит так: новое_значение = текущее_значение + (255 * amount / 100). Если результат превышает 255, он фиксируется на 255.

// Пример для красного канала со значением 150 и amount=10
let newRed = 150 + (255 * 10 / 100); // newRed = 175.5

У класса Phaser.Display.Color есть парный метод — darken(amount). Он работает аналогично, но уменьшает значения каналов.

// Затемнить цвет на 20%
color2.darken(20);
rect2.setFillStyle(color2.color);

Эти методы идеально подходят для плавных переходов, например, в цикле update.

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

Использование brighten() и darken() выходит за рамки простого примера. Вот несколько идей для вашего проекта:

* **Визуальная обратная связь:** Подсвечивайте интерфейсные кнопки или игровые объекты при наведении. * **Индикация состояния:** Затемняйте предметы в инвентаре, которые нельзя использовать. * **Создание эффектов:** Реализуйте мерцание или "пульсацию" объектов, циклически изменяя их яркость. * **Динамическое освещение:** Упрощенная симуляция того, как цвет объекта меняется при попадании в область света.

Главное преимущество — вы работаете с цветом как с объектом, что позволяет легко сохранять промежуточные состояния и применять цепочки преобразований.

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

Класс Phaser.Display.Color с методами brighten() и darken() предоставляет простой и эффективный способ динамического управления цветом прямо во время выполнения игры. Это отличная альтернатива ручным расчетам RGB-значений. **Идеи для экспериментов:** 1. Свяжите изменение яркости не с кликом, а с движением мыши (pointermove). 2. Создайте анимацию плавного затемнения всей сцены для перехода между уровнями, изменяя цвет большого полупрозрачного прямоугольника. 3. Реализуйте систему "подсветки пути", где яркость плиток поля увеличивается при наведении на юнита.