Загрузка текстуры из URL

В PixiJS загрузка текстур из внешних ресурсов осуществляется с помощью класса PIXI.Texture и менеджера загрузки PIXI.Loader. Текстура представляет собой графический объект, который может быть использован для спрайтов, контейнеров и других визуальных элементов. Работа с URL позволяет динамически подгружать изображения с сервера или CDN, что особенно важно для веб-игр и интерактивных приложений.

Использование `PIXI.Texture.from`

Самый простой способ создать текстуру из URL — метод PIXI.Texture.from(url). Он автоматически загружает изображение и создает текстуру, готовую к использованию:

const texture = PIXI.Texture.from('https://example.com/image.png');
const sprite = new PIXI.Sprite(texture);

app.stage.addChild(sprite);

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

Если изображение уже загружено в кэш браузера, PixiJS использует его напрямую, что ускоряет работу.
Метод from поддерживает форматы PNG, JPG, GIF и другие, совместимые с <img> в браузере.
Для управления асинхронной загрузкой можно подписаться на событие baseTexture.on('loaded', callback).

Асинхронная загрузка через `PIXI.Loader`

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

const loader = new PIXI.Loader();

loader.add('hero', 'https://example.com/hero.png')
      .add('background', 'https://example.com/bg.jpg');

loader.load((loader, resources) => {
    const heroSprite = new PIXI.Sprite(resources.hero.texture);
    const bgSprite = new PIXI.Sprite(resources.background.texture);

    app.stage.addChild(bgSprite, heroSprite);
});

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

loader.add(name, url) — добавляет ресурс с уникальным именем.
Все ресурсы доступны через resources[name].texture.
Можно подписываться на события:
- loader.onProgress.add(callback) — прогресс загрузки.
- loader.onError.add(callback) — обработка ошибок.
- loader.onLoad.add(callback) — каждый загруженный ресурс.

Работа с кэшем текстур

PixiJS автоматически кэширует загруженные текстуры. Это значит, что повторное создание текстуры по тому же URL не приведет к новой загрузке изображения, а возьмёт уже существующую текстуру из памяти:

const texture1 = PIXI.Texture.from('https://example.com/item.png');
const texture2 = PIXI.Texture.from('https://example.com/item.png');

console.log(texture1 === texture2); // true

Важные моменты:

Кэш хранится в PIXI.utils.TextureCache.
Для удаления текстуры и освобождения памяти можно использовать texture.destroy(true).

Загрузка текстур с атласов и спрайт-листов

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

const loader = new PIXI.Loader();
loader.add('atlas', 'https://example.com/spritesheet.json');

loader.load((loader, resources) => {
    const frames = [];
    for (let i = 0; i < 4; i++) {
        const texture = PIXI.Texture.from(`hero${i}.png`);
        frames.push(texture);
    }

    const animatedSprite = new PIXI.AnimatedSprite(frames);
    animatedSprite.animationSpeed = 0.1;
    animatedSprite.play();

    app.stage.addChild(animatedSprite);
});

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

JSON-атлас описывает позиции и размеры каждого спрайта в текстуре.
Позволяет экономить память и повышает производительность при работе с множеством объектов.

Обработка ошибок при загрузке

При загрузке внешних текстур важно учитывать возможные ошибки:

const loader = new PIXI.Loader();

loader.add('image', 'https://example.com/missing.png');

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

Рекомендации:

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

Поддержка различных форматов и оптимизация

SVG: можно загружать через Texture.from, но важно учитывать, что PixiJS рендерит SVG как растровое изображение.
WebP: поддерживается большинством современных браузеров, позволяет снизить размер текстур.
Кэширование: использовать повторное использование текстур, чтобы уменьшить нагрузку на память и ускорить рендеринг.

Динамическая замена текстуры

Спрайты могут менять текстуру во время работы приложения:

const sprite = new PIXI.Sprite(PIXI.Texture.from('https://example.com/image1.png'));

// Позже
sprite.texture = PIXI.Texture.from('https://example.com/image2.png');

Преимущества:

Позволяет создавать эффекты смены состояний или анимации без создания нового спрайта.
Работает с текстурами, загруженными через Loader или напрямую через Texture.from.

Использование промисов для загрузки

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

function loadTexture(url) {
    return new Promise((resolve, reject) => {
        const texture = PIXI.Texture.from(url);
        texture.baseTexture.on('loaded', () => resolve(texture));
        texture.baseTexture.on('error', (err) => reject(err));
    });
}

loadTexture('https://example.com/image.png')
    .then(texture => {
        const sprite = new PIXI.Sprite(texture);
        app.stage.addChild(sprite);
    })
    .catch(err => console.error('Ошибка загрузки текстуры:', err));