Visual Scripting Crash Course | 3. Understanding Variables and Data Types

Summary

This tutorial delves into the fundamentals of variables and data in visual scripting, illustrating how they serve as containers for diverse information. It explains the process of incorporating objects, properties, and assets as variables to manipulate object attributes and behaviors within a project. The video also covers creating custom variables, selecting appropriate data types, and choosing between single and array containers. Practical examples, such as image cycling on screen tap, are provided to solidify understanding. Additionally, tips on learning from templates and searching for variables are shared to enhance scripting skills.

Takeaways

• 📦 **Variables as Containers**: Variables are like boxes that can hold different types of data, such as numbers, phrases, or lists.
• 🔄 **Importing Data**: Objects, properties, and assets can be brought into the Visual Scripting Editor as variables to be used in scripts.
• 🔧 **Modifying Attributes**: Nodes like 'Get component by type' allow you to access and modify object attributes like transform and mesh renderer.
• 👀 **Visibility Control**: Variables can control object properties, such as visibility, using nodes like 'Set Visibility'.
• 🔑 **Property Access**: Properties can be accessed and modified with 'Get' and 'Set' nodes, which peek inside or change the variable's content.
• 💼 **Custom Variables**: Users can create custom variables to store and retrieve specific data needed for their scripts.
• 🎛 **Variable Configuration**: Variables must be configured with the correct data type to ensure scripts function correctly and avoid errors.
• 📊 **Data Types**: Common data types include Number, Boolean, String, Color, Vector (2D, 3D, 4D), Rect, Texture 2D, and Object.
• 🗃️ **Container Types**: Variables can be single, holding one item, or array, which can store multiple items and be accessed by index.
• 🖼️ **Real-World Application**: Variables can be used to create dynamic effects, such as image cycling with screen taps.
• 📚 **Learning Through Templates**: Studying templates is a recommended way to learn how to effectively use variables in visual scripting.

Q & A

What is a variable in the context of visual scripting?

A variable in visual scripting is like a container that can hold different types of information such as numbers, phrases, or lists of data.

How can you bring objects from the hierarchy panel into the Visual Scripting Editor?

You can bring in objects from the hierarchy panel as variables by simply dragging them into the Visual Scripting Editor.

What is the purpose of the 'Get Component By Type' node?

The 'Get Component By Type' node is used to get the component attached to an object, such as its transform and mesh renderer.

How can you control the visibility of an object in visual scripting?

You can control the visibility of an object using the 'Set Visibility' node, which allows you to turn the object's visibility on and off.

What is the difference between 'Get' and 'Set' when dealing with variables?

'Get' is for retrieving the current value of a variable without changing it, while 'Set' is for modifying the value of a variable.

How can you add a new variable in the Visual Scripting Editor?

You can add a new variable by navigating to the Visual Scripting Editor, clicking on the 'My Items' button, and then clicking the 'Add' button next to 'Variables'.

What are the different data types you can configure for a variable?

Data types include Number, Boolean, String, Color, Vector2, Vector3, Vector4, Rect, Texture2D, and Seen Object.

What is the difference between a single container and an array container for a variable?

A single container holds one data item, while an array container can store multiple data items in the same variable.

How can you access an item from an array variable?

You can access an item from an array variable using the 'Get Item from Array' node and inputting the index of the item you want to retrieve.

What is a practical example of using variables in visual scripting?

A practical example is creating an image cycle that changes images upon screen taps, which involves storing textures in an array variable and accessing them in a loop or random order.

How can studying templates help in understanding the use of variables in visual scripting?

Studying templates allows you to see how variables are used in practice, understand their types, container types, and default values, and observe the effects of changing them.

Outlines

00:00

📚 Introduction to Variables and Data in Visual Scripting

This paragraph introduces the concept of variables and data in visual scripting. Variables are likened to containers that can hold different types of information such as numbers, phrases, or lists. The video explains how variables can be used to store and manipulate data within an effects project, including dragging objects from the hierarchy panel or properties from the Inspector panel into the Visual Scripting Editor. It also touches on the use of nodes like 'Get component by type' to access and modify object attributes, and 'Set visibility' to control object visibility. The importance of understanding the difference between getting and setting variables is emphasized, with a practical demonstration of making an object's hat invisible using a screen tab.

05:02

🔧 Customizing Variables in Visual Scripting

The second paragraph delves into the process of customizing variables within the Visual Scripting Editor. It explains how to create a new variable by navigating to the 'My Items' button and adjusting its details such as name, type, and default value. The paragraph also discusses the importance of selecting the correct data type for a variable to avoid errors and ensure proper script functionality. Common data types are explained, including number, boolean, string, color, vector (2D, 3D, 4D), rect, texture 2D, and seen object. Additionally, the distinction between single and array container types is clarified, with an example of how to use an array to store a series of colors.

