Documentation
Core
Elements
Text

Text

⚠️

This page is under construction.

⚠️

Beta feature, subject to change.

Text allows you to display text on the screen.

For example:

const t1 = new Text("After that, another story happened...", {
    position: CommonPosition.Positions.Center,
    fontColor: "#f00",
    fontSize: 20,
});
 
// turn the background to black with fade effect
// then show a text "After that, another story happened..."
scene2.setBackground("#000", new Fade(1000));
t1
    .show({
        duration: 1000,
        ease: "easeInOut",
    });

Public Method

constructor

Overload 1 of 2

Overload 2 of 2

  • text: string - The content of the text
  • config?: Partial<TextConfig> - TextConfig

Chainable Method

applyTransform

applyTransition

show

Overload 1 of 3

Show the image immediately

text.show();

Overload 2 of 3

Show the image with custom transform

Note: You need to add "opacity: 1" in the props to make the image visible

text.show(new Transform<TransformDefinitions.TextTransformProps>([
    {
        props: {
            opacity: 1,
        },
        options: {
            duration: 1000,
            ease: "easeInOut",
        },
    }
]));

Overload 3 of 3

Show with transform config

text.show({
    duration: 1000,
    ease: "easeInOut",
});

hide

Overload 1 of 3

Hide the image immediately

text.hide();

Overload 2 of 3

Hide the image with custom transform

Note: You need to add "opacity: 0" in the props to make the image invisible

text.hide(new Transform<TransformDefinitions.TextTransformProps>([
    {
        props: {
            opacity: 0,
        },
        options: {
            duration: 1000,
            ease: "easeInOut",
        },
    }
]));

Overload 3 of 3

Hide with transform config

text.hide({
    duration: 1000,
    ease: "easeInOut",
});

setText

  • text: string - The content of the text

setFontSize

  • fontSize: number - The font size of the text in pixels
  • duration?: number - The duration of the transition in milliseconds
  • easing?: TransformDefinitions.EasingDefinition - The easing function of the transition, see TransformDefinitions.EasingDefinition
ControlAnimation