Кадрирование: frame, trim и orig

В PixiJS при работе со спрайтами и текстурами важную роль играет управление кадрами текстур. Понимание свойств frame, trim и orig позволяет точно контролировать отображение изображений, особенно при использовании спрайт-листов и атласов текстур. Эти свойства задают область текстуры, которую следует рендерить, а также корректируют позиционирование спрайта на экране.

frame: область текстуры

Свойство frame объекта Texture определяет прямоугольную область исходного изображения, которая будет использоваться для создания спрайта. Оно задаётся объектом типа Rectangle с координатами x, y, width, height:

const frame = new PIXI.Rectangle(32, 16, 64, 64);
const texture = new PIXI.Texture(baseTexture, frame);
const sprite = new PIXI.Sprite(texture);
  • x, y — координаты верхнего левого угла прямоугольника внутри базовой текстуры (BaseTexture).
  • width, height — размеры области кадра.

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

orig: исходный размер спрайта

Свойство orig (original) указывает оригинальный размер изображения до обрезки. Даже если текстура была обрезана или сжата, orig сохраняет реальные размеры объекта, необходимые для правильного позиционирования:

const texture = PIXI.Texture.from("hero.png");
console.log(texture.orig.width, texture.orig.height);
  • Используется при вычислении центровки спрайта, позиционировании и анимации.
  • Позволяет корректно рассчитывать координаты якоря (anchor), даже если frame меньше исходного изображения.

Например, если спрайт был вырезан из большого атласа, orig гарантирует, что отсутствующие пиксели будут учтены при рендеринге, предотвращая смещение спрайта на сцене.

trim: обрезанная область внутри оригинала

Свойство trim описывает смещение видимой области относительно исходного изображения, когда текстура была обрезана для экономии памяти:

texture.trim = new PIXI.Rectangle(8, 8, 48, 48);
  • x, y — смещение кадра внутри оригинального изображения (orig).
  • width, height — размеры видимой области.

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

  1. Позиционировании спрайта в сцене.
  2. Вычислении центра спрайта.
  3. Анимации, когда кадры имеют разные размеры.

Если текстура не обрезалась, trim равен null. В противном случае, при рендеринге PixiJS добавляет смещение, чтобы спрайт визуально занимал то же место, что и исходное изображение.

Взаимосвязь frame, orig и trim

  • frame — область текстуры для рендеринга.
  • orig — исходный размер изображения.
  • trim — смещение и размеры обрезанной области внутри orig.

PixiJS рассчитывает итоговое положение спрайта по формуле:

displayX = sprite.position.x - trim.x
displayY = sprite.position.y - trim.y

При этом frame определяет, какие пиксели брать из BaseTexture, а trim и orig гарантируют, что спрайт не сместится относительно якоря и других элементов сцены.

Применение на практике

Спрайт-листы и анимация

const sheet = PIXI.BaseTexture.from("spritesheet.png");
const frames = [
    new PIXI.Texture(sheet, new PIXI.Rectangle(0, 0, 32, 32)),
    new PIXI.Texture(sheet, new PIXI.Rectangle(32, 0, 32, 32)),
    new PIXI.Texture(sheet, new PIXI.Rectangle(64, 0, 32, 32))
];
const anim = new PIXI.AnimatedSprite(frames);
anim.animationSpeed = 0.1;
anim.play();

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

Обрезка для оптимизации текстур

При генерации атласов с помощью TexturePacker или аналогов, прозрачные пиксели обычно удаляются. В этом случае PixiJS создаёт trim автоматически, что сокращает потребление видеопамяти, не нарушая визуальное расположение спрайта.

Рекомендации по использованию

  • Использовать frame для управления видимой областью без создания лишних текстур.
  • Сохранять orig для корректного позиционирования, особенно при анимации.
  • Доверять trim при обрезке текстур — PixiJS автоматически учитывает смещение.
  • Комбинировать эти свойства для спрайт-листов, чтобы анимации выглядели плавными и ровными, даже при разном размере кадров.

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

Оглавление