Масштабирование: свойства scale и scaleX, scaleY

В PixiJS объекты могут изменять свои размеры с помощью масштабирования, что позволяет динамически изменять визуальный вид спрайтов, контейнеров и графических примитивов без изменения исходных текстур. Основными свойствами для управления масштабом являются scale, scale.x (или scaleX) и scale.y (или scaleY).

Свойство scale

Свойство scale представляет собой объект типа PIXI.ObservablePoint, содержащий значения по осям X и Y. Оно задаёт коэффициенты масштабирования относительно исходных размеров объекта:

sprite.scale.x = 2; // Увеличение ширины в 2 раза
sprite.scale.y = 0.5; // Уменьшение высоты в 2 раза

Альтернативно, можно использовать присвоение нового объекта:

sprite.scale.set(1.5, 1.5); // Масштабирование по обеим осям одинаково

При указании одного аргумента в методе set, масштаб применяется одинаково по обеим осям:

sprite.scale.set(2); // Удвоение размеров по X и Y

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

  • Значение 1 соответствует исходному размеру.
  • Значение 0 делает объект невидимым.
  • Значение <1 уменьшает объект, значение >1 увеличивает.
  • Отрицательные значения зеркально отражают объект по соответствующей оси.

Свойства scaleX и scaleY

Хотя в PixiJS нет прямых свойств scaleX и scaleY у объектов, их часто используют как сокращённые алиасы через sprite.scale.x и sprite.scale.y. В современных проектах можно создать геттеры и сеттеры для удобства:

Object.defineProperty(sprite, 'scaleX', {
    get: () => sprite.scale.x,
    set: (value) => { sprite.scale.x = value; }
});

Object.defineProperty(sprite, 'scaleY', {
    get: () => sprite.scale.y,
    set: (value) => { sprite.scale.y = value; }
});

sprite.scaleX = 3; // Увеличение ширины в 3 раза
sprite.scaleY = -1; // Отражение по вертикали

Такое решение упрощает код при работе с множеством объектов и повышает читаемость.

Масштабирование контейнеров

Контейнеры (PIXI.Container) также поддерживают свойства scale. При изменении масштаба контейнера все дочерние элементы масштабируются пропорционально:

const container = new PIXI.Container();
container.scale.set(0.5); // Уменьшение всех дочерних спрайтов вдвое

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

Влияние pivot и anchor

Масштабирование всегда происходит относительно точки привязки:

  • У спрайтов используется anchor (точка внутри текстуры).
  • У контейнеров используется pivot (локальная точка отсчёта).
sprite.anchor.set(0.5); // Центр спрайта
sprite.scale.set(2);    // Увеличение относительно центра

Сдвиг pivot позволяет масштабировать объект относительно произвольной точки:

container.pivot.set(50, 50);
container.scale.set(2); // Увеличение относительно точки (50, 50)

Анимация масштаба

Масштаб часто анимируется для создания эффектов появления, пульсации или взрыва:

app.ticker.add(() => {
    sprite.scale.x += 0.01;
    sprite.scale.y += 0.01;
});

Для более сложных эффектов используют библиотеки анимации, такие как GSAP, напрямую изменяя свойства scale.x и scale.y.

Масштабирование и производительность

  • Масштабирование не требует перерисовки текстур, так как применяется к трансформации объекта.
  • Масштабирование больших контейнеров с множеством детей может повлиять на производительность, особенно при использовании PIXI.Graphics с множеством примитивов.
  • Оптимально комбинировать масштабирование с кэшированием в текстуру (cacheAsBitmap) для статичных объектов, чтобы снизить нагрузку на рендеринг.

Практические рекомендации

  1. Использовать scale.set(x, y) для одновременного задания обеих осей.
  2. Использовать anchor и pivot для контроля точки масштабирования.
  3. Избегать постоянного масштабирования больших контейнеров в реальном времени без необходимости.
  4. Применять отрицательные значения для зеркальных отражений без изменения текстуры.
  5. Для анимации и эффектов масштабирования комбинировать с прозрачностью, поворотом и позиционированием для динамичных визуальных решений.

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

Оглавление