10:06

🖼️ Using Variables for Practical Applications

This section illustrates how to apply variables in practical scenarios, such as creating an image cycle that changes upon screen tapping. It guides through the process of selecting an image object, using the 'Add Interaction' shortcut, and setting up a subgraph to cycle through textures. The paragraph explains how to create a variable to store multiple textures, set it up as an array, and input the textures into the variable. It also demonstrates how to use the 'Get variable' node to peek into the variable's value and test the image cycling functionality. The concept of looping, random, and shuffle orders for displaying images is introduced, providing a hands-on example of variable usage in visual scripting.

15:09

🎓 Learning Variables Through Templates and Quiz

The final paragraph encourages learning about variables by studying provided templates, which can showcase variable usage in various contexts. It suggests picking a template that aligns with one's interests and exploring the variables used within it. The video provides a tip on how to search for variables by name to understand their application within complex graphs. Additionally, a quiz is presented to test the viewer's understanding, asking which elements can be added as variables in a visual scripting project, with options ranging from numbers and strings to colors and textures.

Keywords

💡Variable

A variable in the context of the video is likened to a container that can hold different types of information such as numbers, phrases, or lists of data. Variables are fundamental to visual scripting as they allow for the storage and manipulation of data which is essential for scripting logic. For instance, dragging an object into the Visual Scripting Editor and using it as a variable enables modification of its attributes, such as using a 'Get Component By Type' node to access and manipulate the object's transform and mesh renderer.

💡Data

Data refers to the information that variables can hold in visual scripting. It can be of various types, including numerical values, text, or even complex structures like lists. The video emphasizes the importance of data as it is the raw material that variables manipulate to create dynamic effects. For example, dragging objects from the hierarchy panel into the Visual Scripting Editor allows users to work with their data as variables.

💡Visual Scripting

Visual Scripting is the main theme of the video, which is a method of programming where code is written using graphical nodes and connections instead of text. It allows for the creation of complex behaviors and effects by manipulating variables and data. The video delves into how variables and data types are used within visual scripting to control object properties and create interactive elements.

💡Node

A node, as mentioned in the video, is a function box that processes commands and data in visual scripting. Nodes are the building blocks of scripts in visual scripting, where each node performs a specific task. For example, the 'Get Component By Type' node is used to retrieve components attached to an object, allowing for further manipulation of its properties.

💡Hierarchy Panel

The Hierarchy Panel is a part of the user interface where objects in a scene are organized and managed. In the video, it is mentioned that objects can be dragged from the Hierarchy Panel into the Visual Scripting Editor to be used as variables, highlighting its role in accessing and utilizing objects within the scripting environment.

💡Inspector Panel

The Inspector Panel is discussed in the video as a place where properties of selected objects can be viewed and modified. It is used in conjunction with variables to get or set properties, such as position, which demonstrates how variables can interact with object properties in visual scripting.

💡Get/Set

The terms 'Get' and 'Set' are used in the video to describe two different operations on variables. 'Get' is used to retrieve the value of a variable without modifying it, akin to looking inside a box without changing its contents. 'Set', on the other hand, is used to change the value of a variable, similar to placing a new item into a box. The video provides examples of using 'Get Position' and 'Set Position' nodes to illustrate these concepts.

💡Asset Panel

The Asset Panel is mentioned as a place from where assets like images, textures, and materials can be dragged into the Visual Scripting Editor as variables. This panel is crucial for incorporating resources into the scripting environment, allowing them to be used in creating visual effects and interactions.

💡Data Type

Data types are categories of variables that define what kind of information they can store, such as numbers, booleans, strings, colors, vectors, etc. The video explains the importance of matching the correct data type to the variable to avoid errors and ensure that the script functions as intended. Understanding data types is essential for creating structured and effective scripts in visual scripting.

💡Container Type

Container Type refers to whether a variable holds a single item or an array of items. The video explains that a 'single' container can only hold one data item, which must be replaced if a new item is to be stored. In contrast, an 'array' container can store multiple items, which can be accessed by their index. This concept is demonstrated when setting up an array of textures for an image cycle effect.

💡Subgraph

A subgraph, as mentioned in the video, is a reusable piece of a visual script that encapsulates a specific behavior or functionality. The video describes how to use a subgraph for creating an image cycle effect by tapping on the screen, showcasing how subgraphs can simplify complex scripting tasks by abstracting them into reusable components.

Highlights

Variables are like containers for storing different types of information in visual scripting.

Objects, properties, and assets can be added as variables in the Visual Scripting Editor.

The Get component by type node is used to access components attached to an object.

Set visibility node allows toggling the visibility of an object.

Variables can be manipulated to control object properties like position.

