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 Overflow
setting.
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
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.