pixijs-blend-modes
This skill teaches you how to apply and control blend modes when compositing multiple display objects in PixiJS. You'll learn which blend modes suit different visual effects, how to layer graphics with proper color mixing, and when to optimize blending for performance. Perfect for creating advanced visual effects in 2D WebGL applications.
pixijs-blend-modes teaches you to apply blend modes to composite display objects in PixiJS. Set the `blendMode` property on any display object (sprite, graphics, container) to control how it mixes with layers beneath it. Common modes include multiply, screen, overlay, and add. The skill covers which blend modes suit different visual effects and how to layer graphics with proper color mixing for advanced 2D WebGL compositing.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-06-04
pixijs-blend-modes teaches you to apply blend modes to composite display objects in PixiJS. Set the `blendMode` property on any display object (sprite, graphics, container) to control how it mixes with layers beneath it. Common modes include multiply, screen, overlay, and add. The skill covers which blend modes suit different visual effects and how to layer graphics with proper color mixing for advanced 2D WebGL compositing.
Use it when
- pixijs-blend-modes covers advanced blend modes including overlay, color-burn, hard-light, soft-light, color-dodge, lighten, darken.
- pixijs-blend-modes teaches performance optimization by strategically ordering objects with blend modes.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
pixijs/pixijs-skills/pixijs-blend-modes
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I use blend modes in PixiJS?
pixijs-blend-modes teaches you to apply blend modes to composite display objects in PixiJS. Set the `blendMode` property on any display object (sprite, graphics, container) to control how it mixes with layers beneath it. Common modes include multiply, screen, overlay, and add. The skill covers which blend modes suit different visual effects and how to layer graphics with proper color mixing for advanced 2D WebGL compositing.
What advanced blend modes like overlay, color-burn, and hard-light does PixiJS support?
pixijs-blend-modes covers advanced blend modes including overlay, color-burn, hard-light, soft-light, color-dodge, lighten, darken, and erase. Each mode produces distinct visual effects by blending pixel colors differently. The skill explains when to use each mode—overlay for contrast enhancement, color-burn for darkening with intensity, hard-light for dramatic lighting effects. You'll learn how these modes interact with layers to create professional visual effects in your PixiJS applications.
How can I optimize render performance by ordering blend mode objects?
pixijs-blend-modes teaches performance optimization by strategically ordering objects with blend modes. Batching objects with the same blend mode together reduces render state changes and improves throughput. The skill shows how to structure your scene graph to minimize performance overhead when using multiple blend modes, ensuring smooth rendering even with complex compositing. Proper ordering prevents unnecessary GPU state switches during rendering.
How do I configure advanced blend modes with useBackBuffer and resolution?
pixijs-blend-modes covers configuring advanced blend modes using `useBackBuffer` and resolution settings. These parameters control how PixiJS renders complex blend operations, particularly for modes requiring intermediate framebuffers. The skill explains when to enable `useBackBuffer` for accuracy versus performance trade-offs, and how resolution affects blend quality. This configuration is essential for achieving correct visual results with demanding blend modes.
What changed with blend modes in PixiJS v8 API?
pixijs-blend-modes addresses v8 API changes and blend mode fallbacks. The skill helps you troubleshoot compatibility issues when upgrading, including how blend mode strings are handled in newer versions and what fallback behavior to expect. Understanding these changes ensures your blend mode implementations work correctly across PixiJS versions and handles cases where certain blend modes aren't supported on target platforms.
How do I blend sprites and composite layers in PixiJS?
pixijs-blend-modes teaches sprite blending and layer compositing fundamentals. Apply blend modes to sprite objects to control color mixing with underlying content. The skill shows how to composite multiple layers using different blend modes—combine multiply for shadows, screen for glows, and overlay for contrast. You'll learn to build complex visual effects by layering sprites with appropriate blend modes for professional 2D graphics in WebGL applications.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Set container.blendMode to composite display objects with GPU blend equations (standard modes) or filter-based advanced modes. Blend-mode transitions break render batches, so group like-mode siblings together.
Quick Start
const light = new Sprite(await Assets.load("light.png"));
light.blendMode = "add";
app.stage.addChild(light);
const shadow = new Sprite(await Assets.load("shadow.png"));
shadow.blendMode = "multiply";
app.stage.addChild(shadow);
import "pixi.js/advanced-blend-modes";
const overlay = new Sprite(await Assets.load("overlay.png"));
overlay.blendMode = "color-burn";
app.stage.addChild(overlay);
Related skills: pixijs-filters (advanced modes use the filter pipeline), pixijs-performance (batching with
(truncated - see the full file via the links below)
File tree — 1 file
skills/pixijs-blend-modes/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Apply blend modes to composite display objects in PixiJS”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill teaches you how to leverage PixiJS v8's powerful filter system to enhance your 2D graphics with visual effects. You'll learn to apply filters to display objects, chain multiple effects together, and optimize performance when working with complex rendering scenarios. Master both built-in filters and custom implementations to bring professional polish to your WebGL and Canvas-based applications.
This skill equips developers to build inclusive PixiJS applications by implementing screen reader compatibility and keyboard-driven interaction patterns. Master the accessibility layer for PixiJS v8's 2D rendering engine, ensuring your interactive graphics reach users with assistive technologies.
PixiJS is a high-performance 2D rendering engine built for the web. This skill collection guides agents through core PixiJS v8 concepts—from application initialization and scene management to advanced rendering techniques, custom shaders, and optimization strategies. Whether building interactive graphics or migrating from earlier versions, these skills provide structured pathways to solve rendering challenges efficiently.
This skill teaches agents how to load and render animated GIF files as sprites within PixiJS v8 scenes. It covers the setup process, sprite creation from GIF sources, and integration with PixiJS's rendering pipeline for WebGL and Canvas environments. Perfect for developers building interactive 2D applications that need smooth GIF animation support.
This skill equips you with foundational knowledge of PixiJS v8's scene graph model, covering how containers organize display objects and transforms propagate through the hierarchy. Learn the distinction between container nodes and leaf objects, and discover how the rendering pipeline traverses your scene structure to produce optimized 2D output.
This skill guides developers through upgrading PixiJS projects from version 7 to version 8, covering all breaking changes and API shifts. It provides a structured migration checklist and explains modern patterns for the fast WebGL-based 2D rendering engine. Perfect for teams maintaining graphics-heavy web applications.
More skills pixijs-events (MIT) · pixijs-core-concepts (MIT) · pixijs-2d (MIT) · pixijs-scene-dom-container (MIT)