Параметр filterArea

В библиотеке PixiJS параметр filterArea используется для управления областью применения фильтров к контейнерам и спрайтам. Он задаёт прямоугольную область, в пределах которой происходит визуальная обработка содержимого. Правильное использование filterArea позволяет оптимизировать производительность и избежать артефактов фильтров.

Основное назначение

filterArea определяет область в координатах родительского контейнера, где будет применяться фильтр. Это особенно важно для фильтров, создающих размытие, свечения или другие эффекты, которые могут “вылезать” за пределы исходного объекта. Без задания filterArea фильтр по умолчанию применяется ко всему содержимому контейнера, что может быть неоптимально.

Пример структуры объекта:

const container = new PIXI.Container();
container.filters = [new PIXI.filters.BlurFilter()];
container.filterArea = new PIXI.Rectangle(0, 0, 800, 600);

В данном случае фильтр размытия будет применяться только внутри прямоугольника 800x600, начинающегося с координат (0,0) контейнера.

Влияние на производительность

Установка filterArea может значительно снизить нагрузку на GPU, так как PixiJS рендерит фильтруемый контент только в указанной области. Если фильтры применяются к большим контейнерам или сценам с множеством спрайтов, отсутствие ограничения области приводит к перерасходу видеопамяти и увеличению времени отрисовки.

Примеры оптимизации:

  1. Фильтр к части сцены
const blurFilter = new PIXI.filters.BlurFilter();
container.filters = [blurFilter];
container.filterArea = new PIXI.Rectangle(100, 100, 400, 300);

Только область 400x300 пикселей, смещённая на 100 по X и Y, будет размытой, остальные элементы останутся нетронутыми.

  1. Фильтр к динамическому объекту

Для анимационных объектов filterArea можно обновлять каждый кадр:

app.ticker.add(() => {
    container.filterArea = new PIXI.Rectangle(
        movingSprite.x - 50,
        movingSprite.y - 50,
        movingSprite.width + 100,
        movingSprite.height + 100
    );
});

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

Координаты и размеры

filterArea принимает объект типа PIXI.Rectangle, который описывается следующими свойствами:

  • x — смещение по оси X относительно родителя.
  • y — смещение по оси Y относительно родителя.
  • width — ширина области фильтрации.
  • height — высота области фильтрации.

Важно учитывать, что координаты не глобальные, а относительные к контейнеру, на котором установлен фильтр. Если контейнер находится внутри других контейнеров с трансформациями, filterArea не учитывает эти трансформации автоматически.

Взаимодействие с масками и рамками

Если контейнер имеет маску (mask) или заданные границы (bounds), фильтр будет применяться только в пределах filterArea, независимо от маски. Это позволяет создавать эффекты с точечным выделением:

const glowFilter = new PIXI.filters.GlowFilter();
container.filters = [glowFilter];
container.filterArea = new PIXI.Rectangle(50, 50, 200, 200);

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

Частые ошибки при использовании

  1. Не задан filterArea для больших контейнеров Все содержимое контейнера будет фильтроваться, что приводит к падению FPS.

  2. Использование filterArea с нулевыми размерами Фильтр не будет видим, так как область равна (0,0,0,0).

  3. Игнорирование локальных координат Прямоугольник задаётся относительно контейнера, а не сцены. Ошибка в координатах приведёт к смещению фильтруемого эффекта.

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

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

Связь с autoResize

PixiJS автоматически не изменяет filterArea при изменении размеров контейнера. Для динамически изменяемых объектов можно использовать:

container.filterArea = container.getLocalBounds();

Метод getLocalBounds() возвращает текущие границы контейнера с учётом всех дочерних элементов, что обеспечивает корректное применение фильтра без ручного расчёта размеров.

Заключение по использованию

filterArea является ключевым инструментом для точного контроля и оптимизации фильтров в PixiJS. Он позволяет:

  • ограничить область применения фильтров,
  • повысить производительность,
  • предотвратить визуальные артефакты.

Правильное использование filterArea совместно с методами getLocalBounds() и динамическим обновлением обеспечивает эффективную и точную визуальную обработку объектов в любых сценах PixiJS.

Оглавление