Visual Scripting Overview
Visual Scripting in Effect House allows you to create interactive effects without having to worry about writing text-based code. Use nodes and variables to create complex logic.
Getting Started
To open the Visual Scripting panel, click the Graph icon on the top-left of the Effect House interface.
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. Thi s system of connections allows you to use Visual Scripting to add triggers, events, controllers, and more to your effects.
Explore Each Node Type
- By default, two nodes are automatically added to a project: Start and Update. Start will be called when the effect begins and Update will be called once every frame.
- Go to the Visual Scripting panel and click the Add button [+] > Add node at the top of the interface. A menu with every node will pop up. Select a node from the menu or type the name to search, and then click the node to add it to the panel.
You can also right-click on a blank area of the Visual Scripting panel and select Add node to perform this action.
![Add node method 1](http://lf16-tiktok-common.tiktokcdn-us.com/obj/tiktok-web-common-tx/effect/learn/assets/images/add_node_1-3f71d12ddac65dde5808d5e8f1813d6f.gif)
![Add node method 2](http://lf16-tiktok-common.tiktokcdn-us.com/obj/tiktok-web-common-tx/effect/learn/assets/images/add_node_2-83e4137416e48e012da06daafff8c546.gif)
![Add node multiply](http://lf16-tiktok-common.tiktokcdn-us.com/obj/tiktok-web-common-tx/effect/learn/assets/images/add_node_multiply-01d4d35d7edcfe411fc8e70c5013d3ad.gif)
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 process.
Add a Variable
- Go to the Visual Scripting panel and right click to select Show/Hide variable. This will open the variable menu.
![show/hide variable](http://lf16-tiktok-common.tiktokcdn-us.com/obj/tiktok-web-common-tx/effect/learn/assets/images/show_variable-7190d80f5ccd3f788e2e960eda7cabfa.gif)
- Click + Add variable on the bottom of the menu to add a variable. You can 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.
![add variable](http://lf16-tiktok-common.tiktokcdn-us.com/obj/tiktok-web-common-tx/effect/learn/assets/images/add_a_variable-5d57583f3885b96c78536dc3be0c342b.gif)
- You can retrieve or set a variable by clicking the Add button [+] > Get/Set Variable. This will automatically create a variable node and add it to the Visual scripting panel.
![get/set variable](http://lf16-tiktok-common.tiktokcdn-us.com/obj/tiktok-web-common-tx/effect/learn/assets/images/set_variable-4d208f58baa596895944d4334d81bf28.gif)
Node Types
There are 11 different types of nodes in Effect House that help you work with interaction, logic, and more.
Node Types | Icon | Description | Example(s) |
---|---|---|---|
Event | Nodes that detect an event and output triggers accordingly. | Screen Tap captures a touch event. | |
Logic | Checks the logic of the input(s), often comparing two values. | Greater Than checks if one input value is greater than another. | |
Control | Use these nodes to control the flow of triggers. | For Loop, If, and Sequence. | |
Math | These nodes perform math functions. | Random, Floor, and Multiply. | |
Time | Nodes relating to time. | Get Time tracks the time in seconds since the start of the effect. | |
Utility | The root level of entity and component status. | Set Visibility sets the visibility of an object. | |
Transform | The root level of transform related triggers. | Local Transform Info outputs the local transform data of a scene object. | |
Head & Face | Nodes related to the head and face. | Facial Movement Detection triggers the next node when a particular movement is detected. | |
Hand | Nodes related to the hand. | Hand Detection triggers the next node when a hand is detected on screen. | |
Body | The root level of body triggers. | Body Detection triggers the next node when there is a body detected in camera view. | |
Audio | Nodes related to audio. | Beat Detection outputs the imported audio’s beat. |
Node Information
You can view a node’s basic information by following the menu. Let’s use the Body Detection node as an example:
![body detection node](http://lf16-tiktok-common.tiktokcdn-us.com/obj/tiktok-web-common-tx/effect/learn/assets/images/body_detection_node-cbb3267d19ca465762965ffa9b7ef885.png)
- Name: The name of the node is at the top of the node's basic information
- Description: A description of the node’s primary functionality
- Inputs and Outputs: Ports along the left side of a node are known as “node inputs”. Ports along the right side of a node are called “node outputs.” You’ll link one node to another by making a connection from an output port to an input port.
Right-clicking on an added node and selecting Node info, or directly clicking the ⓘ icon, will show the node's information.
![node information through right-click](http://lf16-tiktok-common.tiktokcdn-us.com/obj/tiktok-web-common-tx/effect/learn/assets/images/node_information_1-c5c12c2857309758a583df54f865687c.gif)
![node information through icon](http://lf16-tiktok-common.tiktokcdn-us.com/obj/tiktok-web-common-tx/effect/learn/assets/images/node_information_2-a027005b983d0a029d40a4f0bc7e926c.gif)