Text

Published: September 03, 2019
Edited: November 06, 2020

The lng.Text texture allows for rendering a piece of text within an element. There are many properties that give you control over how and using which font the text is being rendered.

Properties

NameTypeDefaultDescription
textString''Text to display.
fontFaceIntegernullFont-family used for current text.
fontSizeInteger40Font size.
fontStyleString'normal'Font style.
lineHeightIntegernullLine height.
textAlignString'left''left', 'right', or 'center'
verticalAlignString'top'When lineHeight is larger than fontSize, specifies how text should align vertically inside each line.

Avalilable values: 'top', 'middle', or 'bottom'
wordWrapBooleantrueAllows long sentences to be broken into new lines.
maxLinesInteger0Maximum number of lines to display before truncation.
maxLinesSuffixString'..'String to display at end of line when truncating.
wordWrapWidthInteger0Width set to start wrapping to next line.
textOverflowStringnullDisabled by default. Truncates long blocks of text to size of wordWrapWidth. Active when wordWrap is set to false.

Available values:
'ellipsis' - string ends with maxLinesSuffix
'clip' - no suffix
'custom string' - string ends with user specified custom string
textBaselineString'alphabetic'
textColorHex0xFFFFFFFFDesired text color.
paddingLeftInteger0Padding left.
paddingRightInteger0Padding right
highlightBooleanfalseEnable highlight.
highlightColorHex0xFF000000Highlight color.
highlightOffsetInteger0Highlight offset.
highlightPaddingLeftInteger0Highlight padding left.
highlightPaddingRightInteger0Highlight padding right.
offsetXInteger0Text offset x.
offsetYInteger0Text offset y.
shadowBooleanfalseEnable text shadow.
shadowColorHex0xFF000000Text shadow color.
shadowOffsetXInteger0Text shadow offset x.
shadowOffsetYInteger0Text shadow offset y.
shadowBlurInteger5Text shadow blur iterations.
cutSxInteger0Text cutting x start position.
cutExInteger0Text cutting x end position.
cutSyInteger0Text cutting y start position.
cutEyInteger0Text cutting y end position.

Live demo

Below, various examples of text styling.

class TextDemo extends lng.Application {
    static _template() {
        return {
            x: 50,
            y: 50,
            Text: {
                text: {
                    fontSize: 36,
                    textAlign: 'center',
                    maxLines: 2,
                    text: 'Text a little too long so this part won\'t be visible',
                    wordWrapWidth: 180,
                    textColor: 0xffff00ff,
                }
            },
            Text2: {
                x: 150,
                y: 100,
                text: {
                    fontSize: 60,
                    text: 'STYLE IT UP! ',
                    fontStyle: 'italic bold',
                    textColor: 0xff00ffff,
                    shadow: true,
                    shadowColor: 0xffff00ff,
                    shadowOffsetX: 2,
                    shadowOffsetY: 2,
                    shadowBlur: 2,
                }
            },
            Text3: {
                mountX: 1,
                x: 530,
                y: 230,
                text: {
                    fontSize: 48,
                    textAlign: 'right',
                    text: 'you can also add\nline breaks\nusing\n\\n!',
                    lineHeight: 80,
                }
            },
        }
    }
}

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

PHP Code Snippets Powered By : XYZScripts.com