Effect Maker Tutorial: Visual Scripting 102 with @haleycatpawz

0:00 Hello, I'm Heather and today we're going to learn how

0:03 to create a flat tap effect with visual scripting using variables.

0:08 In this tutorial, you'll be learning how to use

0:10 variables in your visual scripting workflow in effect maker.

0:14 Variables store information for your effect to remember and use later.

0:18 We'll be creating an effect where [music] you can

0:20 tap on the screen and loop through different spotlight colors.

0:23 With variables, many more options open up as they allow you to store

0:26 values that you can reference at a later time in your effect.

0:30 For example, if we're making an effect where the user

0:33 gets to choose between different answers and receives a result,

0:36 then we could use a variable to store each of the user's answers

0:39 [music] and then reference them at a later point to calculate that result.

0:44 To start creating, let's first navigate to our visual scripting panel.

0:48 We can either add a node through the visual scripting

0:51 hand icon located on the left side of the screen

0:53 to open the panel or by easily clicking on the change

0:57 layout button located at the top right of effect maker.

1:02 I'm going to click on the change layout button.

1:07 On the top bar of the visual scripting panel located on the left,

1:11 there is a button that has a symbol that looks similar to an X.

1:15 We can click on it to open a variables panel.

1:19 This panel is where you can manage all

1:20 the variables that are currently in your project.

1:23 You can also add and delete variables here.

1:26 Visual script variables can store many

1:29 different types of data including numbers,

1:31 vectors, text, booleans, colors, and image assets.

1:36 Let's create a counter where a number is displayed

1:38 on screen and when the user taps on a button, it increases by one.

1:43 To begin, we'll need to use a variable.

1:46 As you can see in our variables panel,

1:48 there are currently no variables in our project yet.

1:51 Let's click on the plus button at the top

1:53 right of the variables panel to add a variable.

1:56 An edit panel will appear.

1:59 Here you can edit the name of your addit variable,

2:02 the data type, value type, and the value that it is holding.

2:07 The type property of a variable controls

2:09 the type of data that this variable can hold.

2:12 Data types that are currently supported include number,

2:15 text, boolean, 2D vector, 3D vector, color, and asset.

2:23 The value type property of a variable controls whether

2:25 the variable is a single value or a list of values.

2:29 A single value is only one value, whereas a list of values is an ordered

2:33 collection of items such as numbers, words, or images.

2:37 For right now, we'll focus on using a single value variable.

2:40 I'm also going to keep the type of this variable

2:43 set to number and rename our variable to index count.

2:49 When finished, we can click on the back button that is

2:52 right next to the edit text at the top of the panel.

2:55 Our index count variable is now visible in our variables panel.

3:00 If we want to get or set the value that it holds,

3:03 we will need to get the corresponding nodes.

3:06 There are two ways to do this.

3:08 One way is to right click on the variable that you want to get the nodes

3:11 for in the variables panel and then

3:14 select the get variable or set variable options.

3:18 The second way is to right click in our visual

3:20 script panel as if we're adding any other visual script node.

3:24 Go to the objects and properties category

3:27 and click on get variable or set variable.

3:31 From there, let's add a get variable node and a set variable node to our graph.

3:40 Let's also go to the triggers category and add an object tap node to our graph.

3:47 Once all three nodes are added,

3:49 connect the next execution output of our object tap

3:52 node into the start input of our set variable node.

3:57 We'll need to give our object tap an object to detect taps on.

4:00 So, I'll right click in the objects panel and just add an image.

4:12 We can then select the image that we just

4:14 added for the object property of our object tab.

4:21 Now, when we tap on the image, it will set our variable.

4:25 But why don't we see any change?

4:28 There are two reasons.

4:29 Our variable is currently only represented in our script

4:33 and not being displayed on the screen.

4:35 And then the value that we're giving it is currently still zero,

4:39 the same as our variable's default value.

4:42 Let's fix the first issue and display our variable's value on the screen.

4:47 To do this, we can add a text object.

4:53 Next, we want to control the text content of this object in our script.

4:59 Navigate back to the visual scope panel.

5:02 Go to the objects and properties category and add a set property node.

5:09 We want to assign the object that it sets

5:11 as our text object that we just added to the scene.

5:15 And select the property we're setting as the text property.

5:20 Because our index count variable has a type of number

5:23 and the text property has a type of text,

5:26 we can't directly connect the output port of our git variable node

5:30 to the input port of our set text nodes text input port.

5:35 We'll need to convert the number value to a text

5:37 in order to display it on the screen.

5:41 We can go to the time and utility category and add

5:44 a number to text node to convert our number to text.

