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

При работе с графикой в играх постоянно возникают задачи по управлению цветами: заливка объектов, изменение оттенков UI, плавные переходы. Ручной разбор строк или чисел в форматы RGBA — это лишний код и потенциальные ошибки. Класс `Phaser.Display.Color` и его статический метод `ValueToColor` решают эту проблему, предлагая универсальный способ создания объектов цвета из любых популярных форматов. В этой статье мы разберем, как это работает и почему это упростит вашу разработку.

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

Живой запуск

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

Исходный код


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

    create() {

        //  All should equal Color 255, 238, 221 (alpha 255)
        const color1 = Phaser.Display.Color.ValueToColor(0xffeedd);
        console.log(color1);

        const color2 = Phaser.Display.Color.ValueToColor('#ffeedd');
        console.log(color2);

        const color3 = Phaser.Display.Color.ValueToColor('#fed');
        console.log(color3);

        const color4 = Phaser.Display.Color.ValueToColor('rgb(255, 238, 221)');
        console.log(color4);

    }
}

const config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    scene: Example
};

const game = new Phaser.Game(config);

Что такое Phaser.Display.Color?

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

Основная задача класса — предоставить удобные методы для создания, манипуляции и преобразования цветов. Объект цвета, созданный этим классом, содержит свойства `r,g,bиa`, а также методы для их изменения.

Статический метод ValueToColor — это фабрика, которая автоматически определяет формат входной строки или числа и создает готовый объект Phaser.Display.Color.

Как работает ValueToColor?

Метод Phaser.Display.Color.ValueToColor() принимает один аргумент — значение цвета. Его сила в том, что он умеет парсить несколько распространенных форматов:

1. **Шестнадцатеричное число:** Например, 0xffeedd. Это стандартный способ записи цвета в коде. 2. **Строка в HEX-формате:** Например, '#ffeedd' (полная форма) или сокращенная '#fed'. 3. **Строка в формате CSS RGB:** Например, 'rgb(255, 238, 221)'.

Метод анализирует входные данные и возвращает новый объект Color. Если передан некорректный формат, будет возвращен объект черного цвета (rgba(0,0,0,255)).

Рассмотрим пример из исходного кода, где один и тот же цвет задается разными способами:

const color1 = Phaser.Display.Color.ValueToColor(0xffeedd);
console.log(color1);

Все четыре вызова в примере создадут идентичные объекты Color со свойствами { r: 255, g: 238, b: 221, a: 255 }. Это очень удобно, когда данные о цвете могут приходить из разных источников (конфиг-файл, UI, расчеты).

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

Объект Color — это не просто контейнер для значений. С ним можно работать дальше. Допустим, вы получили цвет из конфигурации и хотите применить его к спрайту или изменить его яркость.

create() {
    // Получаем цвет из строки конфига
    const baseColor = Phaser.Display.Color.ValueToColor('#ffeedd');

    // Создаем спрайт
    const sprite = this.add.sprite(400, 300, 'player');

    // Устанавливаем tint (оттенок) спрайта, используя метод объекта Color
    sprite.setTint(baseColor.color);

    // Затемняем цвет на 20%
    Phaser.Display.Color.Darken(baseColor, 20);
    console.log('Затемненный цвет:', baseColor);
}

Ключевой момент: ValueToColor возвращает *объект*, а не примитивное значение. Это позволяет использовать весь функционал класса Color, например, методы Darken, Lighten, Brighten или получить цвет в виде числа через свойство .color (что и используется в setTint).

Важные нюансы и ограничения

При работе с методом важно помнить о нескольких вещах:

* **Альфа-канал:** В текущей реализации ValueToColor всегда устанавливает альфа-канал (`a) в 255 (полная непрозрачность), даже если в строке CSS указанrgba(). Для работы с прозрачностью нужно изменять свойствоa` объекта после его создания.

let color = Phaser.Display.Color.ValueToColor('#ffeedd');
color.a = 128; // Устанавливаем полупрозрачность

* **Некорректный ввод:** Метод не выбрасывает ошибки. При передаче нераспознанной строки (например, 'hello') он вернет объект черного цвета. Это нужно учитывать в логике вашей игры. * **Производительность:** Метод выполняет парсинг строк. Для критичных к производительности операций внутри игрового цикла (например, update) лучше использовать заранее созданные объекты Color или числовые значения.

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

Phaser.Display.Color.ValueToColor — это небольшой, но мощный инструмент для стандартизации работы с цветами в вашей игре. Он избавляет от необходимости писать собственные парсеры для строк и чисел, делая код чище и надежнее. Поэкспериментируйте: попробуйте загружать палитру уровней из JSON-файла, где цвета хранятся в виде строк, и мгновенно конвертировать их с помощью ValueToColor. Или создайте систему плавных цветовых переходов (градиентов) между двумя объектами Color, интерполируя их компоненты `r,g,b`.