Studio

FolioTier 2

@color-matrix

Apply a Pixi ColorMatrixFilter (brightness/contrast/saturation/hue) to a sprite or the whole in-world frame.

@color-matrix applies a color-grading filter to a specific sprite or to everything visible in the scene at once. You reach for it whenever a moment needs a shift in mood without swapping any assets - dimming and desaturating a rainy alley at 3 a.m., washing a memory sequence in pale warmth, or snapping a portrait to high contrast during a tense reveal.

The construct transitions smoothly from the scene's current color state to the values you specify, so you can chain calls back to neutral just as naturally as you pushed away from it. The canonical example above shows this rhythm: push the whole frame into a cold, dim look before the line lands, then ease it back out to signal the moment passing.

When target is empty, the filter lands on the in-world frame, which means UI elements like dialogue boxes are unaffected. If you name a sprite tag instead, only that sprite's colors shift while the rest of the scene stays put - useful for spotlighting one character without touching the background or other sprites on stage.

Hue rotation wraps at the 360-degree boundary, so a transition from 350 to 10 will travel the long way around the color wheel unless you plan the sequence carefully. If you need the short arc, keep rotations within a single crossing of zero.

Setting wait to false lets you layer a color shift under a say verb or another effect without stalling the script. Be cautious about firing a second @color-matrix on the same target before the first finishes - the new call interrupts from wherever the filter sits at that instant, not from your intended baseline. If you need a clean starting point, send an explicit reset to defaults before beginning the next transition.

Parameters

ParameterKindRequiredDefaultNotes
targetstringno""Optional sprite tag; empty targets the whole frame.
brightnessnumberno10-3 × multiplier. Default 1.
contrastnumberno10-3 × multiplier. Default 1.
saturationnumberno10-3 × multiplier. Default 1.
huenumberno0-360 to 360 degrees. Default 0.
durationnumberno0.40-3 seconds. Default 0.4.
waitbooleannofalseBlock for the effect's duration when true; false fires and continues so effects can overlap.

Canonical example

bg city-rooftop
@color-matrix(0.6, brightness=0.6, saturation=0.5)
say "Liam": "It's been a long night."
@color-matrix(0.4, brightness=1, saturation=1)

@color-matrix attaches a Pixi ColorMatrixFilter to either a single sprite (when target is set) or the whole in-world frame (camera container - when target is empty). The filter persists until its parameters return to identity.

Identity = no filter

brightness=1, contrast=1, saturation=1, hue=0 is the identity matrix. When all four return to identity, the filter detaches on tween completion. So to remove a color grade, tween every non-identity parameter back:

@color-matrix(0.6, brightness=0.6, saturation=0.5)
say "Liam": "..."
@color-matrix(0.4, brightness=1, saturation=1)

If brightness was changed but hue is still at identity, only brightness needs to return; hue already meets identity.

Tuning

  • Dusk / dawn - brightness=0.7, saturation=0.6, hue=-20
  • Cold sterile - brightness=1.1, contrast=1.2, saturation=0.5, hue=20
  • Sepia warm - brightness=1.0, saturation=0.3, hue=30
  • Grayscale - saturation=0
  • Night - brightness=0.5

Per-character grading (e.g. greyscale on a specific sprite for a flashback) is the target use case.

Composition with @blur

@blur and @color-matrix apply independently - both filters can coexist on the same target. They compose at render time (blur runs first, then color grade).

Notes

@color-matrix runs on the Pixi stage.

See also