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

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

Создание динамичного фона — частая задача в разработке игр. Использование плиточных спрайтов (TileSprite) позволяет бесшовно заполнять большие области текстурой, экономя ресурсы и добавляя движению плавности. В этой статье мы разберем пример, который демонстрирует, как загрузить атлас текстур и анимировать несколько плиточных спрайтов, создавая простой, но живой фон для вашей игры.

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

Живой запуск

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

Исходный код

class Example extends Phaser.Scene
{
    iter = 0;
    images = [];

    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.images[i] = this.add.tileSprite(i * 160, 0, 160, 600, 'atlas', frames[i]);
            this.images[i].originX = 0;
            this.images[i].originY = 0;
        }
    }

    update ()
    {
        let x = 1;
        for (let i = 0; i < this.images.length; ++i)
        {
            this.images[i].tilePositionX += x;
            x *= -1;
        }
        this.iter += 0.01;
    }
}

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

const game = new Phaser.Game(config);

Загрузка ресурсов: подготовка атласа

Перед созданием спрайтов необходимо загрузить текстуры. В Phaser для этого используется метод 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');
}

Метод setBaseURL устанавливает базовый URL для всех последующих загрузок, что удобно, если ресурсы хранятся в одной директории. Метод load.atlas загружает сам атлас, принимая ключ 'atlas' (по нему мы будем обращаться к ресурсу), путь к изображению и путь к JSON-файлу с разметкой.

Создание плиточных спрайтов

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

create ()
{
    const frames = [ 'atari400', 'bunny', 'cokecan', 'copy-that-floppy', 'hotdog' ];
    for (let i = 0; i < frames.length; ++i)
    {
        this.images[i] = this.add.tileSprite(i * 160, 0, 160, 600, 'atlas', frames[i]);
        this.images[i].originX = 0;
        this.images[i].originY = 0;
    }
}

Каждый TileSprite создается с помощью this.add.tileSprite. Параметры: координаты X и Y, ширина, высота, ключ атласа и имя конкретного фрейма. Спрайты размещаются горизонтально с шагом в 160 пикселей. Установка originX и originY в 0 меняет точку привязки (origin) спрайта на его левый верхний угол, что упрощает выравнивание.

Анимация через смещение текстуры

Основная "магия" анимации происходит в методе update, который вызывается каждый кадр. Вместо перемещения самих спрайтов мы сдвигаем их текстуру, создавая эффект бесконечного прокручивания.

update ()
{
    let x = 1;
    for (let i = 0; i < this.images.length; ++i)
    {
        this.images[i].tilePositionX += x;
        x *= -1;
    }
    this.iter += 0.01;
}

Свойство tilePositionX объекта TileSprite определяет смещение текстуры по горизонтали. В цикле мы поочередно добавляем к нему +1 или -1 для каждого спрайта (переменная `x` меняет знак на каждой итерации). Это создает эффект движения текстур в разных направлениях, что визуально интереснее, чем однонаправленная прокрутка.

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

Весь пример завершается созданием экземпляра игры Phaser.Game с конфигурационным объектом. В нем задаются основные параметры, такие как тип рендерера, размеры холста и стартовая сцена.

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

const game = new Phaser.Game(config);

Ключевые параметры: type определяет рендерер (Canvas или WebGL), width и height — размеры игрового поля, backgroundColor — цвет фона, parent — ID HTML-элемента для встраивания игры, scene — класс стартовой сцены.

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

Плиточные спрайты — мощный инструмент для создания оптимизированных и анимированных фонов. Вы можете экспериментировать: изменять скорость анимации через tilePositionX/Y, использовать одну текстуру для создания бесшовного паттерна или комбинировать несколько TileSprite для сложных многослойных фонов с параллакс-эффектом.