Вложенные маски

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

Основы масок

Маска в PixiJS — это любой объект типа PIXI.Graphics или PIXI.Sprite, который назначается свойству mask у спрайта или контейнера:

const mask = new PIXI.Graphics();
mask.beginFill(0xffffff);
mask.drawRect(0, 0, 100, 100);
mask.endFill();

sprite.mask = mask;

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

  • Маска определяет видимую область объекта: всё, что выходит за границы маски, скрыто.
  • Маска может быть графическим объектом или спрайтом с альфа-каналом.

Контейнеры с масками

Контейнер (PIXI.Container) может содержать несколько объектов, и на весь контейнер можно наложить маску:

const container = new PIXI.Container();
container.addChild(sprite1, sprite2);
container.mask = mask;

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

Вложенные маски

Вложенная маска — это маска, применённая к объекту, который сам находится под действием другой маски. Эффект работает по принципу пересечения видимых областей:

  1. Верхняя маска ограничивает видимость внешнего контейнера.
  2. Внутренняя маска ограничивает видимость отдельного объекта или группы внутри контейнера.
const outerMask = new PIXI.Graphics();
outerMask.beginFill(0xffffff);
outerMask.drawRect(50, 50, 200, 200);
outerMask.endFill();

const innerMask = new PIXI.Graphics();
innerMask.beginFill(0xffffff);
innerMask.drawCircle(100, 100, 50);
innerMask.endFill();

const container = new PIXI.Container();
container.mask = outerMask;

const sprite = PIXI.Sprite.from('image.png');
sprite.mask = innerMask;

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

Ключевой момент: видимая область спрайта определяется пересечением внешней маски контейнера и внутренней маски спрайта.

Маскирование с использованием спрайтов

Маски могут быть не только графикой, но и спрайтами с альфа-каналом. Это особенно полезно для создания плавных переходов и эффектов прозрачности.

const maskTexture = PIXI.Texture.from('mask.png');
const spriteMask = new PIXI.Sprite(maskTexture);
sprite.mask = spriteMask;

В случае вложенных масок можно комбинировать графику и спрайты. Принцип пересечения остаётся тем же: итоговая видимость определяется суммарным действием всех масок в иерархии.

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

  • Использование большого количества масок может снижать производительность. PixiJS применяет маски через шейдеры, поэтому каждая дополнительная маска создаёт вычислительную нагрузку.
  • Для статических масок рекомендуется кэшировать результат с помощью generateCanvasTexture() или renderTexture.
  • При вложенных масках следует минимизировать глубину иерархии, чтобы сократить количество пересечений.

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

Маски можно изменять в реальном времени, что позволяет создавать анимации, эффекты движения света, вырезы и интерактивные области:

app.ticker.add(() => {
    innerMask.x += 1;
    innerMask.y += 1;
});

При этом sprite автоматически обновляет видимую область в соответствии с новым положением маски.

Советы по работе с вложенными масками

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

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

Оглавление