Создание из массива текстур

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

Основные понятия

Текстура (PIXI.Texture) — это объект, представляющий изображение, загруженное в виде ресурса. Использование текстур напрямую позволяет эффективно управлять памятью, так как одна текстура может применяться к нескольким спрайтам.

Массив текстур — это упорядоченный набор объектов PIXI.Texture. Массив позволяет создавать анимированные спрайты (PIXI.AnimatedSprite), где каждый кадр анимации соответствует одной текстуре.

Создание массива текстур

Массив текстур может формироваться различными способами:

1. С использованием отдельных файлов

Если изображения имеют последовательные имена (например, frame_01.png, frame_02.png), можно создавать массив через цикл:

const textures = [];
for (let i = 1; i <= 10; i++) {
    const frameNumber = i.toString().padStart(2, '0');
    textures.push(PIXI.Texture.from(`frame_${frameNumber}.png`));
}

В этом примере метод PIXI.Texture.from создаёт текстуру из указанного файла, а цикл формирует массив для анимации из 10 кадров.

2. С использованием спрайт-листов (spritesheet)

Спрайт-лист — это единое изображение, содержащее все кадры анимации, с описанием в JSON-файле. Подключение происходит через PIXI.Loader:

PIXI.Loader.shared.add('spritesheet', 'spritesheet.json').load((loader, resources) => {
    const sheet = resources.spritesheet.spritesheet;
    const textures = [];
    for (let frameName in sheet.textures) {
        textures.push(sheet.textures[frameName]);
    }
});

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

3. Динамическое создание текстур

Иногда необходимо генерировать текстуры на лету с использованием графики:

const textures = [];
for (let i = 0; i < 5; i++) {
    const graphics = new PIXI.Graphics();
    graphics.beginFill(0xff0000 * i);
    graphics.drawCircle(50, 50, 50);
    graphics.endFill();
    
    const texture = PIXI.RenderTexture.create({ width: 100, height: 100 });
    PIXI.Application.shared.renderer.render(graphics, texture);
    textures.push(texture);
}

Такой подход позволяет создавать анимации без загрузки внешних изображений, полностью через API PixiJS.

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

Создание PIXI.AnimatedSprite на основе массива текстур обеспечивает плавную анимацию:

const animatedSprite = new PIXI.AnimatedSprite(textures);
animatedSprite.animationSpeed = 0.1; // скорость анимации
animatedSprite.loop = true; // зацикливание
animatedSprite.play(); // запуск анимации

app.stage.addChild(animatedSprite);

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

  • animationSpeed — скорость смены кадров. Значение 1 соответствует стандартной скорости.
  • loop — если true, анимация повторяется бесконечно; если false, выполняется один цикл.
  • play() и stop() — методы управления воспроизведением.

Работа с динамическим обновлением массива текстур

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

animatedSprite.textures = newTextures;
animatedSprite.gotoAndPlay(0); // начать новую анимацию с первого кадра

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

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

  1. Кэширование текстур: повторное создание текстур из одного файла увеличивает расход памяти. Рекомендуется использовать PIXI.Texture.from и хранить текстуры для повторного использования.
  2. Спрайт-листы для большого количества кадров: уменьшают нагрузку на рендеринг и ускоряют загрузку.
  3. Удаление неиспользуемых текстур: освобождает GPU-память через texture.destroy(true).

Примеры применения

  • Анимация персонажей в играх (ходьба, прыжки, атаки)
  • Эффекты частиц и всплесков
  • Интерфейсные анимации (кнопки, индикаторы)
  • Генеративные анимации на основе графических примитивов

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

Оглавление