Skip to content

Darkness Light Renderer

DarknessRenderer & LightRenderer

The engine’s lighting system consists of two components that work together:
DarknessRenderer and LightRenderer.

DarknessRenderer draws a darkness mask that can partially or fully cover an area of the screen.
LightRenderer defines light sources that illuminate specific areas within the darkness mask.

DarknessRenderer

The DarknessRenderer component creates a rectangular darkness mask.
It can be configured with color, opacity, dimensions, and render layer.

Properties

Property Type Description
width number Width of the darkness area in pixels.
height number Height of the darkness area in pixels.
color string Color of the darkness.
opacity number Opacity between 0 and 1.
layer string Render layer.

Example

const darknessRenderer = new DarknessRenderer({
    width: 100,
    height: 50,
    color: "#000000",
    opacity: 0.5,
    layer: "Default",
});

LightRenderer

The LightRenderer component defines a circular light source.
These lights visually affect DarknessRenderer instances that share the same layer.

Properties

Property Type Description
radius number Radius of the light.
smooth boolean If true, softens the edges of the light.
layer string Render layer (must match the DarknessRenderer layer).
intensity number Light intensity between 0 and 1.

Example

const lightRenderer = new LightRenderer({
    radius: 100,
    smooth: true,
    layer: "Default",
    intensity: 0.8,
});

Combined example

const darkness = new DarknessRenderer({
    width: 500,
    height: 500,
    color: "#000000",
    opacity: 0.7,
    layer: "Game",
});

const light = new LightRenderer({
    radius: 120,
    smooth: true,
    layer: "Game",
    intensity: 1,
});

Notes

  • For a light to affect a darkness mask, both components must share the same layer value.
  • Multiple LightRenderer components can illuminate a single DarknessRenderer.
  • The smooth parameter in LightRenderer enables smooth transitions between light and shadow.
  • The intensity controls how strongly the light affects the darkness.
  • All lighting calculations (mixing lights with darkness) are handled by the rendering system. The components only define visual attributes.