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

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

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

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
        this.tilesprites = [];
    }

    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.atlas('atlas', 'assets/atlas/megaset-2.png', 'assets/atlas/megaset-2.json');
    }

    create ()
    {
        const frames = ['atari400', 'bunny', 'cokecan', 'copy-that-floppy', 'hotdog'];

        for (let i = 0; i < frames.length; ++i)
        {
            this.tilesprites[i] = this.add.tileSprite(i * 160, 0, 160, 600, 'atlas', frames[i]);
            this.tilesprites[i].setOrigin(0)
            this.tilesprites[i].setTint(0xff00ff, 0xffff00, 0x0000ff, 0xff0000);
        }
    }

    update ()
    {
        let x = 1;

        for (var i = 0; i < this.tilesprites.length; ++i)
        {
            this.tilesprites[i].tilePositionX += x;
            this.tilesprites[i].tilePositionY += x;
            x *= -1;
        }
    }
}

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

const game = new Phaser.Game(config);

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

Класс Example расширяет Phaser.Scene и содержит массив tilesprites для хранения объектов. В методе preload мы загружаем атлас текстур — единое изображение с набором спрайтов и JSON-файл, описывающий их границы. Это оптимизирует загрузку и управление ресурсами.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.atlas('atlas', 'assets/atlas/megaset-2.png', 'assets/atlas/megaset-2.json');
}

Создание TileSprite с применением оттенков

В методе create мы создаем массив кадров (frames) из атласа. Для каждого кадра создается объект TileSprite с помощью this.add.tileSprite. Параметры задают позицию (x, y), размер (ширина, высота), ключ атласа и имя кадра. setOrigin(0) устанавливает точку отсчета в левый верхний угол для удобства позиционирования.

Ключевой момент — применение setTint с четырьмя шестнадцатеричными значениями цвета. Эти цвета применяются к четырем углам TileSprite, создавая градиентный эффект. Например, первый спрайт получит оттенки от пурпурного (0xff00ff) до желтого (0xffff00), синего (0x0000ff) и красного (0xff0000).

create ()
{
    const frames = ['atari400', 'bunny', 'cokecan', 'copy-that-floppy', 'hotdog'];

    for (let i = 0; i < frames.length; ++i)
    {
        this.tilesprites[i] = this.add.tileSprite(i * 160, 0, 160, 600, 'atlas', frames[i]);
        this.tilesprites[i].setOrigin(0)
        this.tilesprites[i].setTint(0xff00ff, 0xffff00, 0x0000ff, 0xff0000);
    }
}

Анимация движения текстуры

Метод update вызывается каждый кадр и отвечает за анимацию. Мы используем переменную `x` со значением 1 и инвертируем ее после каждого спрайта, умножая на -1. Это создает эффект "волны": текстуры двигаются в противоположных направлениях.

Свойства tilePositionX и tilePositionY управляют смещением текстуры внутри TileSprite. Их увеличение на `x` приводит к плавному движению, имитирующему прокрутку или поток. Это особенно полезно для создания бесконечных фонов или динамических узоров.

update ()
{
    let x = 1;

    for (var i = 0; i < this.tilesprites.length; ++i)
    {
        this.tilesprites[i].tilePositionX += x;
        this.tilesprites[i].tilePositionY += x;
        x *= -1;
    }
}

Конфигурация игры

Объект config определяет основные настройки игры. Мы используем Phaser.WEBGL для рендеринга, что обеспечивает лучшую производительность для графических эффектов. Размеры холста — 800x600 пикселей, цвет фона — темно-серый (#2d2d2d). Параметр parent указывает ID HTML-элемента для встраивания игры. Сцена Example передается как класс для инициализации.

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

Затем создается экземпляр игры new Phaser.Game(config), который запускает весь процесс.

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

Использование TileSprite с оттенками и анимацией текстуры открывает широкие возможности для визуального дизайна в Phaser 3. Вы можете экспериментировать: измените цвета в setTint для создания разных градиентов, используйте другие кадры из атласа, варьируйте скорость движения через множитель для `x, или добавьте взаимодействие с пользователем, например, изменяяtilePosition` по клику. Также попробуйте комбинировать несколько TileSprite для сложных фоновых композиций.