PixelArt

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

PixelArt scales pixel art without blurriness or artifacts, providing better results than standard NEAREST or LINEAR filtering. It preserves the crisp edges of pixels while keeping sub-pixel motion smooth.

It has two modes (see mode):

• SHARP (default): the original PixelArt shader, with sharp scaling, optional grid, sine scanlines, vertical mask, glow and chromatic aberration.
• CRT: a CRT and LCD display simulation (Gaussian beam, phosphor masks, halo, curvature, vignette, gamma and color matrix), driven by presets.

// 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
screen.add(pixelArt);

// A consumer television
pixelArt.applyPreset(PixelArtPreset.crtTv());

// A Game Boy Advance screen
pixelArt.applyPreset(PixelArtPreset.gba());

// Your own settings
pixelArt.applyPreset({
    mode: CRT,
    beamAmount: 1,
    scanlineStrength: 0.8,
    maskType: APERTURE
});

Sharp mode based on techniques from: https://colececil.io/blog/2017/scaling-pixel-art-without-destroying-it/ CRT mode sources are listed in shaders.PixelArtCrt.

Instance Members #

Which shader upscales the content. Switching mode loads the corresponding shader if needed and pushes the settings of that mode to it.

Sharpness of the pixels (SHARP mode).

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

Adjust based on your art style and scaling factor. In CRT mode, see sharpBand instead.

Chromatic aberration: max offset for red/blue channel split (SHARP mode). 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 to 1.0. Ignored in CRT mode.

Thickness of the pixel grid lines (SHARP mode). 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. In CRT mode, see the LCD mask instead.

When using a grid, this is the color of the grid (SHARP mode)

When using a grid, this is the alpha of the grid (SHARP mode)

Number of horizontal scanlines (SHARP mode). 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)

In CRT mode, scanlines follow the source rows: see scanlineStrength and hardScan.

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

Darkness between scanlines (SHARP mode). 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 to 1.0

Controls scanline sharpness/thickness (SHARP mode).

• 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

Number of vertical RGB phosphor mask lines (SHARP mode). 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). In CRT mode, see maskType.

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

Darkness of vertical RGB mask lines (SHARP mode). 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 to 1.0

Amount of glow/bloom effect on bright pixels (SHARP mode). 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 to 1.0. In CRT mode, see bloomAmount.

Minimum brightness threshold for glow effect (SHARP mode). 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 to 1.0

Brightness level for maximum glow intensity (SHARP mode). 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 to 1.0

Screen pixels per source pixel (CRT mode), used to size the sharp sampling band and the LCD grid. The default -1 computes it every frame from the filter's transform and the screen density, which covers scaling and zooming. Set it explicitly when the filter is rendered somewhere this does not apply.

How much of the crt-lottes Gaussian beam goes into each pixel (CRT mode): 0.0 (default) keeps crisp pixels (see sharpBand), 1.0 is the full beam (see hardPix and hardScan), values in between blend the two.

Horizontal spread of the beam (CRT mode, with beamAmount), a negative Gaussian scale as in crt-lottes: -3.0 soft (default), -2.0 softer, -4.0 sharper.

Width, in screen pixels, of the band around texel edges where the crisp sampling interpolates (CRT mode). 1.0 (default) keeps sub-pixel scrolling smooth without visible blur; smaller values are sharper but shimmer when scrolling, larger ones soften the pixel edges.

Vertical spread of the beam, which shapes the scanlines (CRT mode), a negative Gaussian scale as in crt-lottes: -8.0 (default), -16.0 thinner lines, -4.0 wider.

Beam width factor for black rows (CRT mode). With beamMax, makes bright rows draw a wider beam than dark ones, as on a real tube. 1.0 by default.

Beam width factor for white rows (CRT mode). 1.0 by default (same as beamMin: constant width); 1.4 gives bright rows a visibly thicker beam.

Visibility of the scanlines (CRT mode), from 0.0 (none, default) to 1.0 (the raw crt-lottes profile). Scanlines follow the source rows, one per pixel row.

Phosphor or LCD mask (CRT mode). Phosphor masks are fixed on the screen pixels, the LCD mask follows the source pixels. Default: NONE.

Brightness of the mask cells that do not match a channel (CRT mode, phosphor masks). 0.5 by default, as in crt-lottes.

Brightness of the mask cells that match a channel (CRT mode, phosphor masks). 1.5 by default, as in crt-lottes: above 1 to compensate for the dark cells.

Size of a mask cell in screen pixels (CRT mode, phosphor masks). 1.0 by default; use 2.0 on high density screens so the triads stay visible.

Darkness of the grid between pixels of the LCD mask (CRT mode), 0.0 (none, default) to 1.0 (black).

Brightness of a channel outside its own subpixel in the LCD mask (CRT mode): 1.0 hides the subpixels, 0.0 shows pure RGB stripes. 0.65 by default.

Amount of halo added around bright pixels (CRT mode), 0.0 (none, default) to 1.0. The halo is a blur of the source at its own resolution (radius bloomSize), so it stays cheap. Bright areas are already bright: the halo shows on their edges and in the dark areas next to them.

Radius of the halo blur in source pixels (CRT mode). 4.0 by default. Only visible while bloomAmount is above zero.

Horizontal curvature of the screen (CRT mode), as in crt-lottes: 0.0 flat (default), 1/32 a typical television.

Vertical curvature of the screen (CRT mode), as in crt-lottes: 0.0 flat (default), 1/24 a typical television.

Radius of the rounded corners of the screen, in source pixels (CRT mode). 0.0 by default.

Softness of the screen edge, in source pixels (CRT mode). 0.0 by default (hard edge).

Darkening of the edges of the screen (CRT mode), 0.0 (none, default) to 1.0.

Display gamma (CRT mode). When above 0.0, the beam, halo and mask are composed in linear light (2.2 is the usual value); 0.0 (default) skips the conversion, which is cheaper and keeps colors untouched.

Brightness multiplier applied after the mask (CRT mode), to compensate for the light lost in scanlines and mask cells. 1.0 by default.

3 x 3 color matrix (CRT mode), row by row: the first three values give the output red from the input red, green and blue, and so on. Identity by default; see PixelArtPreset.gba() for the gba-color values.

Luminance multiplier applied before the color matrix (CRT mode). 1.0 by default, 0.94 in gba-color.

Amplitude of the animated grain (CRT mode), 0.0 (none, default) to 1.0.

Amplitude of the brightness flicker (CRT mode), 0.0 (none, default) to 1.0.

Cost of the BEAM reconstruction (CRT mode). NORMAL by default.

Apply every setting of the given preset, mode included

The current settings as a preset (see PixelArtPreset.toHaxe() to paste them in code)

Private Members #

Re-binds the shader when its asset is reloaded (shade hot reload)

Draws the source into bloomRenderTexture through the blur shader (CRT mode, halo)

Value last pushed as outputScale uniform

Values last pushed as screenRect uniform (the filter on screen, in screen pixels)

The scanline and vertical mask patterns repeat every 2 pixels of offset: the shader gets the offset reduced to [0, 2), so that a large offset (a far scroll of a big world) does not lose precision in its sin(), which would shift a line here and there.

Load (if needed) and bind the shader of the current mode. The shader asset is observed so that a shade hot reload re-binds a fresh clone.

Push every setting of the current mode to the shader

Push outputScale (when computed automatically) and screenRect, both derived from where the filter is on screen. Rotation is not taken into account.

Create or destroy the halo pass depending on the mode and bloomAmount

Metadata #