Свойство anchor и выравнивание

В основе позиционирования спрайтов в PixiJS лежит понимание того, от какой точки объекта рассчитываются координаты. По умолчанию координаты x и y указывают на левый верхний угол текстуры. Такое поведение не всегда удобно: вращение, масштабирование и выравнивание относительно центра требуют иной системы отсчёта. Для этого используется свойство anchor.

Что такое `anchor`

anchor — это точка привязки спрайта, определяющая, какая часть текстуры считается его координатной точкой.

Свойство доступно у PIXI.Sprite и представляет собой объект ObservablePoint с двумя значениями:

sprite.anchor.x
sprite.anchor.y

или кратко:

sprite.anchor.set(x, y);

Значения anchor находятся в диапазоне от 0 до 1:

Значение	Значение по оси	Описание
`0`	начало	левый или верхний край
`0.5`	центр	центр текстуры
`1`	конец	правый или нижний край

Поведение по умолчанию

По умолчанию:

sprite.anchor.set(0, 0);

Это означает:

координаты sprite.x и sprite.y соответствуют левому верхнему углу
вращение происходит вокруг этой точки
масштабирование происходит относительно этой точки

Такое поведение удобно при верстке интерфейсов, но неудобно при работе с игровыми объектами.

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

Наиболее распространённое использование:

sprite.anchor.set(0.5);

Теперь:

координаты указывают на центр изображения
вращение происходит вокруг центра
объект симметрично масштабируется

Это особенно важно для:

персонажей
пуль
объектов, которые вращаются
UI-элементов, центрируемых на экране

Пример влияния `anchor` на позиционирование

Пусть текстура имеет размер 100×100 пикселей.

anchor = (0, 0)

(x, y)
┌───────────────
│
│
│

Точка (x, y) находится в левом верхнем углу.

anchor = (0.5, 0.5)

        (x, y)
          ●
   ┌───────────────
   │
   │

Точка (x, y) находится в центре.

Влияние на вращение (`rotation`)

Вращение всегда происходит вокруг точки anchor.

sprite.rotation = Math.PI / 4;

Если anchor = (0, 0), объект будет вращаться вокруг верхнего левого угла, описывая круг.

Если anchor = (0.5, 0.5), вращение будет естественным — вокруг центра.

Для анимаций вращения центрирование практически обязательно.

Влияние на масштабирование (`scale`)

Масштабирование также зависит от точки привязки:

sprite.scale.set(2);

При anchor = (0, 0) объект “растёт” вправо и вниз.
При anchor = (0.5, 0.5) объект увеличивается симметрично.

Это критично при создании эффектов:

пульсация
zoom-in
всплывающие элементы
UI-кнопки

Выравнивание относительно экрана

Часто требуется центрировать объект на сцене:

sprite.anchor.set(0.5);
sprite.x = app.screen.width / 2;
sprite.y = app.screen.height / 2;

Если не установить anchor = 0.5, спрайт окажется смещён.

Выравнивание по краям

Правый нижний угол экрана

sprite.anchor.set(1, 1);
sprite.x = app.screen.width;
sprite.y = app.screen.height;

Теперь объект будет “прижат” к правому нижнему углу.

Верх по центру

sprite.anchor.set(0.5, 0);
sprite.x = app.screen.width / 2;
sprite.y = 0;

Частичное смещение точки привязки

Значения anchor не обязаны быть только 0, 0.5 или 1.

Пример:

sprite.anchor.set(0.3, 0.8);

Это используется для:

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

Отличие `anchor` от `pivot`

В библиотеке PixiJS существуют два похожих свойства:

Свойство	Работает в	Измеряется в	Назначение
`anchor`	`Sprite`	долях (0–1)	точка привязки текстуры
`pivot`	`DisplayObject`	пикселях	смещение системы координат

Главное отличие

anchor работает относительно размеров текстуры
pivot задаётся в пикселях

Пример pivot:

sprite.pivot.set(50, 50);

Если текстура 100×100, это аналогично anchor.set(0.5).

Однако pivot применяется ко всем объектам, включая контейнеры (Container), а anchor — только к спрайтам.

Anchor и иерархия контейнеров

anchor влияет только на конкретный спрайт и не изменяет координатную систему родительского контейнера.

container.addChild(sprite);

Изменение sprite.anchor:

не влияет на container
не изменяет позицию других объектов
не смещает локальную систему координат контейнера

Типичные ошибки

1. Установка anchor после позиционирования

sprite.x = 400;
sprite.y = 300;
sprite.anchor.set(0.5);

После изменения anchor визуальное положение изменится, потому что точка отсчёта сместилась.

Правильный порядок:

sprite.anchor.set(0.5);
sprite.x = 400;
sprite.y = 300;

2. Путаница anchor и pivot

anchor не существует у Container.

Попытка:

container.anchor.set(0.5);

вызовет ошибку.

3. Неправильное центрирование UI

Без учёта anchor элементы интерфейса часто оказываются смещёнными на половину своей ширины или высоты.

Взаимодействие с hitArea

Точка anchor влияет и на интерактивную область:

sprite.eventMode = 'static';
sprite.on('pointerdown', handler);

Область клика будет рассчитываться с учётом точки привязки. При центрированном anchor область также центрируется.

Работа с текстом и графикой

У PIXI.Text нет свойства anchor, но есть pivot.

Чтобы центрировать текст:

text.pivot.set(text.width / 2, text.height / 2);
text.x = 400;
text.y = 300;

Начиная с более поздних версий библиотеки текст может поддерживать anchor, если используется как спрайт через Text-наследование.

Динамическое изменение anchor

anchor можно менять во время работы приложения:

app.ticker.add(() => {
    sprite.anchor.x = Math.abs(Math.sin(Date.now() * 0.001));
});

Это создаёт нестандартные визуальные эффекты, так как точка вращения постоянно изменяется.

Практические сценарии использования

Игровой персонаж

player.anchor.set(0.5, 1);

Нижняя центральная точка — логичная опора для персонажа, стоящего на земле.

Индикатор здоровья над объектом

healthBar.anchor.set(0.5, 1);
healthBar.y = -20;

Прицел

crosshair.anchor.set(0.5);
crosshair.position.copyFrom(app.renderer.plugins.interaction.mouse.global);

Связь anchor с матрицей трансформации

Внутренне anchor влияет на вычисление локальной матрицы преобразования. Смещение точки привязки добавляется к трансформации перед применением:

масштаба
вращения
позиции

Таким образом, anchor — это часть геометрической модели объекта, а не просто визуальный сдвиг.