Interactive Path

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.

Tutorial

Guide

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 [REPLACE_ME].

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 Layout

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.

Note
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

Materials

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.

For the 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.

 

Audio

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.

Related Guides

Please refer to the guides below for additional information:

Still Looking for help?

Visit Support