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

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

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

Живой запуск

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

Исходный код


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

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

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

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

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

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

Обратите внимание: для заливки фигуры используется свойство .color объекта цвета. Это свойство возвращает числовое значение цвета, понятное рендереру Phaser.

Как работает метод darken()

Метод darken() изменяет текущий цвет объекта, делая его темнее. Он принимает один аргумент — процент затемнения.

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

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

В данном примере каждый компонент RGB цвета color2 будет уменьшен на 10% от его текущего значения. Для исходного красного цвета (255, 0, 0) это изменит только красную составляющую.

Динамическое обновление графики

Чтобы визуализировать изменение цвета, необходимо обновить заливку графического объекта. В примере это привязано к событию клика (pointerup).

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

this.input.on('pointerup', function () {
    color2.darken(10);
    rect2.setFillStyle(color2.color);
});

Каждый клик будет затемнять правый прямоугольник еще на 10%, в то время как левый останется неизменным. Это наглядно демонстрирует разницу между исходным и модифицированным цветом.

Практическое применение и нюансы

Метод darken() идеально подходит для создания интерактивных элементов: кнопок, которые темнеют при наведении или нажатии, для симуляции времени суток или затемнения области под курсором.

Запомните ключевые моменты: 1. **Изменение на месте:** Метод изменяет исходный объект цвета. 2. **Процентное значение:** Аргумент — это процент, а не абсолютное значение. 3. **Обновление отображения:** После изменения цвета нужно вручную обновить графический объект, который его использует.

Для осветления цвета используйте парный метод lighten().

//  Осветлить цвет на 15%
myColor.lighten(15);

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

Метод darken() класса Phaser.Display.Color — это простой и мощный способ динамического управления цветом. Он открывает возможности для создания более живой и отзывчивой графики. **Идеи для экспериментов:** 1. Свяжите затемнение не с кликом, а с наведением мыши (pointerover). 2. Затемняйте цвет на разный процент в зависимости от других игровых условий. 3. Используйте darken() и lighten() вместе для создания пульсирующего эффекта свечения.