Created on September 03, 2019, Last modified on May 19, 2022

The following properties affect the position of an element.

mountFloat0Texture mountpoint: 0 = top-left, 0.5 = center, 1 = bottom-right
mountXFloat0Texture mountpoint (horizontal axis)
mountYFloat0Texture mountpoint (vertical axis)


The position of an element can be defined by using the x and y properties. Elements are positioned relative to their parent (like position: absolute in CSS). Lightning also allows more advanced forms of layouting using Flexbox.


By using the w and h properties one can define the dimensions of an element. When a texture is attached to an element, and no w or h has been set, the element will inherit the dimensions from the active texture.


The mountX and mountY property can be used to specify the alignment of the element relative to the x and y properties. By default they are 0, which means that the top-left corner of the element is positioned at the xy coordinates. When set to 0.5, the xy coordinates will define the positioning of the center of the element. When they are set to 1, the bottom-right corner of the element will be placed on xy.

Dynamic calculations

You can use a numeric value (in pixels), but it is also possible to specify a function that returns the value based on the parent's width (x, w) or height (y, w). These functions will only be called again if the parent's dimensions (might) change.

class LiveDemo extends lng.Application {
    static _template() {
        return {
            Header: {
                rect: true, w: window.innerWidth, h: 50, color: 0xff005500,
                Title: {
                    x: (w => w - 50), mountX: 1, mountY: 0.5, y: 30,
                    text: { text: 'Header' },
                    OverlayGradient: {
                        w: (w => 0.25 * w),
                        rect: true,
                        colorLeft: 0xFF000000,
                        colorRight: 0x00000000

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

Give feedback

Rating - 4.2 / 5. . Reviews - 5

No votes so far! Be the first to rate this post.

Go To Top