Trigger

The Trigger Template provides a base for creating Face Lenses that react to user events, including Face Events like Mouth Open and Brows Raised, as well as Touch Events. It provides helpers for using touch or face triggers to activate 3D and 2D animation and sound. Additionally, it can display different hints based on the opened camera.

Tutorial

Guide

Exporting 3D Content

The Trigger Template assumes that you have a 3D object which you'll be importing into Lens Studio. To make your 3D object ready for import into Lens Studio, follow the 3D Object Export guide.

Importing 3D Content

Once your 3D object is exported, follow the 3D Object Import guide to import your 3D object into Lens Studio.

Importing 2D Content

Once you your 2D content is exported, you can add it as a texture to Lens Studio by dragging and dropping the image(s) into your Asset Browser panel.

You can import animated content by following the 2D Animation guide on adding animated images.

Importing Sounds

Similarly, you can add sounds (mono channel MP3 is recommended) to Lens Studio by dragging and dropping the sounds(s) into your Asset Browser panel.

Attaching 3D Object to Face

Now that your content has been imported, you can start to put your lens together. First, drag your 3D object under the Head object which will attach your object to the user’s face.

We can use the Scene panel to position your 3D object correctly on the face. For more information on attaching a 3D object to your face, follow the Head Attached 3D Objects guide.

Adding Screen Image

We can additionally add 2D textures to the screen by using a Screen Image to add more layers to your Lens. This is useful for adding things like branding, and other effects (such as a vignette). In your Scene Hierarchy panel: + -> Screen Image. You can use the Scene panel to move your Screen Image to the correct location. You can learn more about the Screen Image in the Image guide.

Triggering a 3D Animation

If you have an animation that you want to be played on some action, in the Inspector panel of the Head object, drag the FaceTriggerAnim Script from the Asset Browser panel to the Inspector panel. You can select which event will trigger your animation.

Adding a Second Trigger

You can create multiple triggers in your lens by adding multiple FaceTriggerAnim Script to the Head object as above. You can specify actions other than playing 3D animation, such as playing 2D animation or sound.

For example, if you have a 2D animated texture on a Screen Image, under the 2D Anim Control section, you can press Add Value and select your Screen Image in the pop-up. Similarly, if you want to play music, under Sound Control, you can press Add Value and select your music from the pop-up. More information about each field can be found at the bottom of this guide.

Adding a Second Face Effects

You can have your effects and trigger work with a second face as well. To do this, start by duplicating the Head [EDIT_ME] object by Right Clicking -> Duplicate. Then, in the duplicated Head object, in the Inspector panel, under the Head Binding component, increment the Face Index field by 1. This will bind your new glasses to the second face (the first face is 0, and the second face is 1, and so forth).

Then, in the same object, under your FaceTriggerAnim Script component, set its Face Index field to 1 to match--this way a mouth opened event on the second face, will trigger the animation on the second face. Finally, like when setting up the first face effect, link up your duplicated animated 3D/2D objects and sounds underneath. For example, under 3D Anim Control, for the Animation Mixer field, make sure to select the Animation object (Sunglasses [REPLACE_ME]) under the duplicated head.

You can learn more about creating effects for a second face in the guide: Working with Multiple Faces

Adding Hints

You can also have the Lens display different hints based on a trigger. This is useful if you need different hints when the front camera is opened vs the back camera. To do this, select the Lens Hint object in the Scene Hierarchy panel and in it’s Inspector panel, drag the ShowHint Script from the Asset Browser panel to the Inspector Panel. Then in the script event drop down choose the event which should trigger this hint. Then, you can choose which hint you want to show in the Hint Id drop down, as well as configure how your hint is shown.

Hints are only shown on device. To see your hint, preview your Lens in Snapchat.

Previewing Your Lens

You’re now ready to preview your Lens experience. To preview your Lens in Snapchat, follow the Pairing to Snapchat guide.

Script Interface

FaceTriggerAnim.js

• Animation Trigger (Event) - An event type that will play 3D animation, 2D animation and sound

• Face Index (int) - The face which this trigger will reference. The first face is 0, the second face is 1, and so forth

• 3D Anim Control

  • Animation Mixer (Component.AnimationMixer) - The animation component which contains the animation you want to play
  • Layer Name (string) - The name of the animation layer you want to play when the animation trigger occurs
  • Play Count (number) - How many times the animation should be played. -1 will loop the animation forever

• 2D Anim Control

  • Play Animations (Component.SpriteVisual[]) - The BaseTex attached to these SpriteVisuals will be played based on the options below
  • Play Count (number) - How many times the sprites should be played when the animation trigger occurs. -1 will loop the animation forever
  • Play Offset (number) - The sprites play offset in seconds

• Sound Control

  • Play Sounds (Asset.AudioTrackAsset[]) - The AudioTrackAsset attached from the Resource panel will automatically be given an AudioComponent accessible by any state and will be played when we enter the state
  • Play Count (number) - How many times to play the sound when the animation trigger occurs. -1 will loop the sound forever
  • Trigger Disable Time - Time in seconds before this event can be triggered again

ShowHint.js

• Hint Id - The hint which will be shown before fading out
• Show Time (number) - Number of seconds hint should be shown before fading out
• Delay Time (number) - Number of seconds to wait before hint is shown
• Show Once (bool) - Whether this hint should be only be shown once or every time the script event is triggered