5:49 Connect the output of our git variable node

5:51 into the number input of the number to text node.

5:56 Next, connect the text output of the number to text

5:59 node to the text input of our set text node.

6:05 Our variable successfully converts.

6:08 To actually set the value to our text, we need to trigger it.

6:12 connect the next execution output of our set variable

6:15 node to the start input of our set text node.

6:21 When we tap on the image on our screen,

6:23 we can see that the text displayed changes to value zero.

6:27 Great work.

6:29 However, since we want to increase the number

6:31 and don't want to permanently stay at zero,

6:34 we need to add to it every time that the user clicks on the button.

6:37 We can do this by adding an add node from the math category.

6:44 This node lets us add two numbers together and then output the sum.

6:50 Ideally, we want to add one to whatever

6:52 our index counts variables value currently is.

6:55 So, let's connect the value output of our get variable

6:58 node into the input one port of our ad node.

7:02 We can manually change input 2's value to be one.

7:07 Then let's connect the value output of our ad

7:11 node into the value input of our set variable node.

7:18 This means that now every time we tap on the image,

7:21 our variable will increase by one and display on the screen.

7:25 Test it out.

7:25 It works.

7:29 Although we have an ember counter, we still need to adjust our code

7:32 to loop through different colors for spotlight image.

7:36 To do this, we will add functionality where we alternate through a list

7:39 of different colors on the screen whenever the user taps on an image button.

7:44 A variable that can hold a list of different

7:47 color values would be perfect for this task.

7:50 Let's open up our variables panel and add another variable.

7:57 We can set the name of this variable

7:59 to color options and set the variable's type to color.

8:04 Since we want this variable to store a list

8:06 of multiple different color values instead of only storing one color,

8:10 we will need to switch the value type from single value to list of values.

8:18 As you can see, once we select this option,

8:20 the value of our variable turns to list of values and an add button appears.

8:26 We can click on this add button to add more color values to our list.

8:30 Let's click on the add button and add a total

8:32 of five color values to our color options list.

8:36 If you look closely, the position of each item in a list

8:39 of values variable is indicated by its number.

8:43 The first item is zero.

8:45 It has an index of zero.

8:47 The second item is one.

8:48 It has an index of one and so on.

8:51 We can select the color squares on each of these values

8:55 and change each color value to one of our preferred colors.

8:59 We can also type in our preferred color code.

9:02 Once you're satisfied with the color values and color options variable,

9:06 you can click the back button to exit editing the variable.

9:10 Now, we need to get all of the color

9:12 values that are stored in the color options variable.

9:15 We can right click on the color options variable

9:18 and add a get variable node to our script graph.

9:22 Getting the value of a list value variable

9:25 is slightly different than a single value variable.

9:28 When using a get variable node for a variable of value type list of values,

9:34 it retrieves an entire list of values instead of only a single value.

9:39 Therefore, we have to add another node that specifically

9:42 retrieves which value we want from the list.

9:46 We can navigate to time and utility category

9:50 and add a get from list node for this.

9:54 Connect the output value of the get variable node

9:58 to the list input port of the get from list node.

10:02 The index property of the get from list

10:04 node determines exactly which value we want to get.

10:07 So the values position in the list.

10:10 I'm going to keep the index at zero for right now.

10:13 Our get from list node is correctly

10:15 retrieving a value from our color options list.

10:18 Now we need to use the value that we're

10:20 retrieving to change the color tint of our spotlight.

10:24 Let's quickly add in our spotlight asset

10:26 texture via the asset tab and upload that.

10:34 Once we have our spotlight assets imported, we can go back to our objects tab,

10:40 add an image object,

10:45 and then select our spotlight asset as the asset to apply to our image.

10:51 We should move our spotlight above our image button in the objects panel to be

10:56 layered behind and ensure that the image button will be able to detect tabs.

11:01 We can also adjust our spotlight position and sizing.

11:07 Let's make our spotlight responsive to color changes and button tabs.

11:12 First, we'll add a set property node to our graph

11:18 and select the object that it is setting as our spotlight image.

11:24 Next, select the property that is being set

11:26 on the image as the color tint property.

11:30 This will transform it into a set color tint node that accepts

11:33 color value types to set the color tint of an image.

11:37 Connect the output value port of our get from list node

11:41 to the color tint input port of our set color tint node.

11:45 Then let's reference our previous code with the button taps.

11:50 Let's move our set content node in between our object tap and set

11:55 variable nodes by connecting our object taps

11:59 next execution output port into the start

12:02 input port of our set color tent node and our set color tint

12:07 nodes next execution output port into our set variable nodes start input port.

