Класс Texture и его создание

Класс Texture является фундаментальным элементом рендеринга в библиотеке PixiJS. Он представляет собой текстуру изображения, которую можно использовать для спрайтов, тайлов и других визуальных объектов. Основная задача Texture — хранение и управление графическим содержимым, оптимизированным для WebGL и Canvas.

Текстура в PixiJS создаётся на основе источника (изображение, канвас или другое текстурное представление) и предоставляет доступ к ключевым свойствам, таким как размер, рамки (frame) и область обрезки (trim). Благодаря этому возможно эффективное использование спрайт-листов и атласов.

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

Из изображения

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

const texture = PIXI.Texture.from('assets/sprite.png');

Метод Texture.from автоматически создаёт текстуру из URL или HTMLImageElement. Если изображение ещё не загружено, PixiJS использует встроенный менеджер загрузки, создавая текстуру после завершения загрузки.

Из канваса или графики

Текстуру можно создать из HTMLCanvasElement или PIXI.Graphics:

const graphics = new PIXI.Graphics();
graphics.beginFill(0xff0000);
graphics.drawRect(0, 0, 100, 100);
graphics.endFill();

const texture = PIXI.Texture.from(graphics.generateCanvasTexture());

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

Из спрайт-листа

Для работы с атласами спрайтов используется метод Texture.from с указанием имени фрейма:

const texture = PIXI.Texture.from('spritesheet.json#hero_idle');

Здесь spritesheet.json — JSON-атлас, а hero_idle — имя фрейма в атласе. PixiJS автоматически выделяет нужный прямоугольник изображения.

Основные свойства

  • baseTexture — ссылка на объект BaseTexture, который хранит данные изображения и параметры загрузки.
  • frame — объект Rectangle, определяющий область исходного изображения, используемую для текстуры.
  • width и height — размеры текстуры (с учётом обрезки).
  • trim — область текстуры, которая была обрезана для оптимизации (опционально).
  • valid — булевое значение, показывающее, готова ли текстура к использованию.

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

Методы управления текстурой

clone()

Создаёт копию текстуры с теми же параметрами, но отдельной ссылкой:

const cloneTexture = texture.clone();

Это полезно, если необходимо использовать одну и ту же базовую текстуру с разными рамками или параметрами.

update()

Принудительно обновляет текстуру, если содержимое источника изменилось:

texture.update();

Применяется, например, после динамического изменения канваса, связанного с текстурой.

destroy()

Очищает ресурсы, связанные с текстурой, освобождая память GPU:

texture.destroy({ baseTexture: true });

Важно управлять текстурами вручную при работе с большим количеством ресурсов, чтобы избежать утечек памяти.

Работа с BaseTexture

Каждая текстура основана на BaseTexture. Этот объект отвечает за сам источник изображения и может использоваться несколькими текстурами. Основные моменты:

  • Повторное использование: несколько текстур могут ссылаться на один BaseTexture, экономя память.
  • Настройки фильтрации: свойства scaleMode, mipmap и wrapMode влияют на визуальное качество при масштабировании и повторении текстуры.
  • События загрузки: BaseTexture генерирует события loaded и error, что упрощает асинхронную работу с ресурсами.

Пример создания BaseTexture вручную:

const base = new PIXI.BaseTexture.from('assets/texture.png');
const texture = new PIXI.Texture(base);

Использование текстур в спрайтах

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

const sprite = new PIXI.Sprite(texture);
sprite.x = 100;
sprite.y = 50;
app.stage.addChild(sprite);

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

const textures = [];
for (let i = 0; i < 4; i++) {
    textures.push(PIXI.Texture.from(`frame${i}.png`));
}
const animatedSprite = new PIXI.AnimatedSprite(textures);
animatedSprite.play();
app.stage.addChild(animatedSprite);

Оптимизация текстур

  • Атласы и спрайт-листы уменьшают количество загрузок и переключений текстур на GPU.
  • Обрезка (trim) позволяет сократить размеры текстур без потери визуального результата.
  • Повторное использование BaseTexture экономит память при одинаковых изображениях в разных объектах.
  • Удаление неиспользуемых текстур через destroy() предотвращает утечки памяти.

Класс Texture в PixiJS — ключевой инструмент для работы с графикой, предоставляющий гибкий и эффективный способ управления изображениями, фреймами и анимациями, с оптимизацией под GPU и асинхронную загрузку ресурсов.

Оглавление