Режимы смешивания blendMode

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

Синтаксис установки blendMode:

sprite.blendMode = PIXI.BLEND_MODES.ADD;

Здесь PIXI.BLEND_MODES — это объект с предопределёнными константами для различных режимов смешивания.

Основные режимы смешивания

1. NORMAL (по умолчанию) PIXI.BLEND_MODES.NORMAL — стандартное наложение. Верхний объект полностью перекрывает нижний в зависимости от своей прозрачности (alpha).

sprite.blendMode = PIXI.BLEND_MODES.NORMAL;

2. ADD (сложение цветов) PIXI.BLEND_MODES.ADD складывает значения цветов верхнего и нижнего объектов. Часто используется для световых эффектов, свечения или огня. При этом яркие цвета усиливаются, а тёмные практически не влияют.

sprite.blendMode = PIXI.BLEND_MODES.ADD;

3. MULTIPLY (умножение цветов) PIXI.BLEND_MODES.MULTIPLY умножает значения цветов верхнего и нижнего объектов. Итоговый цвет всегда темнее. Идеально подходит для создания теней или затемнения фона.

sprite.blendMode = PIXI.BLEND_MODES.MULTIPLY;

4. SCREEN (экран) PIXI.BLEND_MODES.SCREEN работает противоположно MULTIPLY: делает изображение светлее. Часто используется для наложения бликов, света и глянцевых эффектов.

sprite.blendMode = PIXI.BLEND_MODES.SCREEN;

5. OVERLAY (наложение) PIXI.BLEND_MODES.OVERLAY комбинирует MULTIPLY и SCREEN в зависимости от яркости нижнего слоя: тёмные области затемняются, светлые осветляются. Используется для усиления контраста и текстур.

sprite.blendMode = PIXI.BLEND_MODES.OVERLAY;

Особенности работы с прозрачностью

blendMode тесно связан с alpha объекта. Даже при использовании ADD или SCREEN прозрачность влияет на результат:

sprite.alpha = 0.5;
sprite.blendMode = PIXI.BLEND_MODES.ADD;

Полупрозрачный спрайт создаст менее интенсивный световой эффект по сравнению с полностью непрозрачным.

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

Если контейнер (PIXI.Container) содержит несколько объектов с разными blendMode, PixiJS применяет смешивание по объектам, а не ко всему контейнеру сразу.

const container = new PIXI.Container();
const sprite1 = PIXI.Sprite.from('image1.png');
sprite1.blendMode = PIXI.BLEND_MODES.ADD;
const sprite2 = PIXI.Sprite.from('image2.png');
sprite2.blendMode = PIXI.BLEND_MODES.MULTIPLY;
container.addChild(sprite1, sprite2);

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

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

Некоторые режимы (ADD, MULTIPLY, SCREEN) требуют больше вычислений на GPU, особенно на мобильных устройствах. Для оптимизации:

  • Использовать batching объектов с одинаковым blendMode.
  • Минимизировать количество объектов с разными режимами смешивания на одном контейнере.
  • При необходимости объединять текстуры в один спрайт с заранее вычисленным эффектом.

Совместимость с шейдерами

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

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

  • Для световых эффектов использовать ADD или SCREEN.
  • Для теней и затемнений — MULTIPLY.
  • Для повышения контраста и текстур — OVERLAY.
  • Для просто прозрачных объектов без изменения цветов — NORMAL.
  • Группировать объекты с одинаковым blendMode в контейнер для оптимизации рендеринга.

Использование blendMode позволяет создавать визуально насыщенные сцены в PixiJS с минимальными затратами ресурсов и высокой гибкостью.

Оглавление