Behavior
The Behavior Template demonstrates how you can use Behavior script to create an interactive Lens without writing code. It comes with several examples, including how to change an image on tap, start particles based on your facial expression, running Tweens, and even calling your own custom code.
Tutorial
Guide
The Behavior template itself is composed of Helpers that can be added individually to your project. Take a look at each of their own documentation to learn more!
- Behavior: Use a drop down to choose different triggers, like screen touches and face event, to call responses like enabling/disabling objects, play animation, and more
- Tween: Animate an objects transform (position, location, rotation) and other properties of objects through the Inspector panel
- World Object Controller: Display an object only in the world side camera, as well as the ability to manipulate the object by screen touches.
Template Overview
The template comes with examples for how you can create different experiences using Behavior. Select each children of Behavior Examples in the Objects panel, then see its properties in the Inspector panel to learn about each one.
You can add the Behavior script into your project by selecting the + button in the Objects or Resources panel, and choosing Behavior.
Delay Fade In Image
This example shows how you can use Behavior to display a hint. There are two Behaviors:
- Fade in the hint after 6 seconds
- Hide the hint if the user taps.
Behavior is just a script that can be added to any object like any other script. Select the object, then in the Inspector panel, choose Add Component, then Script. Then select Add Script and choose Behavior.
In the first example, the hint is faded in using the Tween system. When working with Behavior or other components with references, a quick way to see how it works is to right click a field with a reference and choose Select in the popup menu. For example, right click the Target Object field containing Tap Hint, and choose Select.
Lens Studio will automatically choose the referenced object. We'll input an object with Tween Script attached into the Target Object slot. Make sure the Tween Script on the target object has the same name as the Tween Name in this Behavior script.
On Tap: Change Sticker
In this example, you can see how multiple Behavior scripts can be linked together to create more interactive experiences, even a list of them!
The main Behavior in this example is the one found on the On Tap: Change sticker object. This Behavior responds to Tap Events by calling other Behavior scripts. To communicate with other scripts, this Behavior uses the Send Custom Trigger option.
In addition, the Next In List option is selected so that every time this response is called, the next Custom Trigger in the list is triggered. This is what allows every tap to modify, enable or disable a different object.
Behavior scripts can communicate with other Behavior scripts using Custom Triggers. In addition you can use Custom Triggers to communicate between your own scripts and Behavior
The response for each Custom Trigger is set in the child objects. In each child object you can see two behavior scripts (similar to the previous example)--both responding to the same custom trigger listed in On Tap: Change Sticker Object. One changes the texture of the logo, and the other animates the logo using tween.
Thus, every time the user taps on the screen, the logo’s texture is changed as well as a bounce animation is played.
It is not important that they are set as a child object, as Custom Triggers function globally. In fact, you can have multiple Behavior respond to the same Custom Trigger, and arrange them anywhere in the scene.
It is important, however, that if you were to respond to a Custom Trigger in your own script, that the Behavior script itself is above your custom script in the Objects panel (as the Behavior sets up the Custom Trigger system).
On Tap: Show Ring
The On Tap: Show Ring example is very similar to the On Tap: Change Sticker example. The main difference here is that instead of changing the texture of an Image Component, it is setting a parameter for a material. Try using what you learned in the previous example to play with this example.
On Camera Flip: Show Hint
This example shows how you can use multiple Behaviors to modify how interactivity should work based on the users action.
In this case, you may want a user to show a hint to switch their camera if they haven’t yet swapped it yet. So there are two objects--each one to show a hint for each side of the camera.
In addition, there is a second behavior script in each hint that disables that object if the corresponding camera has already been triggered. When an object containing Behavior is disabled, the Behavior itself will no longer run.
This is a double edged sword as you may accidentally disable an interactivity without taking this into account.
For example, if you wanted an object to appear and disappear when a head is in the scene, you should NOT put the object as part of the appearing/disappearing object, as when the object disappears, so will the Behavior to bring it back.
Face Interactions
On Tap: Swap through face objects
Each object under Face Interactions is an example of how you can connect your own script with Behavior. This is useful as Behavior can take care of some of the common Lens Studio specific code, while you can focus on the specific logic of the interactivity you want.
For example, in the On Tap: Swap through face objects, we wrote a script that enables only one object in a list, and disables everything else. Then, we exposed this function through the api property. Finally, we called this script using Behavior by using the name of that function.
make sure the Function Name input field on Behavior needs to be an exact match of the API function in the custom script!
script.api.activateNextItem = activateNextItem;
Using this technique you can quickly change how you want your interactivity to be triggered as well. Changing between tap and face triggers is as quick as choosing from a drop down. This allows you to develop your AR experience much faster and iterate by tests!
On Face Event: Throw Particles
This example is similar to the previous. Try taking what you’ve learned previously and playing with this example!
On Tap: Swap through face objects
This example demonstrates another way you might want to use Behavior. In this case, the Behavior deals with the helper parts of your Lens so you can focus on your own Interactivity:
On front camera show hint: Like before you can use behavior to show a hint so users know how to interact with your Lens- On Lens start enable eye effects: You can enable the interactivity you want only when a condition is met using behavior as well
Change liquify based on touch position: This is our actual interactivity logic--in this case it’s not connected to Behavior at all!Prevent touches from going beyond Lens: Since the interactivity we’ve defined ask the user to touch the screen, we might want to disable some of the default behavior Snapchat has when the user touches the screen so that two things are not happening at the same time
World Interactions
The last example contains interactivity that you might want to do in a Lens facing the world side.
The world side objects are using the World Object Controller which will disable any child object if you are in the front facing camera, and enable it when it’s facing the rear
On Tap: Swap through world objects
Like On Tap: Swap through face objects this example demonstrates a Behavior interfacing with a custom script.
On Look At: Change Owl animation
Demonstrates the usage of two behavior scripts to modify the animation of a 3D object--the first when a user is looking at, and the second when the user is not looking at an object.
On Distance Change: Change Kitty animation
This example is similar to the previous example. However, in addition, it responds to one of the animations that’s played by playing another example when it ends!
There’s a lot of things you can do with Behavior. If you’re new to building interactivity, it can allow you to put unique interactions together without code. If you’ve been building interactivity, it can allow you to test and modify them faster and more efficiently. Try remixing what you’ve learned in these examples, as well as use them in your next project!
Previewing Your Lens
You’re now ready to preview your Lens. To preview your lens in Snapchat, follow the Pairing to Snapchat guide.
Related Guides
Please refer to the guides below for additional information: