Свойства, доступные в ParticleContainer

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

Максимальное количество элементов

Свойство maxSize определяет максимальное количество дочерних спрайтов, которое может содержать контейнер.

const container = new PIXI.ParticleContainer(1000);
  • 1000 — максимальное количество элементов.
  • При добавлении спрайтов сверх лимита, контейнер автоматически не расширяется. Это помогает контролировать потребление памяти и повышает производительность.

Разрешённые свойства спрайтов

При создании ParticleContainer можно указать, какие свойства спрайтов будут учитываться при рендеринге. Это важно для оптимизации, так как каждое дополнительное свойство увеличивает нагрузку на GPU.

const container = new PIXI.ParticleContainer(1000, {
    scale: true,
    position: true,
    rotation: true,
    uvs: false,
    alpha: true
});
  • position — позволяет изменять координаты x и y спрайтов.
  • scale — учитывает масштабирование спрайтов по осям x и y.
  • rotation — поворот спрайтов в градусах.
  • alpha — прозрачность спрайтов.
  • uvs — управление текстурными координатами (обычно не требуется).

Каждое включённое свойство увеличивает гибкость, но снижает производительность. Рекомендуется включать только необходимые параметры.

Свойство roundPixels

roundPixels отвечает за округление координат спрайтов до целых чисел при рендеринге.

container.roundPixels = true;
  • Уменьшает размытость изображений при масштабировании.
  • Полезно для пиксельной графики и 2D-игр, где важно чёткое отображение.
  • По умолчанию установлено в false.

Свойство sortableChildren

Указывает, можно ли сортировать дочерние элементы контейнера.

container.sortableChildren = true;
  • Если true, элементы можно сортировать по zIndex.
  • В ParticleContainer сортировка по zIndex работает, но на больших количествах частиц может снижать производительность.

Свойство tint

Контейнер поддерживает глобальное применение цвета ко всем спрайтам через свойство tint.

container.tint = 0xff0000; // красный цвет
  • Все спрайты в контейнере окрашиваются одинаково.
  • Если нужно индивидуальное окрашивание спрайтов, его необходимо разрешить при создании через включение свойства tint.

Ограничения и особенности

  • ParticleContainer не поддерживает вложенные контейнеры с сохранением всех свойств дочерних элементов.
  • Ограничена поддержка масок, фильтров, событий и интерактивности для отдельных спрайтов.
  • Идеален для анимации большого числа однотипных объектов, таких как частицы дыма, огня или снега.

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

const app = new PIXI.Application({ width: 800, height: 600 });
document.body.appendChild(app.view);

const particles = new PIXI.ParticleContainer(5000, {
    scale: true,
    position: true,
    rotation: true,
    alpha: true
});

app.stage.addChild(particles);

for (let i = 0; i < 5000; i++) {
    const sprite = PIXI.Sprite.from('particle.png');
    sprite.x = Math.random() * app.screen.width;
    sprite.y = Math.random() * app.screen.height;
    sprite.scale.set(Math.random());
    sprite.alpha = Math.random();
    particles.addChild(sprite);
}

particles.roundPixels = true;

В этом примере создаётся контейнер для 5000 частиц с возможностью изменения позиции, масштаба, вращения и прозрачности, что обеспечивает баланс между гибкостью и производительностью.

Использование ParticleContainer критически важно при необходимости рендеринга тысяч спрайтов с минимальной нагрузкой на GPU, сохраняя возможность управлять базовыми свойствами частиц.

Оглавление