Add Text, Tweens, and Behavior Script Interactions
This is the fifth tutorial in the Building Your First Lens series. This tutorial series walks through all of the steps for creating your first AR project (Lens) in Lens Studio. At the end of this series you will have recreated the Birthday Countdown sample project, learning all of the steps and pieces to create your own AR experiences.
This step of the tutorial has three sections and will walk through the steps to add text into your Lens, work with Tweens to create smooth movement of digital objects, and respond to Lens events using Behavior Script.
Prerequisites
- Download the latest version of Lens Studio
Adding Text To Your Lens
The power of Lenses comes from blending digital content with the elements of the real world. Whe have focused on 3D assets and face effects up until this point, but ensuring that text is represented in a cohesive layout is just as important. This section focuses on customizing text to create a unique effect.
In the Scene Hierarchy panel, select the Head Binding object so that a newly created object will be creatd as its child.
Then press the + button and search for the Text object to add text to the scene.
Rename the new Text Object so that it has a clear name.
With the new Text object selected, we can see the Text component in the Inspector panel with various options to adjust.
Let's set the text to say "Happy Birthday", adjust the font size, and explore what other options are available to us.
If your text looks distorted in the preview, this is because it is being affected by the Face Stretch object.
To fix this, simply adjust the render order of the Text object so that it will be rendered (displayed) after the Face Stretch has been applied.
This is shown in the yellow circle.
If you wish, you can swap the default font for your own!
If you are not sure where to find another font, Google Fonts has a great selection of free fonts to choose from. Be sure to review the license for any font you download.
Once downloaded, you can drag and drop the font into the Asset Browser, then set it in the Custom Font field of the Text component.
Once you are happy with the look and placement, let's duplicate the Text object by right clicking on it in the Hierarchy and selecting Duplicate.
Then position it below the original text to add a subtitle.
In the Hierarchy, select + and search for Tween.
This will add a new Tween Manager object and a ton of examples that you can review to see how you can use Tweens to adjust all sorts of values.
For our use case, we will be adding this ourselves, so we can right click on the Examples [Remove_ME] object and select Delete.
If we look at the TweenManager folder in the Asset Browser, we can see that TweenManager and Tweens are scripts written in JavaScript.
We will cover scripts in more detail at a later point, however there are two important points to know:
- The Scene hierarchy represents the order in which scripts will run.
- A script at the top of the hierarchy will be executed before one below it.
- In our scenario, the tweens we are adding will need to use logic from the TweenManager.js script, so we need to make sure that the TweenManager.js script is already setup before we run our tween scripts.
Create a new parent object for our text objects.
In the Hierarchy, select the Head Binding, click +, and add a Scene Object. Rename it for clarity, then add the Text objects as Children to it.
This is a useful step as it gives us the ability to modify attributes on the parent and affect all of the children
Now its time to add the Tween to our object.
Select the TextParent object, then in the Inspector, select Add Component and search for TweenTransform.
The Tween Tranform component has several built in options for adjusting the values of the Transform component.
Try changing the Loop Type, Type, Start/End, Time, and Easing Function to see how you can create different animations with just a few button presses.
Here are the final settings we will be using for our Tween:
Ensure that the Transform component's scale is set to 0,0,0.
Set the TweenTransform Type property to Scale and the start and end values to 0 and 1.10 respectively.
We also want to set the Tween Name to "PlayForward" which we will use in the next section to start this effect dynamically rather than using the Play automatically functionality
Tip: If we leave the Scene Object field blank as we have done in this example, the Tween will apply to the scene object that it is a component of.
You can set this to another object if you wish to apply the tween to another object in the Scene.
In the Hierarchy, click the + and search for Behavior to add it.
As with the TweenTransform script, this is a script that has various options we can adjust in the component view in the Inspector
The Trigger and Event Type values are used to set the event we want to respond to.
The Response Type dropdown has various options we can set so the Lens does a specific action when the event has occurred.
In our case, let's set the Response Type to "Run Tween" which will start the tween we specify.
- Set Target Object to the TextParent object
- Set the TweenName to the same name we used in the TweenTransform component
- Ensure that the TweenTransform component on the TextParent object has Play Automatically unchecked.
Check out all of the different events you can listen for with the Behavior Script.
Once you have explored the different options in Behavior Script, configure it so that it is listening for the Mouth Opened event which can be found when Trigger is set to Face Event.
Summary
Tweens are used to interpolate be Tween values and are a great way to add polish and animations to your Lens without needing to create a custom animation.
The Behavior script is a great resource for adding dynamic interactions to your Lens!
Note: Now that we have several different kinds of content in our Asset Browser, we should organize our project by moving these assets into folders.
- Right Click in the Asset Browser and select Create Folder.
- Create one for Materials, Textures, Fonts, etc.
- Move those assets into their new respective folders