Note: This template was originally released as part of Lens Studio 1.0. Since then, significant improvement has been made to Lens Studio to provide better ways of achieving the same result as this template. You can download the legacy template from the Asset Library.
The Interactive Path template is an evolution of the Interactive Tap Template with additional functionality that allows a character to move on the surface plane. The user is able to draw a path with their finger along the surface and when complete, the character will move along that drawn path.
Exporting 3D Content
The Interactive Path Template assumes that you have a 3D animated object which you'll be importing into Lens Studio. First you must export your object to be Lens Studio ready. To do this, follow the 3D Object Export guide.
The Interactive Path Template optionally needs four layers of animation in the exported FBX. To learn more about how to prepare multiple animation layers, follow the Maya Export guide. If your 3D tool does not support animation layers, you can create Animation Clips inside Lens Studio. Follow the Playing 3D Animation guide's Animation Clip section for information on how to create Animation Clips.
Importing 3D Content
Once you have your 3D object exported, follow the 3D Object Import guide to import your 3D object into Lens Studio.
Linking the World Object
After importing, the 3D object will be automatically included in the
Objects panel and should also be visible in the
Scene panel. Next, you'll want to drag your newly imported object to be a child of the
WorldObjectController object. You can now delete the template's placeholder object labeled with
Linking the Animation
Next, we need to link the imported object's
AnimationMixer component to the
IdleAnim script. Select the
WorldObjectController object and open the
Inspector panel. Find the
IdleAnim script and link the
Animation Mixer field to your model's animation mixer.
Setting the Animation Names
When using multiple animations in a single FBX, they will be imported into Lens Studio as
Animation Layers. If all of the animations are on one single timeline you can cut them into clips using the Animation Mixer's Clips tool. These clips will be treated as Layers. You can find more information regarding animation clips in our Playing 3D animation guide.
These layers can be used to define the additional animations that will play on interaction. For the Interactive Path Template we can use up to four animations to expand on the behavior of found in the Interactive Tap Template. First, set the
Idle Anim Layer field to the layer name of your looping idle animation. Then, set the
Tap Anim Layer field to the layer name of your tap animation which will play when the object is tapped.
Next locate the
Follow Path Anim script object and set the
Path Anim Layer field to the layer name of the animation you'd like to use while the character moves along the path. This should be a looping animation. Do the same for the
Arrive Anim Layer field by entering the name of the animation you'd like to use when the character reaches the end of the path.
The object layout for the Interactive Path Template has a similar layout to the Interactive Tap Template with a few additional objects. The Idle animation and the Tap animation are still controlled as you would expect from the Tap Template which can be found on the WorldObjectController.
Please make sure you're familiar with the Interactive Tap Template if you have trouble understanding the Tap and Idle functionality of this template
- Drawing Object - This object is used to draw the path for the character to follow. This object should not be edited
- Finger Tracker - This is an invisible object for tracking the users finger as they draw the path and helps to determine the direction of the drawn path. This object should not be edited
- FollowPathAnim - This object contains the script for all of the path following logic
Follow Path Anim Script
The FollowPathAnim.js script handles the movement of the character along the path. It also draws a visual representation of the path.
Path Animation Settings
Idle Anim Script (ScriptComponent)- This value is a reference to the WorldObjectController SceneObject that contains an instance of IdleAnim.js and is recommended not to be adjusted unless necessary
Path Anim Layer (string)- The name of the animation clip or layer that the object will play when moving along the path
Arrival Anim Layer (string)- The name of the animation clip or layer that the object will play when moving along the path
Path Move Settings
Drawing Object (MeshVisual)- A reference to the mesh that will be used to draw the path the object will move along
Drawing Curve Mat (Material)- This is the material that will be applied to the Drawing Object while a user is actively drawing the path
Final Curve Mat (Material)- This is the material that will be applied to the Drawing Object when the path is complete and the object is moving along that path
Follow Object (SceneObject)- This is the object that will move along the path and should be the WorldObjectController SceneObject
Tracker Object (SceneObject)- This is an invisible object that is tracked to the users finger and helps derive position and orientation of stroke along path
Move Speed (float)- This is how fast the object will move along the path
Follow Audio (AudioTrackAsset)- A reference to an Audio Track Asset in resources. This is a looping sound that plays while the character or object is moving along the path
Arrive Audio (AudioTrackAsset)- A reference to an Audio Track Asset in resources. This is a non-looping sound that plays when the character or object reaches the end of the path
Path Draw Audio (AudioTrackAsset)- A reference to an Audio Track Asset in resources. This is a non-looping sound that plays each time a drawing arrow is placed on the surface by the users finger
The materials for this template come with a few notes regarding how you should interact with them
Arrow Material (Material)- This material should only have it's texture references edited and an attempt to adjust other parameters may present an undesired look
Arrow Draw Material (Material)- This material is applied to the final look of the path once it's complete and should only have its texture references updated as well
If you want to change the look of the
arrow_draw material then you will only update the Opacity Texture witch acts as a mask of what you would like the outline of your texture to look like. You can also update the base color.
arrow_draw material the Base Texture will scroll along the "up" direction of the the material. The Opacity Texture will mask out the color of the material.
You can add audio to your animation by importing an audio file into the
Resources panel and referencing it in the IdleAnim.js, TapAnim.js and FollowPathAnim.js scripts (found on the WorldObjectController object and the FollowPathAnim object). We recommend using a mono channel mp3 to keep the lens size low. For more information on Audio, see the Audio guide.
Please refer to the guides below for additional information:
Still Looking for help?Visit Support