Auto Draft

Created on September 03, 2019, Last modified on June 08, 2021

The following properties determine how the active texture, and/or the descendants textures, are being rendered.

Name	Type	Default	Description
`alpha`	Float	1	Opacity: 0 = transparent, 1 = opaque
`visible`	Boolean	true	Enable / disable rendering
`color`	Hex	0xFFFFFFFF	Color (ARGB)
`colorTop`	Hex	0xFFFFFFFF	Top color of a color gradient.
`colorBottom`	Hex	0xFFFFFFFF	Bottom color of a color gradient.
`colorLeft`	Hex	0xFFFFFFFF	Left color of a color gradient. (overwrites: `colorUl`, `colorBl`)
`colorRight`	Hex	0xFFFFFFFF	Right color of a color gradient. (overwrites: `colorUr`, `colorBr`)
`colorUl`	Hex	0xFFFFFFFF	Top-left color of a color gradient.
`colorUr`	Hex	0xFFFFFFFF	Top-right color of a color gradient.
`colorBl`	Hex	0xFFFFFFFF	Bottom-left color of a color gradient.
`colorBr`	Hex	0xFFFFFFFF	Bottom-right color of a color gradient.
`clipping`	Boolean	false	Enables clipping (only for rectangular)
`zIndex`	Integer	0	z-Index sets render priority
`forceZIndexContext`	Boolean	false	Enables a z-index context
`shader`	Object	{}	Sets a non-default shader

Visibility

The visibility of an element can be toggled using the visible property. When an element is invisible, it will not be rendered (saving performance). Notice that off screen elements are also not rendered, so it's not necessary to manually hide those to save performance.

The alpha property defines the opacity. Setting alpha to 0 also prevents the element from being rendered. Alpha affects the opacity all descendants as well.

Color

The color can be used to colorize the currently active texture. You can specify different directions / corner points to create a gradient. Check more on textures to see colorization in action.

Clipping

When clipping is activated, everything outside of the dimensions of this element is not rendered. In that sense the effect is similar to overflow:hidden in CSS. In Lightning it might even give a performance boost, because descendants outside of the clipping region are detected and don't have to be rendered.

Clipping is implemented using the ultra performant WebGL scissor operation. A consequence of that is that it does not work for non-rectangular areas. So if the element is rotated (by itself or any of its ancestors), clipping will not be performed. If you are running into this case, use the advanced renderToTexture, which, as a side effect, also causes clipping.

Z-indexing

Lightning also supports z-indexing, similar to CSS. It alters the order in which the textures are being rendered as you'd expect. In Lightning, a z-index context is created by:

setting a non-zero zIndex
setting forceZIndexContext (can be handy in combination with zIndex: 0)
setting renderToTexture

Shader

The shader can affect the way that textures of the element and descendants are being rendered:

class LiveDemo extends lng.Application {
    static _template() {
        return {
            shader: {type: lng.shaders.Grayscale, amount: 0.9},
            LilLightning:{ x: 100, y: 50, src: '/Lightning/img/LngDocs_LilLightningIdle.png'},
            Header: {
                rect: true, w: window.innerWidth, h: 50, color: 0xff005500
            },
            SubLilLightning: {
                x: 400, y: 50, src: '/Lightning/img/LngDocs_LilLightningIdle.png',
                shader: null // Reset shader to default.
            },
            SubLilLightning2: {
                x: 400, y: 250, src: '/Lightning/img/LngDocs_LilLightningIdle.png',
                shader: {type: lng.shaders.Inversion} // Reset shader to other.
            }
        }
    };
}

const app = new LiveDemo({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(app.stage.getCanvas());

Go To Top