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

Цвета — неотъемлемая часть визуального оформления игры. Часто данные о цветах приходят извне в виде строк, например, из конфигурационных файлов или ответов сервера. В Phaser есть удобный инструмент для преобразования таких строк в полноценные объекты цвета, с которыми можно работать дальше. Этот метод позволяет избежать ручного парсинга строк и гарантирует корректную обработку значений, включая прозрачность и некорректные входные данные.

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

Живой запуск

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

Исходный код


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

    create() {
        const color1 = Phaser.Display.Color.RGBStringToColor('rgb(255, 155, 55)');
        console.log(color1);

        const color2 = Phaser.Display.Color.RGBStringToColor('rgba(255, 155, 55, 0.5)');
        console.log(color2);

        const color3 = Phaser.Display.Color.RGBStringToColor('rgba(345, 50, 100, 2.5)');
        console.log(color3);

        const color4 = Phaser.Display.Color.RGBStringToColor('rgb(50, -50, 50)');
        console.log(color4);

        const color5 = Phaser.Display.Color.RGBStringToColor('RGB(255, 0, 255)');
        console.log(color5);
    }
}

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

const game = new Phaser.Game(config);

Что делает метод RGBStringToColor?

Статический метод Phaser.Display.Color.RGBStringToColor принимает на вход строку в формате rgb() или rgba() и возвращает объект типа Phaser.Display.Color. Этот объект содержит числовые значения для красного (r), зеленого (g), синего (b) каналов и альфа-канала (a, прозрачность), а также множество полезных методов для дальнейших манипуляций с цветом (например, setTo, getColor32).

Метод автоматически обрабатывает регистр строки и корректирует входные значения, выходящие за допустимые пределы, что делает его очень надежным.

Базовое преобразование строк RGB и RGBA

Самый простой случай — передача корректной строки. Метод успешно распарсит как формат без альфа-канала (rgb), так и с ним (rgba). В случае rgb прозрачности автоматически присваивается значение 1 (полная непрозрачность).

const color1 = Phaser.Display.Color.RGBStringToColor('rgb(255, 155, 55)');
console.log(color1); // Color объект: r=255, g=155, b=55, a=1

const color2 = Phaser.Display.Color.RGBStringToColor('rgba(255, 155, 55, 0.5)');
console.log(color2); // Color объект: r=255, g=155, b=55, a=128 (0.5 * 255)

Автоматическая коррекция некорректных значений

Одна из ключевых особенностей метода — устойчивость к ошибкам. Если значения компонентов цвета или альфа-канала выходят за стандартные границы (0-255 для цвета, 0.0-1.0 для альфы), Phaser автоматически обрежет их до допустимого диапазона. Это предотвращает ошибки выполнения и неожиданное визуальное поведение.

const color3 = Phaser.Display.Color.RGBStringToColor('rgba(345, 50, 100, 2.5)');
console.log(color3); // Значения будут обрезаны: r=255, g=50, b=100, a=255 (1.0)

const color4 = Phaser.Display.Color.RGBStringToColor('rgb(50, -50, 50)');
console.log(color4); // Отрицательное значение обрезано: r=50, g=0, b=50, a=1

Нечувствительность к регистру

Метод не требует строгого соблюдения регистра в названии формата. Строки RGB, Rgba или rGb будут распознаны корректно. Это полезно при работе с данными, источник которых вы не контролируете.

const color5 = Phaser.Display.Color.RGBStringToColor('RGB(255, 0, 255)');
console.log(color5); // Успешно создаст Color объект: r=255, g=0, b=255, a=1

Как использовать полученный объект Color?

Полученный объект можно использовать везде, где Phaser ожидает цвет. Например, для заливки графики (graphics.fillStyle), установки цвета текста (text.setColor) или tint'а спрайта (sprite.setTint). Вы также можете изменить его свойства или вызвать методы для преобразования.

// Пример использования с текстом
create() {
    const textColor = Phaser.Display.Color.RGBStringToColor('rgb(200, 50, 150)');
    this.add.text(100, 100, 'Радужный текст', { fontSize: '32px' })
        .setColor(textColor.rgba); // Используем свойство .rgba для строки
}

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

Метод RGBStringToColor — это надежный и гибкий способ импорта цветов в вашу игру на Phaser. Он избавляет от необходимости писать собственный парсер, корректно обрабатывает ошибки и предоставляет готовый к использованию объект. Для экспериментов попробуйте динамически генерировать цветовые схемы уровня из конфигурационных JSON-файлов или изменять tint спрайтов в зависимости от строковых данных, полученных с сервера.