Видимость visible и renderable

В библиотеке PixiJS управление отображением объектов происходит через два ключевых свойства: visible и renderable. Оба влияют на визуализацию, однако имеют разные механизмы действия и области применения.

Свойство visible

visible — булевое свойство, определяющее, виден ли объект на сцене.

  • Тип: boolean
  • Значение по умолчанию: true
  • Эффект: когда visible = false, объект и все его потомки не будут отрисованы. При этом объекты остаются в дереве сцены и продолжают участвовать в обработке событий, если это не ограничено другими параметрами.

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

const sprite = new PIXI.Sprite(texture);
sprite.visible = false; // объект не отрисовывается
app.stage.addChild(sprite);

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

  1. Наследование видимости: если родительский контейнер имеет visible = false, все дочерние элементы автоматически становятся невидимыми, даже если у них visible = true.
  2. Не влияет на обработку логики: объект остаётся в памяти и можно изменять его свойства, перемещать, изменять анимации, взаимодействовать с событиями (например, pointerdown).
  3. Использование в оптимизации: временное скрытие объектов без удаления из сцены.

Свойство renderable

renderable определяет, можно ли объект отрисовать на рендере, независимо от visible.

  • Тип: boolean
  • Значение по умолчанию: true
  • Эффект: если renderable = false, объект не будет отправлен в графический процессор для отрисовки, даже если visible = true.

Пример:

const container = new PIXI.Container();
container.renderable = false; // все дети не будут отрисованы

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

  1. Фокус на рендере: свойство не влияет на обработку событий или логику объекта.
  2. Не наследуется автоматически: если у родителя renderable = false, дочерние элементы всё ещё могут иметь renderable = true, но на практике рендеринг родителя блокирует их видимость на экране.
  3. Оптимизация производительности: можно отключить отрисовку сложных элементов, оставив их логику активной.

Отличия visible и renderable

Свойство Влияние на видимость Наследование Влияние на события Использование
visible Объект и его потомки невидимы Да Нет (объект по-прежнему реагирует) Временное скрытие объектов
renderable Объект не отрисовывается, но может быть видимым логически Нет Нет Оптимизация рендеринга, отключение графики

Ключевой момент: visible управляет логической видимостью, тогда как renderable — только графической.

Комбинированное использование

На практике часто используют оба свойства для более гибкого контроля:

sprite.visible = true;       // объект видим логически
sprite.renderable = false;   // но не отправляется на рендер

Такой подход позволяет:

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

Поведение в контейнерах

Для PIXI.Container свойства работают следующим образом:

  1. visible — наследуется. Если контейнер невидим, все дети также не видимы независимо от их значения visible.
  2. renderable — действует только на конкретный объект. Дети с renderable = true могут быть отрисованы только если контейнер тоже рендерится.

Пример:

const container = new PIXI.Container();
const sprite = new PIXI.Sprite(texture);

container.visible = false;  // скрывает весь контейнер
sprite.visible = true;      // дочерний элемент логически видим, но не отображается

Советы по использованию

  • Использовать visible для временного скрытия объектов без влияния на логику.
  • Использовать renderable для отключения графической нагрузки при необходимости оставить объект активным.
  • В сложных сценах комбинировать оба свойства для оптимизации FPS и управления интерактивностью.
  • Проверять наследование visible у контейнеров перед отладкой невидимых объектов.

Выводы по функциональности

  • visible управляет логической видимостью объектов и наследуется от родителей.
  • renderable управляет только отрисовкой и не наследуется напрямую.
  • Совместное использование позволяет точно контролировать, что отрисовывается, а что остаётся активным в сцене.
  • В больших проектах правильное применение этих свойств повышает производительность и облегчает управление сложными сценами.
Оглавление