Get position and set position nodes are used for accessing and modifying object positions.

Custom variables can be added to store and retrieve necessary data.

Variables can be customized in terms of name, type, and default value.

Data types are crucial for ensuring that variables store the correct kind of information.

Common data types in visual scripting include Number, Boolean, String, Color, Vector, Rect, Texture2D, and Object.

Container types for variables can be single or array, with arrays holding multiple data items.

Get item from array node is used to access specific items in an array variable.

Variables can be used to create dynamic effects like image cycling.

Templates can be studied to learn how variables are used in complex visual scripting projects.

Variables can be searched by name to understand their usage across different graphs.

The correct answer to the quiz is that assets from the asset panel, objects from the hierarchy panel, and properties from the Inspector panel can all be added as variables.

Transcripts

Hi. Welcome back.

Today we dive into the core elements that bring dynamic effects

to life in visual scripting variables and data.

Let's refresh our memories a bit.

Remember, in our first video, we introduced the concept of a node

as a kind of function box that passes around commands and data.

Well, today we're going to expand on that

by diving deeper into what data and variables really are.

What is a variable?

You can think of a variable as an incredible, amazing container.

Just like you might use a physical box

to store a watering can,

a sun, and a package.

In visual scripting, a variable acts just like this box.

You can fill it up with different types of information

such as a number, a phrase,

or even a list of data.

In the effects project,

you can bring in objects from the hierarchy panel as variables

by simply dragging them into the Visual Scripting Editor.

You can also add properties

from the Inspector panel as a variable

and also asset images,

textures, materials from the Assets

panel into the Visual Scripting Editor as a variable,

these elements fundamentally hold specific data

that becomes instrumental to your scripting logic.

For example, when dragging an object into the Visual Scripting Editor

and transferring them into a node,

it allows you to modify its attributes.

We have a node called Get component by type,

which will essentially get the component attached to this object.

In this case its transform and mesh renderer for you to use.

Also, you can dictate its behaviors.

For example,

you can use set visibility node to turn it on

and off as you want.

Let's give it a try.

We will use screen Tab,

our old friend, to control the visibility.

This time.

We want their hat invisible after the screen tab,

so I will simply test it in the preview panel.

Oh, look at that.

It disappeared.

Controlling the component and its property of an object

as a variable is slightly different than the object itself.

After selecting the object in the hierarchy panel.

In this case, let's select left glass,

and when you head over to the Inspector panel,

find the property you want to modify

by clicking the gray dot in front of the property.

Name.

Let's say we want to change the position,

but you see there's two options that pop up here

getting position and set position.

What's the difference here.

Getting a variable is like peeking inside the box

to see what's there, but without changing anything.

So a small tip for this is you can actually use

the node peek to have a look at what's inside.

And if you change the position to say

ten zero zero, we'll see.

The value in the peek node.

Also, change straightforward, right?

Setting a variable, on the other hand, is like placing

a new item into our variable box, changing its content.

Actually.

So let's say we want the position of our object to get changed.

After our screen tab we're using the node screen tab here.

Link it over to the enter port of the set position.

And we can simply just modify the

value here to let's say five

and y axis is five as well.

So let's give it a try.

We click on the preview panel and see

the object actually moved over there.

Just remember get is for peeking inside

and set is for changing its value.

Adding a customized variable.

In addition to those preset variables

you can also add new variables to store and retrieve the data you need.

Start by navigating to the Visual Scripting Editor

and click on the My Items button in the toolbar.

From there, you'll want to click the add button

next to variables in the My Item sidebar.

You're now ready to customize your variable.

Click on your newly created variable to view

and adjust its details in the detail sidebar.

Here, you can personalize settings such as the variables name,

its type,

and even its default value.

This level of customization allows you to truly

make your variables your own, but we are not done yet.

To use your variable in the visual Scripting Editor,

you need to click the Create Node Circle button next to your variables name.

And here we need to decide whether we want to get or set the variable.

There you have it.

You are equipped to add and customize variables to suit your specific needs.

In the Visual Scripting Editor,

configure a variables data types.

Okay, let's dive in a bit here.

To configure a variable, you need to determine the data type.

Go to the detailed side bar and find the type slot

and click on the drop down button.

It will show you a list of data type options,

which essentially represent the kind of information

your variable can store, and choosing the correct data type is essential.

For instance, a number data type

only stores numeric values,

while a color data type is exclusively for color values.

Making sure

you match your data with the right data type is crucial.

To avoid errors and ensure your script functions correctly.

Let's break down some common data types you will use in visual scripting.

Number

can be an integer or float number with a decimal.

Perfect for counting or indexing.

Boolean is a data type

that has only two possible values true or false,

or much like a check box status

check, or unchecked string

is used for storing sequences of characters

such as sentences or words.

