Loading...
Loading...
Use this skill when compositing display objects with blend modes in PixiJS v8. Covers standard modes (normal, add, multiply, screen, erase, min, max), advanced modes via pixi.js/advanced-blend-modes (color-burn, overlay, hard-light, etc.), batch-friendly ordering. Triggers on: blendMode, additive, multiply, screen, overlay, color-burn, color-dodge, advanced-blend-modes, glow, erase.
npx skill4agent add pixijs/pixijs-skills pixijs-blend-modescontainer.blendModeconst 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);pixijs-filterspixijs-performancepixijs-colorimport { Sprite } from "pixi.js";
sprite.blendMode = "normal"; // standard alpha compositing (effective default at root)
sprite.blendMode = "add"; // additive (lighten, glow effects)
sprite.blendMode = "multiply"; // multiply (darken, shadow effects)
sprite.blendMode = "screen"; // screen (lighten, dodge effects)
sprite.blendMode = "erase"; // erase pixels from render target
sprite.blendMode = "none"; // no blending, overwrites destination
sprite.blendMode = "inherit"; // inherit from parent (this is the actual default value)
sprite.blendMode = "min"; // keeps minimum of source and destination (WebGL2+ only)
sprite.blendMode = "max"; // keeps maximum of source and destination (WebGL2+ only)useBackBuffer: trueimport "pixi.js/advanced-blend-modes";
import { Application, Sprite, Assets } from "pixi.js";
const app = new Application();
await app.init({ useBackBuffer: true }); // required for advanced modes on WebGL
const texture = await Assets.load("overlay.png");
const overlay = new Sprite(texture);
overlay.blendMode = "color-burn";| Mode | Effect |
|---|---|
| Darkens by increasing contrast |
| Brightens by decreasing contrast |
| Keeps darker of two layers |
| Absolute difference |
| Divides bottom by top |
| Similar to difference, lower contrast |
| Multiply or screen based on top layer |
| High contrast threshold blend |
| Keeps lighter of two layers |
| Adds and subtracts to darken |
| Adds layers together |
| Linear burn or dodge based on top layer |
| Luminosity of top, hue/saturation of bottom |
| Inverted difference |
| Multiply or screen based on bottom layer |
| Replaces based on lightness comparison |
| Saturation of top, hue/luminosity of bottom |
| Gentle overlay effect |
| Subtracts top from bottom |
| Color burn or dodge based on top layer |
| Hue and saturation of top, luminosity of bottom |
blendModeimport { Container, Sprite } from "pixi.js";
const scene = new Container();
scene.addChild(screenSprite1); // 'screen'
scene.addChild(screenSprite2); // 'screen'
scene.addChild(normalSprite1); // 'normal'
scene.addChild(normalSprite2); // 'normal'screen, normal, screen, normalimport { Sprite } from "pixi.js";
sprite.blendMode = "color-burn"; // silently falls back to normalimport "pixi.js/advanced-blend-modes";
import { Sprite } from "pixi.js";
sprite.blendMode = "color-burn";screen / normal / screen / normalscreen / screen / normal / normalimport { BLEND_MODES } from "pixi.js";
sprite.blendMode = BLEND_MODES.ADD; // runtime error: BLEND_MODES is undefinedsprite.blendMode = "add";BLEND_MODESBLEND_MODES.ADDundefinedimport "pixi.js/advanced-blend-modes";
await app.init({
/* no useBackBuffer */
});
sprite.blendMode = "color-burn"; // logs a warning, falls backimport "pixi.js/advanced-blend-modes";
await app.init({ useBackBuffer: true });
sprite.blendMode = "color-burn";