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

Загрузка и управление текстурными атласами — ключевой навык для оптимизации игр. Этот пример демонстрирует работу с мульти-атласом, где метаданные и изображения разделены на несколько файлов. Мы разберем, как загрузить такой атлас и отобразить из него один спрайт, что особенно полезно для организации большого количества ассетов и ускорения загрузки.

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

Живой запуск

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

Исходный код


class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
        this.load.path = 'assets/atlas/';

        this.load.multiatlas('megaset', 'tp3-multi-atlas.json');
    }

    create ()
    {
        this.add.image(400, 300, 'megaset', 'hello');
    }
}

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

const game = new Phaser.Game(config);

Подготовка: загрузка мульти-атласа в `preload()`

Метод preload() — это место для загрузки всех необходимых ресурсов до старта сцены. Здесь мы используем this.load.multiatlas() для загрузки мульти-атласа.

Ключевые шаги: 1. Устанавливаем базовый URL и путь к папке с ассетами с помощью this.load.setBaseURL() и this.load.path. Это позволяет указывать относительные пути для файлов. 2. Загружаем сам мульти-атлас. Первый аргумент ('megaset') — это ключ, по которому атлас будет доступен в кеше текстуры. Второй аргумент ('tp3-multi-atlas.json') — это путь к JSON-файлу, который описывает структуру атласа и ссылается на файлы изображений.

preload ()
{
    this.load.setBaseURL('https://raw.githubusercontent.com/phaserjs/examples/master/public/');
    this.load.path = 'assets/atlas/';

    this.load.multiatlas('megaset', 'tp3-multi-atlas.json');
}

Создание спрайта в `create()`

После успешной загрузки всех ресурсов в preload() вызывается метод create(). Здесь мы создаем игровые объекты, используя загруженные текстуры.

Для создания изображения (спрайта) мы используем this.add.image(). Этот метод принимает четыре аргумента: 1. X-координата (400) — положение спрайта по горизонтали. 2. Y-координата (300) — положение спрайта по вертикали. 3. Ключ текстуры ('megaset') — тот самый ключ, под которым мы загрузили мульти-атлас. 4. Имя кадра ('hello') — имя конкретного спрайта внутри атласа, как оно указано в JSON-файле мульти-атласа.

create ()
{
    this.add.image(400, 300, 'megaset', 'hello');
}

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

Phaser-игра инициализируется через экземпляр класса Phaser.Game, который принимает объект конфигурации. Это настройки всего приложения.

Основные параметры конфига: - type: Определяет рендерер (Phaser.AUTO позволяет Phaser выбрать между WebGL и Canvas). - parent: ID HTML-элемента, в который будет встроен canvas игры. - width и height: Размеры области отрисовки (viewport). - scene: Класс сцены, которая будет запущена первой. В нашем случае это Example.

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

const game = new Phaser.Game(config);

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

Вы успешно загрузили мульти-атлас и отобразили из него спрайт. Это база для работы с графикой. Для экспериментов попробуйте: 1. Изменить координаты в this.add.image() и переместить спрайт. 2. Загрузить другой мульти-атлас и отобразить другой кадр из него, изменив последний аргумент на другое имя, например, 'star'. 3. Использовать this.physics.add.image() вместо this.add.image(), чтобы добавить спрайту физическое тело и управлять им с помощью законов физики.