Module 7: Creating TikTok Effects Using Visual Scripting
Visual scripting is a powerful way to make your effects dynamic and interactive without having to write text-based code!
Earlier modules in this course have explored how to use visual scripting and pre-built interaction subgraphs to incorporate aspects of engagement. This module provides a high-level conceptual overview of visual scripting logic, nodes, and variables.
Module Objectives: By the end of this module, you should be comfortable with the following objectives:
- Define visual scripting, nodes, variables, and subgraph
- Understand how to navigate the Visual Scripting panel interface
- Recognize how connections between nodes impact the flow of logic
This video was recorded using Effect House v2.4.0. Later versions of Effect House have features that may not be covered in this video.
Introduction to Visual Scripting
Visual scripting is a graph-based programming method that lets you create interactive effects without needing to write text-based code. Instead of writing code from scratch, you can just arrange and connect blocks called nodes to create flows of logic.
Nodes are the building blocks of the visual scripting language. Nodes are simply blocks that represent different programming functions. Nodes have inputs and outputs that you can connect to other nodes to create more complex operations. When you connect a node, it will receive and pass information along the sequence. This system of connections allows you to use visual scripting to add all sorts of things like triggers, events, and controllers to your effects.
The Visual Scripting Panel
In Effect House, you can choose to hide or display the Visual Scripting panel by clicking the Visual Scripting icon in the titlebar. You can also undock the Visual Scripting panel into an expandable window by clicking the pop-out icon above the Visual Scripting toolbar.
You can zoom in or zoom out into the dotted space by using your touchbad or scrolling with your mouse. You can also move around by holding down the Control key, clicking the dotted space, and dragging your cursor.
In the Visual Scripting toolbar, you can access the following:
- My Items: Opens a sidebar that allows you to add and manage variables, subgraphs, and imported subgraphs.
- Minimap: Opens the minimap feature that you can use to navigate sprawling flows of logic.
- Zoom: Resets the view to default.
- Searchbar: Allows you to search for specific elements in your flows of logic.
- Details: Opens a sidebar where you can manage settings for specific nodes.
- Comment: Allows you to add comment boxes around nodes or groups of nodes.
- Add node: opens the Node menu.
The Visual Scripting panel interface was updated after this video was created.
Visual Scripting Nodes
There are two nodes that are automatically added to the Visual Scripting panel called Start and Update. Start is an event that triggers the next node when the effect starts. Update indicates that the next node will be triggered continuously through each frame of the video feed.
You can click on a node's information icon of a node to access its definition and outputs, and you can click Learn More to access a webpage with more info.
There are three ways to access the Node menu to add a node:
- Click the Add node button in the toolbar.
- Right-click anywhere in the dotted space, then select Add node.
- Double-click anywhere in the dotted space.
A subgraph is a selection of nodes that have been grouped together into one manageable unit. Subgraphs are used as organizational tools, and can contain other subgraphs. To create a subgraph, select your desired nodes by highlighting them or holding the Shift key and selecting them. Then right-click and select Create subgraph. You can just as easily ungroup subgraphs into their constituent nodes. To access the nodes that make up a subgraph, simply double-click on it.
You can manage subgraphs from the My Items sidebar. The Comment function is also a useful tool for leaving notes around individual nodes, groups of nodes, or subgraphs. To add a comment, select your nodes or subgraphs, right-click, and then select Comment around. You can also click the Comment button in the Visual Scripting toolbar.
Variables
A variable is a term that is simply meant to store a quantity or an expression that might change. This could be something like a timer, a certain number of taps on the screen, or color.
To add a variable, click the My Items button in the Visual Scripting toolbar, then click the Add button [+] next to Variables. Assign a name to your variable.
Click on the icon next to your new variable and choose whether you want to Get variable or Set variable. Get variable retrieves the value for a property, while Set variable assigns the value to a property.
After you add your variable as a node, select it and then click the Details in the Visual Scripting toolbar. Here in the Details sidebar, you can edit the Name, Type, Container, and Default Value of the variable.
Adding a variable has changed since this video was recorded.
Create a Basic Effect with Visual Scripting
In this example, use visual scripting to make a cube appear and disappear whenever a person opens their mouth.
Add an Object and Nodes
First add a Cube object to the scene by clicking the Add button [+], going to 3D, and selecting Cube. Adjust the cube's position in the Scene panel to place it in the desired position on your screen.
In the Preview panel, click the Preview menu, go to Face, and select a Mouth Open demonstration video.
In the Visual Scripting panel, open the Node menu. Search for and select the Facial Movement Detection node. Change the Facial Movement to Mouth Open.
Open the Node menu and add the Set Visibility node to the panel.
Select the Cube object in the Hierarchy panel and drag it into the Visual Scripting panel. This creates a Cube object node.
Link the Nodes
Connect the Facial Movement Detection node's Begin:Exec output to the Set Visibility node's Enter input. Link the Cube object node's Entity:Scene Object output to the Set Visibility node's Target input. Make sure the Set Visibility node's Visibility On checkbox is unchecked.
Duplicate the existing Set Visibility node by copying and pasting it. For this Set Visibility node, check the Visibility On checkbox.
Connect the Cube object node's Entity:Scene Object output to the second Set Visibility node's Target input.
Then connect the Facial Movement Detection node's End output to the second Set Visibility node's Enter input.
You've just created a new effect!
Create a Basic Effect with Interactions
In Effect House, interactions are ready-made subgraphs that you can use to add specific interactions to your effect.
To add an interaction, select the object you want to add an interaction to, go to the Inspector panel, then click + Add interaction. This opens the Interaction menu, which contains a list of interactions that you can choose from.
For example, selecting Tap Screen to Cycle Visibility makes an object appear or disappear whenever a person taps on the screen. Check out the next module to learn more about interactions.