Позиция: свойства x, y и объект position

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

Свойства x и y

  • x — горизонтальная координата объекта. Изменение x перемещает объект вправо при увеличении и влево при уменьшении значения.
  • y — вертикальная координата объекта. Увеличение y опускает объект вниз, уменьшение поднимает вверх.

Пример использования:

const sprite = new PIXI.Sprite(texture);
sprite.x = 150;
sprite.y = 200;
app.stage.addChild(sprite);

В этом примере спрайт будет расположен на 150 пикселей вправо и 200 пикселей вниз от левого верхнего угла родительского контейнера (app.stage).

Объект position

Свойства x и y являются частью объекта position, который предоставляет альтернативный способ работы с координатами:

sprite.position.x = 150;
sprite.position.y = 200;

или через метод присвоения:

sprite.position.set(150, 200);

Использование объекта position удобно при работе с групповыми операциями или функциями, которые ожидают объект с координатами. position является экземпляром класса PIXI.Point, что позволяет использовать встроенные методы для манипуляций с векторными значениями.

Связь x, y и position

Свойства x и y являются геттером и сеттером для соответствующих полей объекта position. Изменение sprite.x автоматически обновляет sprite.position.x и наоборот:

sprite.x = 300;
console.log(sprite.position.x); // 300

sprite.position.y = 400;
console.log(sprite.y); // 400

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

Относительное и абсолютное позиционирование

PixiJS использует иерархию контейнеров, поэтому координаты объекта зависят от его родителя. Если объект находится внутри другого контейнера:

const container = new PIXI.Container();
container.x = 100;
container.y = 50;

const sprite = new PIXI.Sprite(texture);
sprite.x = 200;
sprite.y = 100;

container.addChild(sprite);
app.stage.addChild(container);

Фактическое положение спрайта на сцене будет вычисляться как сумма координат:

Абсолютная позиция X = container.x + sprite.x = 100 + 200 = 300
Абсолютная позиция Y = container.y + sprite.y = 50 + 100 = 150

Для получения абсолютных координат используется метод getGlobalPosition():

const globalPos = sprite.getGlobalPosition();
console.log(globalPos.x, globalPos.y); // 300, 150

Динамическое изменение позиции

Координаты x и y позволяют анимировать объекты и создавать интерактивные элементы. Простейший пример движения:

app.ticker.add((delta) => {
    sprite.x += 5 * delta;
    sprite.y += 2 * delta;
});

Использование position здесь аналогично:

app.ticker.add((delta) => {
    sprite.position.x += 5 * delta;
    sprite.position.y += 2 * delta;
});

Сложные манипуляции с position

Объект position можно использовать для математических операций с векторами, так как это экземпляр PIXI.Point. Например, для перемещения объекта к определенной точке:

const target = new PIXI.Point(400, 300);

const dx = target.x - sprite.position.x;
const dy = target.y - sprite.position.y;

sprite.position.x += dx * 0.1;
sprite.position.y += dy * 0.1;

Это позволяет создавать плавные анимации с интерполяцией.

Итоговые рекомендации

  • Для быстрого изменения координат достаточно использовать x и y.
  • Для операций с векторами, передачей координат в функции и работе с математикой лучше использовать position.
  • Всегда учитывать иерархию контейнеров при вычислении абсолютных координат.
  • Объект position делает код более читаемым и согласованным при работе с множеством объектов.

Понимание связи x, y и position является базой для построения сложной сцены и управления объектами в PixiJS.

Оглавление