pixijs-blend-modes

Set PixiJS display object blend modes with standard and advanced options.

302|15|Updated Apr 1, 2026
One-click install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-blend-modes
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: pixijs-blend-modes
Source: https://github.com/pixijs/pixijs-skills/tree/main/skills/pixijs-blend-modes
Command: npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-blend-modes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Accurately controlling how display objects blend with each other in PixiJS to achieve lighting, highlights, and masking effects while preserving performance.

Core Features & Use Cases

  • Standard blend modes: Use built-in blendMode values such as normal, add, multiply, screen, and erase to achieve common compositing results.
  • Advanced blend modes: Extend visuals by importing advanced-blend-modes for color-burn, overlay, hard-light, and other effects.
  • Batching and ordering: Arrange siblings to minimize render-batch transitions and optimize draw calls for performance.

Quick Start

Add two sprites with different blend modes to the stage and observe how blending affects the final composition.

Frequently Asked Questions about pixijs-blend-modes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use advanced blend modes like overlay and color-burn in PixiJS v8?

To use advanced blend modes like overlay and color-burn in PixiJS v8, you must import pixi.js/advanced-blend-modes. Standard modes such as normal, add, multiply, screen, and erase are available by default, but advanced compositing requires this additional import to function correctly.

What are PixiJS blend modes and when should I use them?

PixiJS blend modes control how display objects are composited to achieve lighting, highlights, and masking effects. You should use them when you need specific visual compositing results, utilizing standard modes for common effects and advanced modes for complex overlays.

Why do PixiJS blend modes break my render batches and how do I optimize them?

PixiJS blend modes can break render batches because transitioning between different modes forces new draw calls. To optimize batching and preserve performance, arrange display object siblings strategically to minimize render-batch transitions and reduce overall draw calls.

Do I need a back buffer for advanced blend modes in PixiJS WebGL?

Yes, advanced blend modes in PixiJS WebGL require following specific back-buffer guidance to ensure correct rendering behavior. Setting up the back buffer properly is necessary for the WebGL renderer to accurately calculate advanced compositing effects like hard-light and color-burn.

Can I use erase and screen blend modes for masking effects in PixiJS?

Yes, you can use erase and screen blend modes for masking and highlight effects in PixiJS. These standard blendMode values are built-in and allow you to composite display objects to achieve common masking and lighting visuals without additional imports.