Загрузка изображений и атласов

В Phaser 3 загрузка ресурсов является фундаментальным этапом разработки игр. Без корректной загрузки изображений, спрайтов и атласов невозможно создать полноценный игровой мир. Все ресурсы загружаются через объект this.load внутри сцены, обычно в методе preload().

preload() {
    this.load.image('background', 'assets/background.png');
    this.load.spritesheet('player', 'assets/player.png', {
        frameWidth: 32,
        frameHeight: 48
    });
}

Ключевые моменты:

  • this.load.image(key, url) — загружает одно изображение.
  • this.load.spritesheet(key, url, {frameWidth, frameHeight}) — загружает спрайт-лист, разбивая изображение на кадры заданного размера.
  • key — уникальный идентификатор ресурса, используемый при создании объектов.

Загрузка атласов

Атлас текстур представляет собой один файл изображения и файл описания (JSON), который задаёт расположение и размеры отдельных спрайтов. Использование атласов снижает количество HTTP-запросов и оптимизирует производительность.

preload() {
    this.load.atlas('characters', 'assets/characters.png', 'assets/characters.json');
}

Объяснение параметров:

  • key — уникальное имя атласа.
  • textureURL — путь к изображению атласа.
  • atlasDataURL — путь к JSON-файлу с данными о кадрах.

Структура JSON для атласов

JSON может быть создан вручную или экспортирован из редакторов вроде TexturePacker. Пример простого формата:

{
  "frames": {
    "hero_idle_1": { "frame": {"x":0,"y":0,"w":32,"h":48} },
    "hero_idle_2": { "frame": {"x":32,"y":0,"w":32,"h":48} }
  }
}

Особенности:

  • Каждый кадр имеет уникальное имя.
  • x, y — координаты верхнего левого угла кадра на изображении.
  • w, h — ширина и высота кадра.

Загрузка анимаций через атласы

Анимации создаются на основе кадров, заданных в атласе. Метод this.anims.create формирует последовательности для спрайтов.

create() {
    this.anims.create({
        key: 'hero_idle',
        frames: this.anims.generateFrameNames('characters', {
            prefix: 'hero_idle_',
            start: 1,
            end: 2
        }),
        frameRate: 5,
        repeat: -1
    });

    const hero = this.add.sprite(100, 200, 'characters', 'hero_idle_1');
    hero.play('hero_idle');
}

Пояснения:

  • prefix и start/end позволяют автоматически собрать последовательность кадров.
  • frameRate — количество кадров в секунду.
  • repeat: -1 — бесконечное повторение анимации.

Загрузка аудио и других ресурсов

Phaser поддерживает множество типов ресурсов, включая аудио и тайлы:

preload() {
    this.load.audio('bg_music', ['assets/bg_music.mp3', 'assets/bg_music.ogg']);
    this.load.tilemapTiledJSON('level1', 'assets/level1.json');
}
  • Аудио: массив форматов обеспечивает кросс-браузерную совместимость.
  • Tilemap: JSON, описывающий уровень для Phaser.Tilemaps.

Контроль загрузки

Для отображения прогресса загрузки используется событие progress:

preload() {
    let progressBar = this.add.graphics();

    this.load.on('progress', (value) => {
        progressBar.clear();
        progressBar.fillStyle(0xffffff, 1);
        progressBar.fillRect(0, 200, 800 * value, 50);
    });
}

Ключевые события загрузки:

  • progress — значение от 0 до 1, показывает общий прогресс.
  • filecomplete — срабатывает после загрузки отдельного файла.
  • complete — все ресурсы загружены, можно переходить к create().

Организация ресурсов

  • Разделение спрайтов, фонов, атласов и аудио по папкам облегчает поддержку.
  • Использование уникальных ключей для всех ресурсов предотвращает конфликты.
  • Объединение мелких изображений в атлас снижает нагрузку на GPU.

Особенности кэширования

Phaser автоматически кэширует все загруженные ресурсы. Повторная загрузка с тем же ключом не требуется и может привести к ошибке. Для очистки кэша используются методы:

this.textures.remove('characters'); // удаляет текстуру
this.cache.json.remove('level1');   // удаляет JSON

Резюме по загрузке атласов и изображений

  • Использование атласов повышает производительность.
  • JSON-файлы определяют структуру кадров.
  • Анимации строятся на основе кадров атласа.
  • Контроль прогресса и событий загрузки обеспечивает плавный старт игры.
  • Четкая организация ресурсов и уникальные ключи упрощают масштабирование проектов.

Знание этих инструментов позволяет создавать сложные игровые сцены с большим количеством спрайтов и анимаций без потери производительности.

Оглавление