Lens Studio is already powerful without custom code, but the ability to bring your own code to the platform is just amazing. Without further ado, let’s jump straight in and see how this can be done.
Mouth open and mouth closed events
Start by creating a new project without a template. After that, create an empty object that will host the script you’ll write shortly.
Next, create a Script from the Resources panel, as shown below.
Now drag that script to the Scene Object you created. Ensure that the object has been clicked. Once you do that, it will appear in the Inspector panel on the right — you can drag the script there.
Double click on the script in order to open it for editing in Lens Studio. You can also edit the script with any other code editor of your choice.
Next, add the emoji to the project, such that it appears on top of the person’s image. You can do this using the Legacy Billboard. Any other Mesh Visual component can also be used. Once it’s in place, drag the emoji to the Resources panel of your project. Thereafter, drag that image to the Texture field of the Legacy Sprite.
You can also use the 2D view to position the emoji to your liking, by dragging, adjusting its scale, etc.
Writing the script
First, you have to access the emoji. Since it’s a scene object the `@input` decorator can be used to access it.
Remember that you added the emoji image to the Legacy Sprite. Now you’ll need to go back to the Scene Object that you created. Notice that an input that allows you to add that Legacy Sprite has been created. Use the input to add the Legacy Sprite.
When this script is initialized, disable the visibility of the emoji. This is because the goal is to enable it when one opens their mouth.
Next, let’s write the code that will enable the emoji when one opens their mouth. This is done by accessing the mouth open event and binding a function to it. In that function, we access the emoji via script.emoji and enable it.
With the current settings, the emoji will never disappear. However, you want the emoji to vanish when the person closes their mouth. Doing this is similar to the the previous code snippet, only this time the mouth closed event is targeted.
Implementing tap events
Before calling it a day, let’s take a quick look at how you would implement the same behavior, but this time using tap events. The flow of events — no pun intended — will be the same with a few cosmetic changes.
The first change is that the tap event instead of the mouth event(s) is used. Finally, check to see if the emoji is enabled and disable it, and vice versa. Here’s the JS code snippet that will achieve that:
// -----JS CODE-----
// @input SceneObject emoji;
script.emoji.enabled = true;
script.emoji.enabled = false;
script.emoji.enabled = true;
var event = script.createEvent("TapEvent");
Check out the link below for a complete list of all events that you can target. There are also code snippets that you can start using right away.
If you are interested in extending this example, you can try out different events from the link provided above.