🎨 Filters

Filters let you apply visual effects to the entire screen, changing the overall look of your game.

🧪 Usage

To use a filter, simply pass a filter option when calling createGame:

createGame({
	filter: {
		name: 'neon'
	}
})

Each filter has a name, and can take custom settings using the settings key.

Available Filters

fractal

Turns each pixel of the image into a polygon.

filter: {
  name: 'fractal',
  settings: {
    sideCount: 12,   // Number of sides
    scale: 0.9,      // Global zoom (0 to 1)
    rotation: 0      // Rotation (0 to 1)
  }
}

crt

Simulates an old CRT screen with scanlines, distortion, and curvature.

filter: {
  name: 'crt',
  settings: {
    warp: 0.7,           // Screen curvature (0 to 1)
    lineIntensity: 0.2,  // Line opacity
    lineWidth: 0.6,      // Line thickness
    lineCount: 85        // Number of scanlines
  }
}

neon

Creates a glowing neon effect with a pixelated mosaic overlay.

filter: {
  name: 'neon',
  settings: {
    scale: 0.75,      // Tile size (0 to 1)
    intensity: 0.8    // Glow intensity
  }
}

document.body.style.setProperty('background', 'black')
//...

Custom Shaders

If you want full control, you can define your own WebGL shaders using the filter property.

A custom filter can include:

• a fragment shader (fragment)
• a vertex shader (vertex)
• any uniforms via settings

Here’s an example of a filter that inverts all colors:

const myShader = `
precision mediump float;
uniform sampler2D u_texture;
varying vec2 v_texCoords;

void main() {
  vec4 color = texture2D(u_texture, v_texCoords);
  gl_FragColor = vec4(1.0 - color.rgb, color.a);
}
`

createGame({
	filter: {
		fragment: myShader
	}
})

All settings values are injected into the shader as uniforms (prefixed with u_).