Базовые пути и кросс-доменная загрузка

Phaser — это мощная библиотека для создания 2D-игр на JavaScript, предоставляющая удобные инструменты для работы с графикой, анимацией и взаимодействием с пользователем. Одним из ключевых элементов является система загрузки ресурсов, таких как изображения, спрайты, аудио и данные.

Загрузка ресурсов в Phaser осуществляется через объект this.load внутри сцены. Этот объект содержит методы для загрузки различных типов данных:

  • this.load.image(key, url) — загружает изображение по указанному URL и присваивает ему ключ key для последующего использования.
  • this.load.spritesheet(key, url, { frameWidth, frameHeight }) — загружает спрайт-лист с указанием размеров каждого кадра.
  • this.load.audio(key, urls) — загружает аудиофайл, поддерживает массив URL для разных форматов (например, mp3 и ogg).
  • this.load.json(key, url) — загружает JSON-файл с данными, пригодный для конфигураций или уровня игры.

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

Асинхронная природа загрузки

Phaser обрабатывает загрузку асинхронно. Для управления процессом используются события объекта LoaderPlugin:

  • this.load.on('progress', callback) — вызывается с прогрессом загрузки в диапазоне от 0 до 1.
  • this.load.on('filecomplete', callback) — срабатывает по завершении загрузки конкретного файла.
  • this.load.on('complete', callback) — вызывается после завершения загрузки всех ресурсов сцены.

Пример отслеживания прогресса:

this.load.on('progress', function (value) {
    console.log(`Загрузка: ${Math.round(value * 100)}%`);
});
this.load.on('complete', function () {
    console.log('Все ресурсы загружены');
});

Базовые пути

Phaser позволяет задать базовый путь к ресурсам, чтобы не указывать полный URL для каждого файла. Для этого используется свойство this.load.setBaseURL(url):

this.load.setBaseURL('https://example.com/assets/');
this.load.image('player', 'sprites/player.png'); // Полный путь: https://example.com/assets/sprites/player.png

Базовый путь особенно удобен при работе с большим количеством ресурсов, расположенных на одном сервере. Он может быть абсолютным (с указанием протокола и домена) или относительным (относительно корня проекта).

Кросс-доменная загрузка

При работе с внешними ресурсами часто возникает необходимость загружать файлы с другого домена. По умолчанию браузеры применяют политику CORS, и если сервер не разрешает кросс-доменные запросы, загрузка ресурсов может быть заблокирована.

Phaser поддерживает кросс-доменную загрузку через настройку свойства crossOrigin:

this.load.setCORS('anonymous'); // или 'use-credentials'
this.load.image('background', 'https://cdn.example.com/bg.png');

Параметр 'anonymous' позволяет загружать изображения без передачи учетных данных, что подходит для большинства публичных ресурсов. 'use-credentials' требует наличия заголовка Access-Control-Allow-Credentials на сервере и используется, когда ресурсы защищены и необходима авторизация.

Для аудио и видео также возможно указание кросс-домена через дополнительные параметры, передаваемые в методы загрузки:

this.load.audio('theme', [
    'https://cdn.example.com/audio/theme.mp3',
    'https://cdn.example.com/audio/theme.ogg'
], { crossOrigin: 'anonymous' });

Организация ресурсов и относительные пути

Часто проект содержит папки с разными типами ресурсов: изображения, аудио, шрифты, данные. Для удобства можно задать несколько базовых путей и комбинировать их с относительными URL:

this.load.setBaseURL('https://cdn.example.com/assets/');
this.load.image('enemy', 'sprites/enemy.png');       // assets/sprites/enemy.png
this.load.audio('hit', 'sounds/hit.wav');           // assets/sounds/hit.wav
this.load.json('level1', 'data/level1.json');       // assets/data/level1.json

Это упрощает перенос проекта на другой сервер или использование разных серверов для статических ресурсов.

Преимущества правильной организации загрузки

  • Повышение производительности — ресурсы загружаются централизованно и кэшируются.
  • Удобство сопровождения — легко менять пути и структуру ресурсов без изменения кода сцены.
  • Кросс-платформенность — корректная работа с внешними CDN и поддержка CORS.

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

Интеграция с Preloader сценой

Для крупных проектов рекомендуется создавать отдельную Preloader сцену, которая отвечает за загрузку всех ресурсов перед запуском основной сцены:

class Preloader extends Phaser.Scene {
    constructor() {
        super({ key: 'Preloader' });
    }

    preload() {
        this.load.setBaseURL('https://cdn.example.com/assets/');
        this.load.setCORS('anonymous');

        this.load.image('player', 'sprites/player.png');
        this.load.audio('theme', ['audio/theme.mp3', 'audio/theme.ogg']);

        this.load.on('progress', (value) => {
            console.log(`Загрузка: ${Math.round(value * 100)}%`);
        });
    }

    create() {
        this.scene.start('MainScene');
    }
}

Такой подход обеспечивает плавное и предсказуемое поведение игры, минимизирует задержки и ошибки при доступе к ресурсам.

Оглавление