Class TextRenderer

The TextRenderer component allows to render text using font families, colors, and other configuration options.

Example

const textRenderer = new TextRenderer({
  text: "Hello World!",
  color: "#FFFFFF",
  fontSize: 24,
  font: "Arial",
  width: 1920,
  height: 32,
  layer: "TextLayer",
});

Example

const textRenderer = new TextRenderer({
  text: "Hello World!",
  color: "#FFFFFF",
  fontSize: 24,
  width: 1920,
  height: 32,
  opacity: 1,
  layer: "TextLayer",
  orientation: TextOrientation.RightCenter,
  shadow: {
    color: "#00FF00",
    offset: new Vector2(3, -3),
    opacity: 0.5,
  },
  textureAtlas: {
    charRanges: [32, 126, 161, 255, 0x3040, 0x309f],
    fontSize: 64,
    spacing: 4,
  },
  font: "Arial",
  flipHorizontally: false,
  flipVertically: false,
  letterSpacing: 0,
  lineHeight: 24,
  offset: new Vector2(0, 0),
  rotation: 0,
  smooth: false,
});

Constructors

constructor

Properties

color flipHorizontally flipVertically font fontSize height layer letterSpacing lineHeight offset opacity orientation rotation shadow smooth text textureAtlas width

Constructors

constructor

Properties

color

color: string = "#000000"

The text color

flipHorizontally

flipHorizontally: boolean = false

Flip the text horizontally

flipVertically

flipVertically: boolean = false

Flip the text vertically

font

font: string | FontFace = "Arial"

The font family to use

fontSize

fontSize: number = 16

The size of the font in pixels.

height

height: number = 16

The height of the invisible box where the text is rendered

layer

layer: string = defaultRenderLayer

The render layer

letterSpacing

letterSpacing: number = 0

The space between chars in pixels

lineHeight

lineHeight: number = undefined

The height of the line in pixels. Default value is equal to the font size

offset

offset: Vector2 = ...

X-axis and Y-axis offset

opacity

opacity: number = 1

Change the opacity between 1 and 0

orientation

orientation: TextOrientation = TextOrientation.Center

Direction in which the text will be rendered.

rotation

rotation: number = 0

Text rotation in radians

shadow

shadow: {
    color: string;
    offset: Vector2;
    opacity: number;
} = undefined

Shadow text configuration

Type declaration

  • color: string

    Shadow text color

  • offset: Vector2

    Shadow text offset in pixels

  • opacity: number

    Shadow text opacity

smooth

smooth: boolean = false

Smoothing pixels (not recommended for bitmap fonts)

text

text: string = "Hello World!"

The text to render

textureAtlas

textureAtlas: {
    charRanges?: number[];
    fontSize?: number;
    spacing?: number;
} = ...

The texture atlas configuration

Type declaration

  • OptionalcharRanges?: number[]

    Range of characters covered by the component defined in number pairs. The default value is [32, 126, 161, 255], this means that the component will render characters from 32 to 126 and from 161 to 255.

  • OptionalfontSize?: number

    The size of the font in pixels for bitmap fonts.

  • Optionalspacing?: number

    Spacing in pixels to correct badly sliced characters.

width

width: number = 160

The width of the invisible box where the text is rendered

Settings

Member Visibility

On This Page

Constructors
Properties