Добавление и удаление дочерних объектов

В PixiJS сцена строится иерархически: каждый объект может содержать другие объекты — дочерние. Управление этой иерархией осуществляется через контейнеры (PIXI.Container), которые позволяют добавлять, удалять и изменять порядок дочерних элементов, влияя на их отображение и обработку событий.

Добавление дочерних объектов

Для добавления объекта в контейнер используется метод addChild:

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

container.addChild(sprite);

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

  • Объект, добавленный в контейнер, автоматически наследует трансформации контейнера: позицию, масштаб, вращение.
  • Метод addChild возвращает добавленный объект, что позволяет использовать цепочку вызовов.
  • Можно добавлять сразу несколько объектов:
container.addChild(sprite1, sprite2, sprite3);
  • Если объект уже был дочерним другого контейнера, он автоматически удаляется из старого контейнера перед добавлением в новый.

Удаление дочерних объектов

Удаление выполняется методом removeChild:

container.removeChild(sprite);

Особенности:

  • После удаления объект остается в памяти, но больше не отображается на сцене.
  • Для полного удаления с очисткой ресурсов используется метод destroy:
sprite.destroy({ children: true });

Параметр children: true гарантирует, что все дочерние объекты будут уничтожены вместе с родителем.

  • Удаление нескольких объектов одновременно возможно через передачу нескольких аргументов:
container.removeChild(sprite1, sprite2);
  • Метод removeChildAt(index) удаляет объект по индексу в массиве children контейнера.

Управление порядком дочерних объектов

Порядок дочерних элементов в контейнере определяет, какой объект отображается поверх других. Основные методы:

  • addChildAt(child, index) — вставляет объект в контейнер на указанную позицию:
container.addChildAt(sprite, 0); // Добавить на самый нижний слой
  • setChildIndex(child, index) — меняет индекс существующего объекта, перемещая его по слоям:
container.setChildIndex(sprite, container.children.length - 1); // Переместить наверх
  • swapChildren(child1, child2) — меняет местами два объекта.
  • swapChildrenAt(index1, index2) — меняет местами объекты по индексам.
  • getChildIndex(child) — возвращает текущий индекс объекта.
  • getChildAt(index) — возвращает объект по индексу.

Очистка контейнера

Для удаления всех дочерних элементов используется removeChildren:

container.removeChildren();
  • Можно указать диапазон индексов: container.removeChildren(0, 5) удалит первые шесть объектов.
  • После удаления объекты остаются в памяти, пока их явно не уничтожить через destroy.

Динамическое управление сценой

Работа с дочерними объектами особенно важна при динамическом создании сцен, анимации или интерфейсов:

  • Создание и удаление объектов в процессе игры:
const enemies = new PIXI.Container();

function spawnEnemy(texture) {
    const enemy = new PIXI.Sprite(texture);
    enemies.addChild(enemy);
}

function removeEnemy(enemy) {
    enemies.removeChild(enemy);
    enemy.destroy();
}
  • Управление слоями интерфейса и эффектов:
const background = new PIXI.Sprite.from('bg.png');
const uiLayer = new PIXI.Container();
const effectsLayer = new PIXI.Container();

app.stage.addChild(background, effectsLayer, uiLayer);

Слой uiLayer всегда будет отображаться поверх effectsLayer, а фон — на заднем плане.

Важные нюансы

  1. Наследование трансформаций: позиция, масштаб и вращение дочернего объекта считаются относительно родителя.
  2. События и интерактивность: события, такие как клики или наведение мыши, распространяются через иерархию, если объект интерактивен.
  3. Оптимизация: частое добавление и удаление объектов может влиять на производительность, особенно при большом количестве спрайтов. Используются пулы объектов для повторного использования.

Практические методы для управления дочерними объектами

  • addChild — добавление объекта.
  • removeChild / removeChildAt — удаление объекта по ссылке или индексу.
  • addChildAt / setChildIndex / swapChildren — управление порядком отображения.
  • removeChildren — массовое удаление.
  • destroy — очистка ресурсов.

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

Оглавление