Phaser.js: всё об играх и разработке

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

Работа с цветами — неотъемлемая часть разработки игр. Часто цвета приходят из внешних источников, например, из палитры дизайнера, в формате HEX-строки. Вручную парсить строки типа '#FF00FF' — утомительно и чревато ошибками. Phaser предоставляет встроенный и надежный метод `Phaser.Display.Color.HexStringToColor()`, который мгновенно преобразует знакомую шестнадцатеричную запись в полноценный объект цвета для дальнейших манипуляций: изменения яркости, прозрачности или применения к игровым объектам.

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

Живой запуск

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

Исходный код

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

    create ()
    {

        const color1 = Phaser.Display.Color.HexStringToColor('#ff00ff');
        console.log(color1);

        const color2 = Phaser.Display.Color.HexStringToColor('#0155dd');
        console.log(color2);

        const color3 = Phaser.Display.Color.HexStringToColor('#03f');
        console.log(color3);

        const color4 = Phaser.Display.Color.HexStringToColor('#FFAAEE');
        console.log(color4);
    }

}

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

const game = new Phaser.Game(config);

Что делает `HexStringToColor`?

Это статический метод класса Phaser.Display.Color. Его задача — взять строку, представляющую цвет в HEX-формате, и вернуть объект типа Phaser.Display.Color. Этот объект содержит числовые значения красной (r), зеленой (g), синей (b) составляющих и альфа-канала (a, прозрачность), с которыми удобно работать программно.

Метод корректно обрабатывает как полную 6-символьную запись (например, '#FF00FF'), так и сокращенную 3-символьную (например, '#03F'), а также регистр символов не имеет значения.

Разбор кода примера

В примере создается сцена с единственным методом create(). Внутри него демонстрируется четыре вызова метода HexStringToColor с разными входными строками. Результат каждого вывода записывается в консоль.

create ()
{
    const color1 = Phaser.Display.Color.HexStringToColor('#ff00ff');
    console.log(color1);
    // Остальные вызовы...
}

После запуска этого кода в консоли браузера вы увидите четыре объекта. Например, для color1 вывод будет выглядеть так:

Color { r: 255, g: 0, b: 255, a: 255, color: 16711935, rgba: 'rgba(255,0,255,1)' }

Это и есть готовый к использованию объект цвета Phaser.

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

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

create ()
{
    // Получаем цвет из HEX-строки
    const dangerColor = Phaser.Display.Color.HexStringToColor('#FF3300');

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

    // Применяем цвет в качестве tint (умножения цвета)
    player.setTint(dangerColor.color); // Используем свойство .color (число)

    // Или для графики
    const graphics = this.add.graphics();
    graphics.fillStyle(dangerColor.color, 1.0); // Тоже используем числовое значение
    graphics.fillRect(200, 200, 50, 50);
}

Ключевые свойства объекта: - `r,g,b,a` (0-255): Отдельные компоненты. - color: Числовое представление цвета (integer), которое принимают методы вроде setTint(). - rgba: Готовая CSS-строка для использования в DOM-элементах, если это потребуется.

Особенности и валидация

Метод HexStringToColor достаточно умён. Он корректно обработает строку без решётки в начале, а в случае передачи некорректной строки (например, 'ZZZZZZ') вернёт объект, представляющий чёрный цвет (#000000). Это защищает ваш код от падений.

// Эти вызовы также сработают:
const colorA = Phaser.Display.Color.HexStringToColor('0155dd'); // Без решетки
const colorB = Phaser.Display.Color.HexStringToColor('#03f');   // Сокращенная форма
const colorC = Phaser.Display.Color.HexStringToColor('#BADINPUT'); // Станет черным
console.log(colorC); // Color { r: 0, g: 0, b: 0, a: 255, ... }

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

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

Метод Phaser.Display.Color.HexStringToColor() — это ваш надёжный мост между дизайнерскими HEX-цветами и программируемым миром Phaser. Он избавляет от рутинного парсинга строк и позволяет легко внедрять динамическую палитру в игру. **Идеи для экспериментов:** 1. Загрузите палитру цветов для уровней из JSON-файла в виде массива HEX-строк и примените её к фону и врагам. 2. Создайте эффект постепенного изменения цвета объекта (color lerping), плавно интерполируя между двумя цветами, полученными из HEX-строк. 3. Реализуйте систему подсветки (highlight) выбранного предмета в инвентаре, используя цвет из конфига игры.