12:14 Now when we tap on our image button in the preview panel,

12:20 the spotlight changes to the color value

12:22 of our first value in our color options list.

12:25 The color of our image doesn't change beyond the first click.

12:29 So let's fix that.

12:31 We can connect the output number value of our old

12:34 get variable node that is retrieving our index

12:37 count variable and connect it to the input

12:40 port of our get from list nodes index property.

12:46 Now whenever we tap on the image

12:49 our spotlight's color tint changes between the different colors.

12:53 There is only one more issue left.

12:55 When we reach the last color in our list the color tint stops changing.

13:00 Ideally, we want to loop back to the first color at index zero when

13:04 our index count variable reaches the same number

13:07 value as the color option list variables length.

13:10 To do this, let's add a few new nodes.

13:13 First, we'll want to add a greater than or equal to node

13:16 from the logic category to compare our index

13:20 counts current value with a maximum value.

13:24 Then, we'll add an if node from the control flow category.

13:29 Connect the greater than or equal to node

13:31 to the if nodes condition input and connect the get

13:35 variable node for our index count variable to input

13:39 one of our greater than or equal to node.

13:41 We can also adjust input two to be a value such as three.

13:47 We should now connect the output execution

13:50 of our set text node into our if node.

13:54 Let's duplicate our index count old set variable node.

13:59 Change its value to set as zero and connect if nodes

14:03 true execution output into the set variable nodes start input execution.

14:09 Now whenever our index count variable reaches the same value that is

14:13 whichever value is input to in the greater than or equal to node,

14:20 it will start and reloop the colors.

14:24 We could either manually edit input 2 and adjust it to be

14:27 the number of colors that we have in the list every

14:30 time we update our colors list or we could add functionality where

14:34 it automatically updates the length of what our list can look through.

14:39 I want to go with automatic option.

14:41 So I will go to time and utility and add a get

14:44 list length node to retrieve how many values our list variable is storing.

14:52 Connect the color options get variable nodes value

14:56 output into the get list length nodes list input.

15:01 Next, connect the get list length number output port

15:06 into the second port of our greater than or equal to node.

15:10 We can also turn off the visibility of our text.

15:13 So, all that is seen is our spotlight.

15:16 Now, when we tap on our button,

15:18 our spotlight correctly changes colors and loops back around.

15:23 Great work.

15:24 We finished the functionality of our effect.

15:26 The more complicated your script gets,

15:28 the more of a chance that you may run into bugs where some of your nodes

15:32 aren't executing as expected or the values

15:34 that are being output are not what is expected.

15:37 For debugging number values in effect maker,

15:40 one of the best solutions is to display the number values

15:43 to the screen using the text object in the same method explained earlier.

15:48 To find and fix any bug in general, a helpful tip is to identify and narrow

15:53 down what could possibly be causing the issue.

15:56 For example, if you have a button

15:58 that is working to change numbers in your text,

16:00 but you're also supposed to be changing the color

16:02 of a light and that color isn't changing,

16:05 then most likely the bug is going to be somewhere

16:07 in your logic for setting the color of the light

16:10 or how the set color of light is triggered

16:13 and not in your logic that triggers your button.

16:16 We should test our effect on our mobile device.

16:19 First, make sure that you're signed into the same YouTube

16:22 account on your phone as you're signed into with Effect Maker.

16:26 Then, you can click on the preview on device button

16:29 that is located at the very top of the screen.

16:32 It will open a popup that shows a QR code.

16:35 Open up your camera app on your mobile device and use it to scan this QR code.

16:40 It should load your effect inside the YouTube camera on your phone.

16:44 This will allow you to test out your effect

16:46 and ensure that it meets full expectations before publishing.

16:50 Once we're happy with our effect, we can click the submit button.

16:54 A submission panel will appear where we can add an icon for our effect.

17:02 We should give our effect a name and also add a description for our effect.

17:11 If your effect has any functionality that allows the user to interact with it,

17:15 you'll be given the option to choose an instruction for it.

17:18 Instructions appear on the effect when users use

17:21 it to give them guidance on what is needed.

17:24 It's always best to add instructions so users

17:26 can clearly understand how to use your effect.

17:29 Finally, we can click submit to finalize and send our effect out for review.

17:34 Want to explore and create more amazing interactive effects?

17:38 You can check out some of Effectm Maker's already made effect templates

17:41 to learn and discover how you [music] can create more kinds of effects.

17:45 For more info on how to use Effect Maker,

17:47 check out the links in the description below.

17:49 Thank you for watching and don't forget

17:51 to subscribe for even more news and updates.