Преобразование координат между пространствами

В PixiJS каждая сцена строится на иерархии контейнеров, где каждый Container имеет собственную систему координат. Корни этой иерархии находятся в Application.stage, которая представляет глобальное пространство сцены. Любой дочерний объект располагается относительно своего родителя, что создаёт локальные координаты.

  • Локальные координаты (x, y объекта) задают положение относительно родителя.
  • Глобальные координаты описывают положение объекта относительно сцены (stage).
  • Преобразование координат между локальной и глобальной системами необходимо для точного позиционирования, обработки событий и взаимодействия между объектами.

Методы преобразования координат

toGlobal

Метод toGlobal преобразует точку из локальной системы координат объекта в глобальную.

const point = new PIXI.Point(50, 30);
const globalPoint = sprite.toGlobal(point);
console.log(globalPoint.x, globalPoint.y);
  • Параметр: объект PIXI.Point в локальных координатах.
  • Возвращаемое значение: объект PIXI.Point в глобальных координатах сцены.
  • Используется для позиционирования объектов относительно сцены или определения места клика на объекте в глобальных координатах.

toLocal

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

const globalPoint = new PIXI.Point(200, 150);
const localPoint = sprite.toLocal(globalPoint);
console.log(localPoint.x, localPoint.y);

  • Параметры:

    • position — точка в глобальных координатах или координатах другого объекта.
    • from (опционально) — объект, относительно которого задана исходная точка.

  • Полезен для определения позиции курсора мыши внутри конкретного объекта.

Применение в иерархиях объектов

В PixiJS объекты могут быть вложены друг в друга через контейнеры:

const containerA = new PIXI.Container();
const containerB = new PIXI.Container();
const sprite = PIXI.Sprite.from('image.png');

containerA.addChild(containerB);
containerB.addChild(sprite);

sprite.position.set(20, 10);
containerB.position.set(50, 50);
containerA.position.set(100, 100);

Чтобы вычислить глобальное положение спрайта:

const globalPosition = sprite.getGlobalPosition();
console.log(globalPosition.x, globalPosition.y);

Этот метод учитывает все трансформации родителей, включая scale, rotation и pivot.

Учёт трансформаций

При работе с координатами важно учитывать следующие свойства:

  • position — смещение объекта относительно родителя.
  • scale — масштабирование по осям X и Y.
  • rotation — поворот объекта в радианах.
  • pivot — точка, вокруг которой выполняются поворот и масштабирование.
  • skew — сдвиг по осям, используется редко, но влияет на преобразования.

Методы toLocal и toGlobal автоматически учитывают все эти параметры, что позволяет правильно интерпретировать координаты в сложных иерархиях.

Работа с событиями

События мыши в PixiJS возвращают координаты относительно сцены. Для работы с объектами внутри контейнеров необходимо преобразовать координаты события:

sprite.interactive = true;
sprite.on('pointerdown', (event) => {
    const localPos = sprite.toLocal(event.data.global);
    console.log(`Клик внутри спрайта: ${localPos.x}, ${localPos.y}`);
});

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

Использование матриц трансформаций

Под капотом PixiJS хранит матрицу transform.worldTransform, которая описывает преобразование объекта от локальных координат к глобальным:

const globalMatrix = sprite.transform.worldTransform;
const point = new PIXI.Point(10, 20);
const transformedPoint = globalMatrix.apply(point);
  • Позволяет вручную вычислять преобразования без использования toLocal и toGlobal.
  • Важен для сложных графических эффектов, анимаций и кастомных вычислений.

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

  1. Для простых преобразований использовать toLocal и toGlobal — это безопаснее и короче.
  2. При сложной иерархии объектов избегать многократных вычислений getGlobalPosition() в циклах — лучше кешировать результат.
  3. Всегда учитывать pivot и scale при позиционировании и кликах.
  4. Для анимаций через tween или gsap преобразование координат позволяет синхронизировать движение объектов в разных контейнерах.

Пример комплексного преобразования

const container1 = new PIXI.Container();
const container2 = new PIXI.Container();
app.stage.addChild(container1);
container1.addChild(container2);

const sprite = PIXI.Sprite.from('image.png');
container2.addChild(sprite);

container1.position.set(100, 50);
container2.position.set(30, 20);
sprite.position.set(10, 5);

const global = sprite.toGlobal(new PIXI.Point(0, 0));
const local = container1.toLocal(global, sprite);
console.log(global.x, global.y);  // Глобальная позиция
console.log(local.x, local.y);    // Позиция в container1

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

Оглавление