PixelArt

View source
Entity → Visual → Quad → Layer → Filter → ceramic.PixelArt (Class)

A filter configured to display pixel art content with high-quality upscaling.

PixelArt uses advanced shader techniques to scale pixel art without blurriness or artifacts, providing better results than standard NEAREST or LINEAR filtering. It preserves the crisp edges of pixels while smoothing the overall appearance.

Features:

  • Sharp pixel scaling with configurable sharpness
  • CRT/retro display effects (scanlines, RGB mask, grid)
  • Chromatic aberration for color fringing
  • Glow effects for bright pixels
  • LCD grid simulation

This is ideal for:

  • Retro-style games that need clean scaling
  • Pixel art that needs to scale to different resolutions
  • Creating authentic CRT/LCD display effects
  • Adding subtle visual enhancements to pixel graphics
// Basic pixel art scaling
var pixelArt = new PixelArt();
pixelArt.size(320, 240); // Original pixel art size
pixelArt.content.add(myPixelSprite);
pixelArt.scale(3); // Scale up 3x with clean pixels

// CRT monitor effect
var crt = new PixelArt();
crt.scanlineCount = 240; // Number of visible scanlines
crt.scanlineIntensity = 0.3; // Darkness between lines
crt.verticalMaskCount = 320; // RGB phosphor mask
crt.verticalMaskIntensity = 0.1;
crt.glowStrength = 0.2; // Slight glow on bright pixels

// Game Boy style LCD grid
var lcd = new PixelArt();
lcd.gridThickness = 0.1;
lcd.gridColor = Color.fromRgb(0x9BBC0F); // GB green
lcd.gridAlpha = 0.15;

Based on techniques from: https://colececil.io/blog/2017/scaling-pixel-art-without-destroying-it/

See: Filter

Instance Members

sharpness: Float

Sharpness of the pixels.

  • 1.0 = Soft/blurry edges
  • 8.0 = Sharp pixels (default)
  • Higher values = Even sharper transitions

Adjust based on your art style and scaling factor.

chromaticAberration: Float

Chromatic aberration: max offset for red/blue channel split. Creates color fringing effects like old CRT monitors or lenses.

  • 0.0 = No effect (default)
  • 0.5 = Subtle color separation
  • 1.0 = Strong RGB channel split

Range: 0.0 – 1.0

gridThickness: Float

Thickness of the pixel grid lines. Set above 0.0 to display a grid overlay.

Perfect for simulating:

  • Game Boy LCD screens
  • Old monitor pixel grids
  • Tile-based displays

Typical values: 0.05 - 0.2

gridColor: Color

When using a grid, this is the color of the grid

gridAlpha: Float

When using a grid, this is the alpha of the grid

scanlineCount: Float

Number of horizontal scanlines. Set to your display's vertical resolution for authentic CRT effect.

Examples:

  • 240 for retro consoles
  • 480 for SD CRT TVs
  • 0 to disable scanlines (default)
scanlineOffset: Float

Scanline vertical offset in pixels. Useful when scanline count doesn't match pixel rows exactly. Helps align scanlines with your pixel art.

scanlineIntensity: Float

Darkness between scanlines. Controls how visible the horizontal lines are.

  • 0.0 = No darkening (invisible scanlines)
  • 0.25 = Subtle effect (default)
  • 0.5 = Medium darkness
  • 1.0 = Black lines between scanlines

Range: 0.0 – 1.0

scanlineShape: Float

Controls scanline sharpness/thickness.

  • 0.25 = Very wide/soft scanlines
  • 1.0 = Normal sharpness (default)
  • 4.0 = Very thin/sharp scanlines

Common values: 0.25, 0.5, 1.0, 2.0, 4.0

verticalMaskCount: Float

Number of vertical RGB phosphor mask lines. Simulates the RGB subpixel structure of CRT monitors.

Set to your horizontal resolution divided by 3 for authentic RGB triads, or 0 to disable (default).

verticalMaskOffset: Float

Vertical mask horizontal offset in pixels. Useful when mask count doesn't match pixel columns exactly. Helps align the RGB mask with your pixel grid.

verticalMaskIntensity: Float

Darkness of vertical RGB mask lines. Controls the visibility of the phosphor mask effect.

  • 0.0 = No mask visible (default)
  • 0.1 = Subtle RGB stripes
  • 0.3 = Visible phosphor structure
  • 1.0 = Strong RGB separation

Range: 0.0 – 1.0

glowStrength: Float

Amount of glow/bloom effect on bright pixels. Simulates phosphor glow on CRT displays.

  • 0.0 = No glow (default)
  • 0.2 = Subtle bloom
  • 0.5 = Medium glow
  • 1.0 = Strong bloom effect

Range: 0.0 – 1.0

glowThresholdMin: Float

Minimum brightness threshold for glow effect. Pixels darker than this won't glow.

  • 0.0 = All pixels glow
  • 0.6 = Only bright pixels glow (default)
  • 1.0 = No pixels glow

Range: 0.0 – 1.0

glowThresholdMax: Float

Brightness level for maximum glow intensity. Pixels at or above this brightness glow at full strength.

  • Should be higher than glowThresholdMin
  • 0.85 = Very bright pixels glow fully (default)
  • 1.0 = Only pure white glows fully

Range: 0.0 – 1.0

destroy(): Void
new(): Void

Private Members

handleResize(width: Float, height: Float): Void
Name Type
width Float
height Float
updateResolution(): Void

Metadata

Name Parameters
:build ceramic.macros.EntityMacro.buildForCompletion()
:autoBuild ceramic.macros.EntityMacro.buildForCompletion()
:build tracker.macros.EventsMacro.build()
:autoBuild tracker.macros.EventsMacro.build()
:build tracker.macros.ObservableMacro.build()
:autoBuild tracker.macros.ObservableMacro.build()