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

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

Версия 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('mushroom', 'assets/particles/glass.png');
    }

    create ()
    {
        //  top left, top right, bottom left, bottom right

        //  Different colors per corner, blended together
        this.add.image(200, 300, 'mushroom');
        this.add.image(400, 300, 'mushroom').setTint(0xff00ff);
        this.add.image(600, 300, 'mushroom').setTint(0xff00ff).setTintMode(Phaser.TintModes.FILL);

        //  Vertical tint from top to bottom (red on the top, blue on the bottom)
        // this.add.image(400, 300, 'mushroom').setScale(16).setTint(0xff0000, 0xff0000, 0x0000ff, 0x0000ff);

        //  Horizontal tint from left to right (red on the left, blue on the right)
        // this.add.image(400, 300, 'mushroom').setScale(16).setTint(0xff0000, 0x0000ff, 0xff0000, 0x0000ff);
    }
}

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

const game = new Phaser.Game(config);

Базовое окрашивание: метод setTint

Метод setTint — это основной инструмент для наложения цвета на спрайт. По умолчанию он применяет равномерный оттенок ко всему изображению, умножая его исходные цвета.

В примере создаются три одинаковых спрайта с изображением гриба. Первый остаётся без изменений, второй окрашивается в пурпурный цвет с помощью setTint(0xff00ff).

this.add.image(400, 300, 'mushroom').setTint(0xff00ff);

Здесь 0xff00ff — это шестнадцатеричный код цвета, где ff — красная компонента, 00 — зелёная, ff — синяя. Результат — спрайт, равномерно окрашенный в указанный оттенок.

Режимы наложения: ключевое свойство setTintMode

Стандартный режим наложения оттенка — мультипликативный (Phaser.TintModes.MULTIPLY). Однако setTintMode позволяет изменить это поведение. В примере используется режим Phaser.TintModes.FILL.

this.add.image(600, 300, 'mushroom').setTint(0xff00ff).setTintMode(Phaser.TintModes.FILL);

Режим FILL работает иначе: он полностью заменяет исходные цвета пикселей спрайта на указанный в setTint цвет, игнорируя их первоначальную яркость и тон. В результате спрайт становится однородным цветным силуэтом, что отлично подходит для создания масок или полностью перекрашенных иконок.

Градиентная заливка по углам

Настоящая мощь setTint раскрывается, когда методу передаётся не один, а четыре цветовых значения. Они соответствуют четырём углам спрайта: верхнему левому, верхнему правому, нижнему левому и нижнему правому. Phaser автоматически интерполирует цвета между этими точками, создавая плавный градиент.

В закомментированном коде примера показаны два варианта. Первый создаёт вертикальный градиент от красного сверху к синему снизу.

// this.add.image(400, 300, 'mushroom').setScale(16).setTint(0xff0000, 0xff0000, 0x0000ff, 0x0000ff);

Второй создаёт горизонтальный градиент от красного слева к синему справа.

// this.add.image(400, 300, 'mushroom').setScale(16).setTint(0xff0000, 0x0000ff, 0xff0000, 0x0000ff);

Обратите внимание на порядок аргументов: это позволяет гибко контролировать направление и сложность цветового перехода.

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

Эти методы находят множество применений в реальной разработке: * **Индикация состояния:** Подсвечивать врага красным (setTint(0xff0000)) при получении урона или игрока зелёным при лечении. * **Вариации объектов:** Создавать несколько цветовых вариантов одного спрайта для врагов, предметов или элементов окружения, экономя память. * **Атмосферные эффекты:** Использовать градиенты для симуляции подводного освещения, заката или магической ауры вокруг объекта. * **Эффект выделения:** Применить setTintMode(Phaser.TintModes.FILL) с полупрозрачным цветом для создания эффекта подсветки выбранного объекта.

Градиентная заливка особенно полезна для создания динамического освещения на статичных спрайтах без использования тяжёлых шейдеров.

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

Методы setTint и setTintMode — это лёгкий и производительный способ добавить визуальное разнообразие в вашу игру. Они работают непосредственно на GPU и не требуют перерисовки или подгрузки новых ассетов. Для экспериментов попробуйте: анимировать изменение оттенка с помощью tweens для плавного перехода цвета; комбинировать градиентную заливку с режимом FILL; или использовать разные оттенки для создания иллюзии объёма на плоском спрайте.