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

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

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

Версия 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('pixel', 'assets/sprites/16x16.png');
    }

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

        //  Different colors per corner, blended together
        this.add.image(400, 300, 'pixel').setScale(16).setTint(0xff0000, 0x00ff00, 0x0000ff, 0xff0000);

        //  Vertical tint from top to bottom (red on the top, blue on the bottom)
        // this.add.image(400, 300, 'pixel').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, 'pixel').setScale(16).setTint(0xff0000, 0x0000ff, 0xff0000, 0x0000ff);
    }
}

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

const game = new Phaser.Game(config);

Суть метода setTint с четырьмя параметрами

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

Цвета задаются в шестнадцатеричном формате 0xRRGGBB. Phaser автоматически интерполирует (плавно смешивает) цвета между этими угловыми точками, создавая градиентную заливку. Это работает благодаря возможностям WebGL-рендерера.

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

Разбираем пример: разноцветный квадрат

В предоставленном исходном коде создается один спрайт — маленькое изображение 16x16 пикселей, которое масштабируется в 16 раз. Ключевая строка — вызов setTint(0xff0000, 0x00ff00, 0x0000ff, 0xff0000).

Давайте посмотрим, какой цвет соответствует какому углу: * **Верхний левый (0xff0000):** Ярко-красный. * **Верхний правый (0x00ff00):** Ярко-зеленый. * **Нижний левый (0x0000ff):** Ярко-синий. * **Нижний правый (0xff0000):** Ярко-красный.

В результате верхняя грань плавно переходит от красного к зеленому, левая грань — от красного к синему, а вся плоскость заполняется сложным градиентом, смешивающим три основных цвета.

// Цвета для углов: красный, зеленый, синий, красный
setTint(0xff0000, 0x00ff00, 0x0000ff, 0xff0000);

Создаем вертикальные и горизонтальные градиенты

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

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

// Вертикальный градиент: красный верх, синий низ
this.add.image(400, 300, 'pixel').setScale(16).setTint(0xff0000, 0xff0000, 0x0000ff, 0x0000ff);

**Горизонтальный градиент** (от красного слева к синему справа) создается, когда цвета левых углов одинаковы и отличаются от цветов правых углов.

// Горизонтальный градиент: красный лево, синий право
this.add.image(400, 300, 'pixel').setScale(16).setTint(0xff0000, 0x0000ff, 0xff0000, 0x0000ff);

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

Эта техника отлично подходит для: 1. **Динамического освещения:** Затемнения нижней части спрайта (вертикальный градиент от светлого к темному). 2. **Окраски интерфейсов:** Создания градиентных фонов для кнопок или панелей. 3. **Эффектов на картах или платформах:** Быстрого обозначения опасных зон (например, красный градиент по краям) или лечебных областей.

Важное ограничение: метод работает только при использовании **WebGL-рендерера** (как указано в конфиге type: Phaser.WEBGL). В Canvas-режиме он не даст градиента и, скорее всего, применит только первый цвет.

const config = {
    type: Phaser.WEBGL, // Обязательное условие для работы
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

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

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