Adding Hints is a great way to teach users how to interact with your Lens. Common Hints include "Open Your Mouth", "Look Around", "Try Rear Camera" and more. A single hint can be easily added to a Lens by setting the
Main Hint in the
Project Info window. This is explained in the Lens Hints guide. This only works if you want to show a single hint at the beginning of the Lens. For more complex hint use (like multiple hints or showing a hint on trigger), you need to script the hint. This guide first walks through an importable helper script used for showing hints that's tuned in the
Inspector panel. It then walks through how you can script Hints on your own for even more complex use cases.
Adding the Hints Package
Add the Hints package to your project by following these steps.
- Download the Lens Hints package
- Unzip the downloaded package
- Open your project in Lens Studio
- Drag and drop the
Lens Hints [EDIT_ME].lso( just downloaded ) into the
- You should see the
Lens Hints [EDIT_ME]object appear in your
Now you can add Hints to your Lens!
The Lens Hints package you just downloaded has two Hints added. In the
Inspector panel, you will see two
Script Components under the
Lens Hints [EDIT_ME] Object. The
ShowHints.js is bound to a specific
Event. The Hint will be displayed when the event is called.
For example, in this case, "Open Your Mouth" will be displayed with user switches to the front camera.
You can add more Hints by adding a Script Component and selecting
ShowHints.js in the Scripts folder in the Resources panel. Alternatively, you can also drag and drop the
ShowHint.js from the Resources Panel to the Inspector Panel.
You will not see the actual Hint message in Lens Studio. The Hint will only appear when you preview your Lens on your device. For debugging hints in Lens Studio, a print statement like "Showing Hint: lens_hint_open_your_mouth" will be displayed in the
ShowHints.js script has a number of settings that can be configured in the
- Hint Id - The hint to show. A drop down of all available hints
- Show Time - The number of seconds that the hint message will be displayed
- Delay Time - The number of seconds to wait before showing the hint after the Event is triggered
- Show Once - If enabled, the hint will only show once. If not, the hint will be displayed every time the Event gets triggered
Hints will continue to display when users are recording snaps. However, in the resulting Snap, the hint message will not be visible
Script Your Own Hints
You can also script your own
Hints directly instead of using the above package. For hints to work, you need to first create a
Hints Component in Script.
var hintComponent = script.getSceneObject().createComponent( "Component.HintsComponent" );
You can control the Hints Component by using the methods
showHint(hintID, showDuration) and
hideHint(hintID). HintID is an ID that references a specific Hint string. Here is a list of supported HintIDs:
lens_hint_aim_camera_at_the_sky lens_hint_blow_a_kiss lens_hint_blow_a_kiss_voice_changer lens_hint_come_closer lens_hint_do_not_smile lens_hint_do_not_try_with_a_friend lens_hint_draw_with_your_finger lens_hint_find_face lens_hint_find_image lens_hint_find_marker lens_hint_find_snapcode lens_hint_kiss lens_hint_kiss_again lens_hint_look_around lens_hint_look_down lens_hint_look_left lens_hint_look_right lens_hint_look_up lens_hint_make_some_noise lens_hint_move_your_head lens_hint_nod_your_head lens_hint_now_kiss lens_hint_now_open_your_mouth lens_hint_now_raise_your_eyebrows lens_hint_now_smile lens_hint_open_your_mouth lens_hint_open_your_mouth_again lens_hint_open_your_mouth_voice_changer lens_hint_pick_a_face lens_hint_pick_a_photo lens_hint_pick_an_image lens_hint_raise_your_eyebrows lens_hint_raise_your_eyebrows_again lens_hint_raise_eyebrows_or_open_mouth lens_hint_raise_your_eyebrows_voice_changer lens_hint_rotate_your_phone lens_hint_say_something lens_hint_smile lens_hint_smile_again lens_hint_smile_voice_changer lens_hint_swap_camera lens_hint_tap_a_surface lens_hint_tap_ground_to_place lens_hint_tap_surface_to_place lens_hint_tap_ground lens_hint_tap lens_hint_tilt_your_head lens_hint_try_friend lens_hint_try_rear_camera lens_hint_turn_around lens_hint_voice_changer lens_hint_walk_through_the_door
Example of Scripting Hints:
hintComponent.showHint("lens_hint_tap", 3); hintComponent.hideHint("lens_hint_tap");
Still Looking for help?Visit Support