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

Однотонное окрашивание спрайтов — это не только базовый прием для изменения цвета графики, но и мощный инструмент для создания динамических визуальных эффектов, таких как подсветка урона, изменение времени суток или индикация состояния. Встроенный метод `setTint` позволяет мгновенно менять внешний вид игровых объектов, не создавая дополнительные текстуры, что экономит память и упрощает конвейер разработки. Эта статья покажет, как использовать `setTint` для статичного окрашивания и в связке с цветовым кругом HSV для создания рандомизированных или управляемых игроком визуальных трансформаций.

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

Живой запуск

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

Исходный код


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

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.image('face', 'assets/pics/bw-face.png');
    }

    create ()
    {
        const hsv = Phaser.Display.Color.HSVColorWheel();

        const image = this.add.image(400, 300, 'face');

        // image.setTint(0xff00ff);
        image.setTint(0xff0000);
        // image.setTint(0x00ff00);
        // image.setTint(0x0000ff);

        this.input.on('pointerdown', function (pointer) {

            const i = Phaser.Math.Between(0, 359);

            image.setTint(hsv[i].color);

        });
    }
}

const config = {
    type: Phaser.WEBGL,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

Суть метода `setTint`

Метод setTint — это функция объекта изображения (Phaser.GameObjects.Image) или спрайта, которая применяет однородное цветное покрытие (тинт) к исходной текстуре. Он не заменяет пиксели, а накладывает поверх них выбранный оттенок, сохраняя исходные контуры и градиенты, но изменяя общую цветовую гамму.

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

image.setTint(0xff0000); // Окрашивает изображение в чистый красный цвет

Цвет передается в формате шестнадцатеричного числа 0xRRGGBB, где RR, GG и BB — компоненты красного, зеленого и синего соответственно.

Статичное окрашивание в один цвет

Самый простой способ использования — задать постоянный цвет при создании объекта. В примере кода изображение лица изначально окрашивается в красный цвет. Закомментированные строки показывают альтернативные варианты — пурпурный, зеленый и синий.

// image.setTint(0xff00ff); // Пурпурный
image.setTint(0xff0000); // Красный
// image.setTint(0x00ff00); // Зеленый
// image.setTint(0x0000ff); // Синий

Этот подход идеален для элементов, цвет которых не должен меняться в течение игры, таких как статичный фон определенного оттенка или уникальные декорации.

Динамическая смена цвета с помощью HSV-круга

Для динамических эффектов Phaser предоставляет утилиту Phaser.Display.Color.HSVColorWheel(). Она генерирует массив из 360 объектов, каждый из которых содержит цвет в формате HSV (тон, насыщенность, значение), плавно переходящий по всему цветовому спектру.

const hsv = Phaser.Display.Color.HSVColorWheel(); // Создание палитры из 360 цветов

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

Связывание с пользовательским вводом

В примере динамическое окрашивание привязано к событию клика (или касания) — pointerdown. Каждое нажатие на холст вызывает функцию, которая выбирает случайный индекс от 0 до 359 и применяет соответствующий цвет из HSV-круга к изображению.

this.input.on('pointerdown', function (pointer) {
    const i = Phaser.Math.Between(0, 359); // Случайный индекс
    image.setTint(hsv[i].color); // Применение цвета по индексу
});

Ключевые моменты: 1. this.input.on регистрирует обработчик события. 2. Phaser.Math.Between — встроенный генератор случайных целых чисел в заданном диапазоне. 3. Обращение к свойству .color объекта из массива hsv дает числовое значение, которое принимает setTint.

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

Метод setTint — это простой и эффективный способ визуальной модификации игровых объектов. Для статичного окрашивания достаточно передать ему один цветовой код. Для создания сложных динамических эффектов его можно комбинировать с цветовым кругом HSV и системой ввода Phaser. **Идеи для экспериментов:** 1. Вместо случайного цвета меняйте его циклически, увеличивая индекс на 1 с каждым кликом. 2. Привяжите изменение цвета не к клику, а к времени, используя this.time.addEvent, чтобы создать плавную цветовую анимацию (например, мерцание или плавный переход). 3. Используйте разные типы тинта для разных состояний объекта: красный при получении урона, зеленый для исцеления, желтый для эффекта "оглушения".