Skip to main content
TikTok Effect House Platform Logo
Download
Accedi
Visual scripting overview

Visual Scripting overview

Visual Scripting in Effect House lets you create interactive effects without worrying about writing text-based code, meaning you can easily add complex logic and see the flow of logic by using nodes and variables.

Get started

To open the Visual Scripting panel, click the Graph icon on the top-left of Effect House interface. By default, a navigational mini-map will show up on the top-right corner of the panel.

Learn more about Visual Scripting nodes

Visual Scripting is a node-based creation system where each node performs a different function within your logic flow. As you connect each node, they will receive and pass information along the sequence. This system of connections allows you to use Visual Scripting to add triggers, events, controllers, and more to your effects.

Explore each node type

  1. By default, two nodes are automatically added: Start and Update. Start will be called when the effect becomes more visible and Update will be called once each frame.
  2. Go to the Visual Scripting panel and click + Add node on the bottom of the interface. A menu with all existing nodes will pop up.
Tip
Tip

You can also right-click on the blank area of the Visual Scripting panel and selecting + Add node to perform this action.

unaligned-image-0
unaligned-image-1

3. Select a node from the menu or type the name to search, then click the node to add it to the panel.

Adding the Multiply node

View node variables

A variable is a symbol which works as a placeholder for expressions or quantities that may vary or change. It only needs to be initiated once and can be reused multiple times throughout the effect creation progress.

Add a variable

  1. Go to the Visual Scripting panel and right click to select Show/Hide variable. This will open the variable menu.
Showing node variables

2. Click + Add variables on the bottom of the menu to add a variable. You can double-click the text area to rename each variable, open the drop-down list to change the variable data type and assign an initial value to it. You can also click the small trash can icon to delete an existing variable.

Changing a node's name, data type, and initial value

3. You can retrieve or set a variable by clicking + > Get/Set variable. This will automatically create a variable node and add it to the Visual scripting panel for you.

Creating a custom node

Make your first effect with Visual Scripting

Try making a simple effect by using the Mouth open and Mouth close actions to change the visibility of a cube. You can also follow along in the sections below Here is a demo of the final result and the project package:

A person opening their mouth to make a box appear and disappear

↓ VisualScriptingDemo.zip

Add an object and nodes

  1. To start, add a 3D cube object to the scene by pressing + Add Object > 3D > Cube. Adjust the Position parameters of the cube to place it in the desired position on your screen.
Adding a 3D cube and setting its location in the tool

2. Since you are using mouth open/close actions as triggers, select an open-mouth demonstration video from the drop-down list in the Preview panel to test the effect.

Selecting a preview video of a person opening and closing their mouth

3. Right click in the Visual Scripting panel, and search for and select the Facial Movement Detection node to add. Set the Facial Movement property to Mouth Open.

Adding the Facial Movement Detection node to the Visual Scripting graph

4. Then find and add the node Set Visibility to the panel.

Adding a Set Visibility node to the Visual Scripting graph

5. Check the required inputs. Since the Set visibility needs to take an Object, select the cube object from the Hierarchy panel and hold to drag it to the Visual Scripting panel. This will create the cube object node automatically.

6. Set the visibility value. There is a checkbox next to the Value of Set Visibility. Check/ unchecked it to set the value to true (visible) or false (invisible).

Unchecking the Value of the Set Visibility node

Link the nodes

  1. Link the Begin output of Mouth open to the Enter input of Set Visibility, link the Entity output of Cube to the Object input of Set visibility, and then unchecked the box next to the Value input of Set visibility.
    Linking the Facial Recognition and Cube nodes to the Set Visibility node

    2. Add a new Set Visibility node in order to make the cube visible when the mouth is closed. Link the newly added nodes accordingly and check the Visible box this time. You can move the nodes around to clean up and organize your interface.

    Duplicating the Set Visibility node, then linking the Facial Recognition Detection node to it

    3. Congratulations! Now that you’ve learned the basics of visual scripting, feel free to incorporate it into your own effects.

    Node types

    There are eight different types of nodes in Effect House that help you work with interaction, logic, and more.

    Node typesIconDescriptionExample(s)
    Event
    The root of actions that will trigger logic flow executionScreen tap, which captures a touch event.
    Logic
    Check one or two values and output comparison resultsGreater than, which checks if one input value is greater than another.
    Control
    Support different statementsFor loop, If, and Sequence.
    Math
    Math functionsRandom, Floor, and Multiply.
    Time
    Track the timeGet time, which tracks the time in seconds since the effect starts.
    Utility
    The root level of entity and component statusSet visibility, which sets the visibility of an object entity.
    Transform
    The root level of transform related triggersLocal Pose, get the local transform data of a scene object.
    Head & Face
    The root level of face and head triggersEye blink, which will trigger next node when the eye-blink action is detected.
    Hand
    The root level of hand triggersHand open, which will trigger next node when the hand-open action is detected.
    Body
    The root level of body triggersBody detection, which will trigger the next node when there is body detected in camera view.

    Node information

    You can view a node’s basic information by following the menu. Let’s use a Body Detection node as an example:

    A menu with the Body Detection node's information
    • Name: The name is at the top of the node information.
    • Description: A description of the node’s main functionality.
    • Inputs and Outputs: Ports along the left side of a node are known as “node inputs”. Ports along the right side of a note are called “node outputs.” You’ll link one node to another by making a connection from an output port to an input port.
    Tip
    Tip

    Right-clicking on an added node and selecting Node info or directly clicking the ⓘ icon will show node info.

    unaligned-image-0
    unaligned-image-1

    Manage the Visual Scripting panel

    Subgraphs

    Subgraphs are groups of nodes that can help organize your Visual Scripting.

    Creating a subgraph

    1. Select the nodes you want to group.
    2. Right-click on the nodes, then select Create subgraph. You can change the name of the subgraph by double-clicking on the name at the top of the node.
    Creating a Visual Scripting subgraph

    Editing a subgraph

    1. Double-click the subgraph node to dive into it and edit the grouped nodes.
    2. Click on the Main Graph button on the top-left corner of the Visual Scripting panel to go back to the top-level graph. You can right-click on a subgraph node to ungroup it.
    Editing a subgraph

    Use the mini-map to navigate

    NameIconDescription
    Mini-map
    The mini-map icon on the top-right corner of the Visual Scripting panel allows you to show or hide the mini-map by toggling it on and off.

    When the mini-map is open, you can drag the rectangle on it to navigate.
    Zoom
    The zoom icon next to the map icon allows you to pose the Visual Scripting viewport back to its origin.