Точка привязки anchor у спрайтов

В библиотеке PixiJS спрайт — это основной графический объект, который отображает текстуры на сцене. Одним из ключевых свойств спрайта является anchor, задающий точку привязки (pivot) относительно текстуры. Это свойство определяет, какая часть спрайта будет соответствовать его координатам (x, y) на контейнере или сцене.

Свойство anchor

Свойство anchor является объектом типа PIXI.ObservablePoint и имеет два компонента: x и y. Значения выражаются в долях от ширины и высоты текстуры:

  • anchor.x = 0 — точка привязки слева.
  • anchor.x = 0.5 — точка привязки по центру по горизонтали.
  • anchor.x = 1 — точка привязки справа.
  • anchor.y = 0 — точка привязки сверху.
  • anchor.y = 0.5 — точка привязки по центру по вертикали.
  • anchor.y = 1 — точка привязки снизу.
const sprite = PIXI.Sprite.from('character.png');

// Установка точки привязки по центру спрайта
sprite.anchor.set(0.5, 0.5);

// Альтернатива — задаём по отдельности
sprite.anchor.x = 0.5;
sprite.anchor.y = 0.5;

Точка привязки влияет на все трансформации спрайта: позицию, масштаб, вращение и взаимодействие с событиями.

Влияние anchor на позицию и вращение

Центрирование спрайта

Если установить anchor в (0.5, 0.5), координаты спрайта будут соответствовать его центру. Это удобно для вращения:

sprite.anchor.set(0.5);
sprite.position.set(400, 300);
sprite.rotation = Math.PI / 4; // вращение вокруг центра

Без смещения точки привязки вращение будет происходить относительно верхнего левого угла спрайта, что часто неудобно для динамической анимации.

Смещение относительно верхнего левого угла

Точка привязки (0,0) оставляет спрайт “привязанным” к верхнему левому углу. Это полезно при позиционировании по сетке или для интерфейсных элементов:

sprite.anchor.set(0, 0);
sprite.position.set(50, 50); // верхний левый угол спрайта в точке (50, 50)

Использование anchor для анимаций и эффекта масштабирования

Точка привязки позволяет создавать сложные эффекты. Например, для анимации “вырастания” спрайта из центра экрана:

sprite.anchor.set(0.5);
sprite.position.set(400, 300);
sprite.scale.set(0);

gsap.to(sprite.scale, { x: 1, y: 1, duration: 1, ease: "back.out(1.7)" });

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

Привязка для игровых объектов и персонажей

В игровых сценах часто требуется, чтобы спрайт “вставал” на платформу или землю. Для этого anchor задается по нижнему краю:

sprite.anchor.set(0.5, 1); // центр по горизонтали, низ по вертикали
sprite.position.set(400, 500); // нижняя часть спрайта на линии Y=500

Это облегчает управление столкновениями и гравитацией, так как координата y всегда соответствует “ступням” персонажа.

Anchor и контейнеры

Anchor работает независимо от контейнера, но влияет на локальные координаты спрайта внутри него. При вращении контейнера спрайт будет вращаться вокруг своей точки привязки:

const container = new PIXI.Container();
container.addChild(sprite);

sprite.anchor.set(0.5, 0.5);
sprite.position.set(100, 100);

container.rotation = Math.PI / 6; // вращение всего контейнера

Важно помнить, что anchor задаёт смещение только внутри спрайта, а не глобально на сцене. Для глобальной коррекции положения нужно комбинировать anchor и позицию спрайта.

Итоговые рекомендации по использованию anchor

  • Для центрального вращения и масштабирования использовать (0.5, 0.5).
  • Для выравнивания по верхнему левому углу использовать (0, 0).
  • Для позиционирования на “земле” или платформе использовать (0.5, 1).
  • Anchor можно менять динамически для анимаций, но стоит помнить, что изменение anchor смещает визуальную позицию спрайта, поэтому позицию иногда нужно корректировать после изменения anchor.

Anchor является фундаментальным инструментом при работе с PixiJS, обеспечивая контроль над трансформациями, позиционированием и интерактивностью спрайтов в 2D-сценах.

Оглавление