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());