Colors manage color values,

typically defined with RGB or hex

vector two.

Vector three

and vector four.

These represent positions or dimensions

in 2D, 3D, and pseudo 4D

spaces, respectively.

Rect represents the dimensions of a rectangle

in their 2D space defined by x, y.

The width, and the height.

Great for layout and interface design.

Texture 2D pertains to a 2D texture

often used for texture assets.

You can set different assets to it as you want.

The last one seen object.

You'll find that storing and retrieving seen objects through variables

is a very handy trick in game effect development.

We will explain more later

by understanding and correctly utilizing these different data types.

You can create more structured and effective scripts.

Configure a variables container type.

When creating a variable,

you also need to choose a type of container for your data.

Go to the details sidebar and you will see from the dropdown menu

that there are two options single or array.

A single container means it holds one data item.

It could be data of any type, number, or color.

Essentially, if you want to store a new item,

you have to replace the current one because it only has space for one.

An array container is a bit more complex

because it can store multiple data items in the same variable.

For instance, let's say we want to have a box of colors

by clicking on the add button under default value.

You can set up the array the list of objects.

Let's say we want to set the first item

as red, the second item as green.

And the third item as blue.

These items are stored in an organized manner

so you can access them by their position using

git item from array node.

You can simply just

input this variable into this get item from array,

and you can input the index of the item you'd like to retrieve.

You may notice that zero is actually the starting point.

It may seem counterintuitive, but this is how the computer world works.

Zero is the starting point. And so on.

Now we can have a peak adding the peak node,

and you may notice that it shows up

as a peak node for vector four, which is not what we want.

We want to peak into the color

because color is the variables data type.

So we'll need to click on the drop down menu of the peak node.

Now we will see that the first item

is red exactly like what we stored there.

An array is useful since it's an efficiently managed list or collection.

You can store game objects, scores,

and series of values and access them while using their order index.

Demo okay.

Let's examine how to use variables in real cases.

Suppose we want to create an image cycle by tapping on the screen.

The user can see different images popping up in order.

First we need to select the image object from the hierarchy panel.

Then let's go to the Inspector panel

and we will use the Add Interaction shortcut.

Scroll down and you will find a subgraph

called.

Click on it

and it will open a subgraph that does exactly what we want.

Now we need to input all of our textures into this slot.

Image textures.

We'll need a variable that can store all the textures we want to set.

Head over to my items panel in the toolbar of the Visual

Scripting Editor, and click on the add button near the variables section,

and we will name our variable textures.

Then go to the details sidebar.

Since this is an image, we need to make sure that the variable box

can hold images.

In this case, we will select texture 2D.

We want to put three images into it so it can't be a single container.

It has to be an array.

After setting up an array, click on the add button

three times to create three boxes in this variable.

By clicking on the default texture slot, you can swap it to the texture

you prepared and I'll set it up like this.

After setting everything up,

we need to bring the variable into the Visual Scripting Editor.

Since we don't want to change the value of the variable,

we just want to peek into the variable value.

So we're going to use git variable

here after git variable.

Link it over to these image textures.

Now let's test it.

Click on the preview button

and you will see that the image changed

because you set the order as looped.

It will show in the exact order

you set up this array.

But if you change it to let's say random,

it will just display a random image

without following the index you set up in the array.

You can also set it up as shuffle.

Just give it a try.

Pro tips use templates to learn variables.

Variables are essential for creating complex effects and visual scripting.

You can learn their usage by studying our templates.

How do you learn from a template?

Pick one template that resonates with your interests like the photo slideshow.

Just remember, not all templates will use variables,

but some of them will like multiple times.

And when you open the template,

you can simply head over to the Visual Scripting Editor.

Click on the My Item sidebar and it will show you what variables get used there,

and click on the variable in the list, and it will navigate

you directly to the place where the variable gets used.

And you can also have a look at the variable type,

container type, and default value.

And if you notice the variable is actually highlighted for you.

So you can zoom in and out in order to understand

how this particular variable gets used.

And something very useful is to change the variable

to observe the effect and apply your new knowledge to your projects.

Another pro tip is you can actually search the variable by its name.

So let's search upload count

and you will

see that there is an up and down button

where you can navigate between all the different complex graphs.

In order to see exactly how this variable gets used.

And as you absorb in these functionalities and how they get used,

you can get better at using them in your own projects.

Happy exploration!

Quiz time.

Now before we end.

Question which of the following can be added as a variable

in a visual scripting project?

A only numbers and strings be only objects from the asset panel.

C assets from the asset panel.

Objects from the hierarchy panel and properties from the Inspector panel.

Audio only.

Colors and textures.

With this understanding, you're ready to create more complex

and logical flows in your visual scripting projects.

We'll explore this further in our next module.