Skip to main content
Version: 5.x

Text Overview

The Text component allows you to add text to your Lens experience. This is a great way to add text to your Lens without incurring the size-on-disk cost of using images. Additionally, the Text component is scriptable so you are able to create dynamic text like the score for a game-like experience.

Text

Add Screen Text

To add a new Text element attached to the Screen, select + -> Screen Text from the Scene Hierarchy panel.

Edit Text

With the new Text object selected in the Scene Hierarchy panel, edit the Text field in the Inspector panel to modify the Text.

The Text object supports multiline word wrapping through the Wrap mode for the Horizontal Overflowsetting.

Add Dynamic Text

You can add Dynamic Text to your Text by clicking the Insert button labeled with Dynamic Text.

You'll be presented with a list of Dynamic Text types that can be added. Available Dynamic Text types include: Altitude, Birthday, City, Date, Date Short, Date and Time, Day, Display Name, Month, Temperature, Time and Weather. Dynamic Text types, when added, are treated as characters in your Text and are dynamically replaced during runtime. To remove a Dynamic Text element, simply remove it from the Text field.

Adjust Font

You can adjust the Font used by the Text. You can tune the Text size via the Font Size field.

A custom font can be selected via the Custom Font field.

New fonts can be added to the project by drag and dropping a TTF or OTF to the Asset Browser panel. You can also add a Lens Studio built-in font by selecting + -> Font in the Asset Browser panel.

Size To Fit

You can set Text to resize automatically to the Screen Transform bounds by enabling Size To Fit.

Adjust Alignment

Text can be aligned to the Text's bounding box via the Vertical Alignment and Horizontal Alignment buttons.

Adjust Overflow

You're also able to configure how the Text wraps both vertically and horizontally via the Vertical Overflow and Horizontal Overflow drop downs.

Available Overflow modes are:

Overflow - Overflowing text draws beyond the Text's screen bounds
Wrap - Overflowing text will wrap to a new line (may draw beyond the Text's screen bounds)
Truncate - Overflowing text be hidden (truncated)
Shrink (Horizontal only) - Font size will automatically adjust to fit all text within the Text's screen bounds

Stylize the Text

There are a number of settings available to configure the style of your text. First, with the Fill Mode drop down set to Color, you can configure the color of the Text.

With the Fill Mode drop down set to Texture, you're able to configure a texture that is overlaid on the Text.

With the Outline checkbox enabled, a solid outline will surround the Text.

You're able to configure the outline's fill mode (color or texture). You can also configure the size of the outline via the Size slider.

With the Shadow checkbox enabled, a drop shadow is added to the Text.

You're able to configure the shadow's fill mode (color or texture). You can also configure the vertical and horizontal offset of the shadow.

Background

You can create a background for Text by enabling the Background property.

You can set a solid Color background:

You can also set a Texture background:

Adjust the Margins property to create some padding for the background:

Advanced Layout

Extents Target

You can use the extents of a Text Component's bounding box to control the sizes of another Screen Transform. This is helpful for laying out content that fits closely to the rendered bounds of the text itself

To try this out, expand the Advanced Layout group on a Text Component in the Inspector.

Next, select a target Screen Transform in your by selecting the field labeled Extents Target. This is the Screen Transform that will be modified to fit to the extents of your Text Component.

In example below, the blinking cursor is a Screen Image parented to a Scene Object whose Screen Transform is used as the Extents Target of the text.

This setup allows the cursor to move dynamically as the body of the text changes in length.

Letter Spacing

You can adjust the spacing between letters of your Text by adjust the Letter Spacing slider.

Screen Transform

Screen Text objects always come with a Screen Transform component. The Screen Transform allows you to adapt screen attached Text to device resolution changes. Please refer to the Screen Transform guide for a detailed walkthrough on the power of Screen Transform including some commonly used setups.

Scripting Text

One of the biggest benefits of using the Text component over an image of text is that you can programmatically change it via script. Below are some common things you might want to do when scripting the Text. For more information, take a look at the scripting API for the Text Component. If you are new to scripting, be sure to refer to the Scripting Overview and Scripting Example guides.

Set Text

The script below will set the Text to the input string. You can use this code as a starting point to create a system that programmatically sets the text.

// @input Component.Text text
// @input string myText
script.text.text = script.myText;

In this Inspector panel, the above script is utilized to change the Text when the user opens their mouth via the Mouth Opened event.

Set Size

The script below will set the Text's size to the input size. You can use this code as a starting point to programmatically change the size of a Text.

// @input Component.Text text
// @input float mySize
script.text.size = script.mySize;

Set Color

The script below will set the Text's color to the input color. You can use this code as a starting point to programmatically change the text's color.

// @input Component.Text text
// @input vec4 myColor = {1,1,1,1} {"widget":"color"}
script.text.textFill.color = script.myColor;

Enable Editing

Image showing how to enable the Editing field

To enable editing of the text via the keyboard, check the Editable field of the component. An interaction component will automatically be added to the Scene Object and is the default interaction component for detecting touches to open the keyboard.

To override this interaction component, use the Touch Override input of the component.

The Show Preview input controls whether the keyboard will show a preview of the text that is being typed.

Was this page helpful?
Yes
No

AI-Powered Search