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

Визуальное разнообразие — ключ к увлекательному игровому миру. Часто стандартных тайловых наборов недостаточно для создания нужной атмосферы или выделения зон. К счастью, 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('tiles', 'assets/tilemaps/tiles/drawtiles-spaced.png');
        this.load.image('car', 'assets/sprites/car90.png');
        this.load.tilemapCSV('map', 'assets/tilemaps/csv/grid.csv');
    }

    create ()
    {
        const map = this.make.tilemap({ key: 'map', tileWidth: 32, tileHeight: 32 });
        const tileset = map.addTilesetImage('tiles', null, 32, 32, 1, 2);
        const layer = map.createLayer(0, tileset, 0, 0);

        layer.setTint(0xff0000, 1, 1, 8, 8);
        layer.setTint(0x00ff00, 9, 1, 8, 8);
        layer.setTint(0x2323ff, 17, 1, 7, 8);
        layer.setTint(0xff00ff, 1, 9, 13, 8);
        layer.setTint(0xffff00, 14, 9, 10, 8);
    }
}

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

let game = new Phaser.Game(config);

Подготовка сцены и загрузка ресурсов

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

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.image('tiles', 'assets/tilemaps/tiles/drawtiles-spaced.png');
    this.load.image('car', 'assets/sprites/car90.png');
    this.load.tilemapCSV('map', 'assets/tilemaps/csv/grid.csv');
}

Метод setBaseURL задаёт базовый URL для всех последующих загрузок, что упрощает указание путей. load.image загружает картинки, а load.tilemapCSV — карту, где каждый номер в CSV-файле соответствует индексу тайла в наборе.

Создание тайловой карты и слоя

В методе create мы создаём игровой мир на основе загруженных данных. Сначала создаётся объект тайловой карты.

const map = this.make.tilemap({ key: 'map', tileWidth: 32, tileHeight: 32 });

Ключевой параметр key указывает на загруженные данные карты. tileWidth и tileHeight задают размер одного тайла в пикселях. Далее мы связываем изображение тайлсета с этой картой.

const tileset = map.addTilesetImage('tiles', null, 32, 32, 1, 2);

Здесь 'tiles' — это ключ загруженного изображения. Параметры 32, 32 — это ширина и высота тайла. Последние два аргумента 1, 2 — это отступ (margin) и промежуток (spacing) в пикселях на изображении тайлсета, которые учитываются при нарезке. После этого создаётся визуальный слой.

const layer = map.createLayer(0, tileset, 0, 0);

Это создаёт слой с индексом `0(первый и единственный слой в CSV-карте), используя наш тайлсет, и располагает его в координатах(0, 0)` на сцене.

Магия метода layer.setTint

Вот где происходит самое интересное. Объект слоя (layer) имеет метод setTint, который позволяет залить цветом прямоугольную область тайлов.

layer.setTint(0xff0000, 1, 1, 8, 8);

Разберём его параметры по порядку: 1. 0xff0000 — цвет в HEX-формате. Это ярко-красный. 2. `1` — координата X (в тайлах) левого верхнего угла области для окрашивания. 3. `1` — координата Y (в тайлах) левого верхнего угла области. 4. `8` — ширина области в тайлах. 5. `8` — высота области в тайлах.

Таким образом, эта строка окрашивает квадрат 8x8 тайлов, начиная с позиции (1,1), в красный цвет. Последующие вызовы окрашивают другие области слоя в зелёный, синий, пурпурный и жёлтый цвета, создавая разноцветную сетку.

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

Всё это упаковано в стандартную конфигурацию Phaser. Обратите внимание, что для рендеринга используется WEBGL, что обеспечивает высокую производительность графических операций, включая tint.

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

let game = new Phaser.Game(config);

Параметр backgroundColor устанавливает тёмно-синий цвет фона, на котором наши раскрашенные тайлы смотрятся особенно контрастно. Класс Example, описанный выше, передаётся как сцена по умолчанию.

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

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