Skip to main content
TikTok Effect House Platform Logo
Latest
Download
Log in
Interaction

Add Interactions to Your Effect

Interactions are preset subgraphs that can be added in one click to make your effect interactive. For example, you can add an interaction that will make an object appear or disappear when a person taps on the screen. You can leverage a variety of built-in interactions to make your effect more dynamic and engaging. There are a total of 15 different interaction features.

Overall, there are three layers to an interaction subgraph that offer increasing levels of customization and complexity:

  1. Non-visual scripting users or beginners can add interactive features to play animations, toggle object visibility, change materials, and perform other actions with just one click.
  2. More advanced users can double-click on the interaction subgraph to access Event Trigger and Event Response subgraphs for further customization.
  3. For the highest level of customization, users can access the most fundamental nodes and detailed logic flows by double-clicking on the Event Trigger and Event Response subgraphs.

Add an Interaction

To add an interaction feature to an object, select the desired object in the Hierarchy panel. Then go to the Inspector panel and click + Add interaction.

The listed interactions are specific to the object selected in the Hierarchy panel, as only certain interactions are applicable to certain objects. For example, the Tap Screen To Cycle Image Textures interaction is only available for objects with an Image component.

If you want to access the Event Trigger or Event Response subgraphs for further customization, then double-click on the interaction subgraph. If you want to go one level deeper to access the fundamental nodes, then double-click on the Event Trigger or Event Response subgraphs.

Descriptions of each interaction and its node inputs are available in the tool, through the information icon.

Use Case: Tap Screen to Cycle Children Visibility

You can incorporate an interaction to make objects appear or disappear one by one whenever you tap the screen. To do so, first make sure that you have objects parented under a Scene Object in the Hierarchy panel.

Note
Note

For 2D objects, use 2D Scene Object. For 3D objects, use Scene Object.

Click the parent Scene Object in the Hierarchy panel, and then click + Add interaction in the Inspector panel. Select Tap Screen to Cycle Children Visibility from the dropdown.

To test the interaction, click on the preview to simulate tapping the screen. You can also change the Order in which the objects appear:

  • Loop: outputs values continuously in the order set
  • Random: outputs values at random (may repeat)
  • Shuffle: outputs all values once in random order (no repetition)

Use Case: Tap Screen to Play Animated Texture Then Delay Pause

You can incorporate an interaction to play animation sequences for a set amount of time before pausing. First, add an Image in the Hierarchy panel by clicking the Add button [+] > 3D > Image.

Then go to the Assets panel and click the Add button [+] > Import > Texture Sequence, and choose a series of images from your device. The textures will import into the Assets panel, and an animated Texture Sequence will automatically be created under the Animated Textures folder.

To assign the newly created animated Texture Sequence to the Image, click on the Image objectin the Hierarchy panel, then go to the Inspector panel. Click on the Image component’s Texture property, and select the animated Texture Sequence, or simply drag the animated Texture Sequence from the Assets panel into the Texture slot.

Next, select the Texture Sequence under the Animated Textures folder, then go to the Inspector panel and click + Add interaction. Select Tap Screen to Play Animated Texture Then Delay Pause.

You can change the value of Delay Pause Seconds in the subgraph to modify how long the animation will play before pausing.