Add disappearing messages to your Snapchat lenses
In this tutorial we'll go over how to add credits to your lens/filter. Adding credits or a call-to-action to your lens could potentially help you grow your subscriber base or credit another creator with whom you've collaborated, but you don't want it to be obtrusive. Here you'll learn how to fade out the credits after several seconds and also ensure it never shows up while the user is taking a picture or video.
Setting up the scene
For this tutorial we are going to start with a blank project, but it is easy enough to add to an existing lens. In the Objects Panel, add some Screen Text, a Behavior Script (found in the Helper Scripts submenu), and a Tween Manager (also in the Helper Scripts submenu).
Configure your text
When you added the Screen Text, you may have noticed that it was nested underneath a Full Frame Region. Select this frame region, and then over in the Inspector Panel change the Screen Region from Full Frame to Safe Render. Why? Well, the Snapchat interface will cover up parts of the top and bottom of the screen. The Safe Render region makes sure our content is not covered by the Snapchat UI. Once that is done, go ahead and edit your text. You can change the font, the size, the position, etc.
Configure the scripts
When the Tween Manager is added to a scene, it brings along a bunch of examples. Find the Tween Manager in the Objects Panel and delete all the examples nested under it. If your Behavior script got nested under the Tween Manager, make sure to leave that. Move the Tween Manager to the top of the scene hierarchy and rename the Behavior script to something like 'Credits.' Your setup should look something like the below image.
The behavior script
Our first task will be to make sure our lens credits are never visible while the user is taking a picture or video. For that we will use the Behavior script. Select the Credits script object in the Objects Panel so that the script options are visible in the Inspector Panel.
- Change the trigger to
Recording Start - Change the response type to
Set Enabled - For the target choose your Screen Text
- Set the action to
Disable
We'll still be adding the fade-out effect, but this behavior script makes sure that if the user takes a snap before the credits have faded out that they aren't present in the captured image/video.
Fading out with tweens
What is a tween? If we were normal people we'd be referring to a pre-teen, but since we are making lenses, it means something else. Tweening is short for 'inbetweening.' We have a start value and an end value and the tween script will take care of calculating all the inbetween values. These could be position, rotation, or scale values, but in our case we are going to use alpha (transparency) values.
Underneath the script options we just set for the Behavior script, click the 'Add Component' button and choose 'Script.' Click the 'Add Script' button and then find the TweenAlpha script. It is found in Tween -> TweenTypes -> TweenAlpha.
- For the Scene Object, choose your Screen Text
- Change the
Startvalue to 1 (fully visible) and theEndvalue to 0 (fully transparent) Timewill be how long the transition lasts andDelaywill be how long before the transition beginsEasing Functionwill determine how the transition occurs. Most of the easing functions will give smooth transitions, the main difference being the speed at which the transparency changes at different stages.
A fun example to try would be a Time value of 0.3, a Delay of 3.0, and an Easing Function of Bounce. This gives a nice flickering out effect, but feel free to try out different easing functions, times, and delays to find what suits your lens best.
