Метод load: загрузка одиночного ресурса

В библиотеке PixiJS управление ресурсами строится вокруг класса Loader, который отвечает за асинхронную загрузку текстур, спрайтов, аудио и других данных, необходимых для работы приложения. Метод load используется для непосредственной загрузки ресурсов после их добавления в очередь.

Создание загрузчика

Для начала создается экземпляр загрузчика:

const loader = new PIXI.Loader();

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

Добавление ресурса

Перед вызовом load необходимо добавить ресурс в очередь. Для одиночного ресурса это делается с помощью метода add:

loader.add('background', 'images/background.png');
  • 'background' — уникальный ключ ресурса, через который к нему можно будет обратиться после загрузки.
  • 'images/background.png' — путь к файлу. Поддерживаются форматы PNG, JPG, GIF, JSON, SVG и другие.

Метод add также позволяет задавать дополнительные параметры, например, crossOrigin или loadType:

loader.add('sprite', 'images/character.png', { crossOrigin: 'anonymous' });

Вызов метода load

После добавления ресурса вызывается метод load, который запускает процесс загрузки:

loader.load((loader, resources) => {
    const background = new PIXI.Sprite(resources.background.texture);
    app.stage.addChild(background);
});

Параметры функции обратного вызова:

  • loader — сам экземпляр Loader, полезен для доступа к очереди и событиям.
  • resources — объект, содержащий загруженные ресурсы. Доступ к конкретному ресурсу осуществляется через ключ, указанный при add.

Работа с одиночными ресурсами

Для одиночного ресурса часто используют прямое создание спрайта:

const loader = new PIXI.Loader();

loader.add('logo', 'images/logo.png');

loader.load((loader, resources) => {
    const logoSprite = new PIXI.Sprite(resources.logo.texture);
    logoSprite.x = 100;
    logoSprite.y = 50;
    app.stage.addChild(logoSprite);
});

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

Обработка ошибок

Метод load позволяет также отлавливать ошибки при загрузке:

loader.add('enemy', 'images/enemy.png')
      .load((loader, resources) => {
          if (resources.enemy.error) {
              console.error('Ошибка загрузки ресурса:', resources.enemy.error);
              return;
          }
          const enemySprite = new PIXI.Sprite(resources.enemy.texture);
          app.stage.addChild(enemySprite);
      });

Каждый ресурс в объекте resources имеет свойство error, которое содержит информацию о проблеме при загрузке файла. Это особенно важно при работе с внешними URL или большим количеством ресурсов.

Использование событий загрузчика

Помимо коллбека load, можно использовать события onProgress и onError:

loader.add('background', 'images/background.png');

loader.onProgress.add((loader) => {
    console.log(`Загрузка: ${loader.progress}%`);
});

loader.onError.add((error, loader, resource) => {
    console.error('Ошибка загрузки ресурса:', resource.name, error);
});

loader.load((loader, resources) => {
    const background = new PIXI.Sprite(resources.background.texture);
    app.stage.addChild(background);
});
  • onProgress позволяет отслеживать прогресс загрузки.
  • onError автоматически срабатывает при ошибках и дает детальную информацию о проблемном ресурсе.

Советы по загрузке одиночных ресурсов

  • Для единичных изображений достаточно простого add + load.
  • Использование уникальных ключей облегчает доступ к ресурсам и предотвращает конфликт имен.
  • Асинхронный коллбек load гарантирует, что спрайт создается только после полной загрузки текстуры.
  • Для внешних URL рекомендуется указывать crossOrigin, чтобы избежать ошибок CORS.

Прямой доступ к текстуре

Даже без спрайта можно получить текстуру напрямую:

loader.add('icon', 'images/icon.png')
      .load((loader, resources) => {
          const texture = resources.icon.texture;
          // texture можно использовать для спрайтов, графики или фильтров
      });

Это особенно полезно, если требуется использовать одну текстуру в нескольких объектах или передавать её в шейдеры.

Итоговая структура загрузки одиночного ресурса

  1. Создание экземпляра PIXI.Loader.
  2. Добавление ресурса через add(key, url).
  3. Настройка событий onProgress, onError при необходимости.
  4. Вызов метода load с коллбеком.
  5. Создание спрайта или работы с текстурой после загрузки.

Метод load обеспечивает простой и надежный способ загрузки одиночных ресурсов, управляя асинхронностью и предоставляя доступ ко всем свойствам загруженного объекта через ключи. Это базовый строительный блок для любых приложений на PixiJS.

Оглавление