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

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

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

Версия 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('bg', 'assets/pics/swirl1.jpg');
        this.load.image('morty', 'assets/pics/morty.png');
    }

    create ()
    {
        this.add.image(400, 300, 'bg');

        const image1 = this.add.image(200, 300, 'morty');
        const image2 = this.add.image(400, 300, 'morty');
        const image3 = this.add.image(600, 300, 'morty');

        image2.setTint(0xff0000);
        image2.setAlpha(0.5);

        // image3.setTint(0xff0000, 0xff0000, 0xffff00, 0xffff00).setTintMode(Phaser.TintModes.FILL);
        // image3.setTint(0xff0000).setTintMode(Phaser.TintModes.FILL);
        image3.setTint(0xffffff).setTintMode(Phaser.TintModes.FILL);
        image3.setAlpha(0.5);
    }
}

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

const game = new Phaser.Game(config);

Базовый пример: Загрузка и отрисовка

Пример начинается с классической структуры сцены Phaser. В методе preload() загружаются два изображения: фоновое (bg) и изображение персонажа (morty).

В методе create() сначала добавляется фоновое изображение по центру сцены. Затем создаются три копии изображения Морти, расположенные горизонтально на одной линии.

this.add.image(400, 300, 'bg');

const image1 = this.add.image(200, 300, 'morty');
const image2 = this.add.image(400, 300, 'morty');
const image3 = this.add.image(600, 300, 'morty');

Это дает нам три исходных, нетронутых спрайта для дальнейших манипуляций.

Применение оттенка (Tint) и прозрачности (Alpha)

Первый спрайт (image1) остается без изменений как контрольный образец. Со вторым спрайтом (image2) выполняются две операции.

Метод setTint(0xff0000) применяет к изображению красный оттенок. Цвет задается в шестнадцатеричном формате. Метод setAlpha(0.5) устанавливает прозрачность спрайта на 50%.

image2.setTint(0xff0000);
image2.setAlpha(0.5);

Важно помнить, что тинт *умножается* на исходные цвета текстуры. В результате спрайт окрашивается в красный и становится полупрозрачным.

Расширенный режим оттенка: TintMode.FILL

С третьим спрайтом (image3) демонстрируется более продвинутый режим работы с цветом. В отличие от image2, здесь используется метод setTintMode().

image3.setTint(0xffffff).setTintMode(Phaser.TintModes.FILL);
image3.setAlpha(0.5);

Установка режима Phaser.TintModes.FILL меняет поведение тинта. В этом режиме цвет, заданный в setTint(), не умножается, а *замещает* исходные цвета пикселей. Поскольку в качестве тинта указан белый цвет (0xffffff), спрайт отображается в своих исходных цветах, но также с полупрозрачностью 50%.

Если бы использовался setTint(0xff0000) с режимом FILL, спрайт стал бы полностью красным, без учета исходных градиентов и теней изображения.

Конфигурация игры и практические заметки

Код завершается стандартной конфигурацией игры для WebGL рендерера и ее инициализацией.

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

const game = new Phaser.Game(config);

**Практические отличия:** * **Умножение (стандартный режим):** setTint(0xff0000) — затемняет изображение, накладывая цвет. Подходит для эффектов отравления, ночного видения, подсветки. * **Замещение (FILL режим):** setTint(0xff0000).setTintMode(Phaser.TintModes.FILL) — полностью перекрашивает спрайт в плоский цвет. Идеально для создания силуэтов, индикации статуса (например, красный при получении урона). * **Alpha:** Работает независимо от режима тинта, управляя общей прозрачностью объекта.

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

Методы setTint(), setTintMode() и setAlpha() — это мощный и производительный инструмент для динамического изменения визуала. Их комбинация позволяет создавать разнообразные эффекты без перезагрузки ресурсов. **Идеи для экспериментов:** 1. Анимируйте значения альфы (setAlpha) для плавного появления/исчезновения объектов. 2. Используйте разные тинты для разных углов спрайта (аргументы setTint(topLeft, topRight, bottomLeft, bottomRight)), чтобы создать градиентную заливку. 3. Применяйте режим FILL для быстрой смены цветовой схемы интерфейсных элементов. 4. Комбинируйте тинт с эффектами частиц (ParticleEmitter) для цветного дыма или магических следов.