Effect Maker从零构建互动测验：视觉脚本与计分逻辑

Hi, it's Claus again and in this tutorial I will show you how to build a fully interactive quiz from scratch inside effect maker. No template, just pure visual scripting. By the end, we will have a three question game that grades your choices and reveals your pet vibe. Are you more of a cat or a [music] dog? Before we start building, let's take a look on how the game works behind the scenes. Understanding the logic first will make the visual script much easier to follow later.

The quiz is based on a very simple scoring system. Every choice the player makes changes a single score value. If the player choose the option on the left, we add one point. If they choose the option on the right, we subtract one point. After all three questions, the script checks the final score. If this score is below zero, the result is cat. And if the score is above zero, the result is dog. Since our quiz has three questions, the final score can never be zero.

Okay, so now that you understand how the logic works, let's move on to the fun part, building it from scratch. If you're not comfortable with variables and lists yet, I'd totally recommend watching our visual scripting 101 and 102 tutorials first. Otherwise, let's get started. From the effect maker home screen, create a new project. We'll start by building the basic layout for our quiz, including the question text and the two short choices.

Open the text menu and add a new text object. I'll move it to the top of the screen and quickly adjust the font size and colors to make it look a little nicer. I already type in our first question. We can move. Now, let's rename this object to question to keep our scene organized. A clean hierarchy makes your project much easier to manage as it grows. Next, let's add the two image that will represent each choice. Open the image menu and create a new image.

Then duplicate it by right-clicking the object and selecting duplicate. For the second image, simply use the same X position with the opposite value. This keeps both choices perfectly centered on the screen. Finally, rename them to choice A and choice B. Great. Our base layout is now ready and we can start making it interactive. Now let's open the visual script. Click this icon change layout. Then select show visa script.

Next, head over to the variables panel and create a new variable. This will be our questions list. Set the type to text and the value type to list of values. I'll set the first one to weekend mood. Then click add to insert two more. Which move genre do you prefer? And what's your favorite weather? Great. Now let's go back to the variables panel and create another list. This one will store the image for our left side the dog vibe.

So I will rename it to dog choices. Set the type to asset and the value type to list. Splitting our image into two separated lists. One for the dog interest and one for catchers keeps the logic much simpler down the line. So I will create another list for catch choices. For this tutorial, I created the graphics in Photoshop, but you can use any design software do you prefer. Each question has two possible answers. So, we'll need two images per question, one representing the dog vibe and the other representing the cat vibe.

I will keep all of the dog choices on the left and all of the cat choice on the right. I've already exported mine. Try to keep them the same size and only as large as they need to be. The smaller assets help keeps your effect running smoothly. Now in effect maker, open the assets panel, click upload asset and import all six images into your project. Now that the images are in the project, let's populate our list. Open the dog choices and assign the three dog images in order.

Then do the same for cat choices with the three cat images. Let's take this moment to put the first image from each list onto choice A and choice B so they don't start out blank. Now it's time to start building the large behind our game. Click add interaction and you will see all the different nodes we can use to build our visor script. Let's start by changing one of the objects in our scene. Search for a set property and add it to the graph.

This is one of the most useful nodes in effect maker because it lets us change almost any property of an object while the effect is running. In our case, we'll use it to change the assets of choice age, allowing us to swap its image during the game. Now, we need something to trigger that change. Since this game is controlled by head movement, we'll use the head gesture node and set the gesture to ch left. Every time the player tilts their head, this node sends a sino through the graph and starts the rest of the logic.

And you can think of that sino as a water flowing through a river, activating each node along the way. Whenever you want to add a new node, you can also right click anywhere in an empty area of the graph and just search for it. It's usually much faster than browsing through the menu. So now connect the output of head gesture to set property. At this point, every left head tilt will trigger the node. That works, but it isn't very practical.

While you're building the project, we'd have to tilt our heads every single time we wanted to test a small change. So, instead of tilting our heads every time, we will temporarily replace the head gesture node with a object dependent trigger to depart. Then assign choice A as the target object. Connect it exactly where the head gesture node was connected before. This way clicking the image in repro simulates selecting that answer making it much faster to build and debug the rest of the project.

You can just go ahead and give it a try. Before we animate anything, let's create two variables that we'll use in the project. The first one is score. We'll use it later to determine a player's final result. the second round, which keeps track of which question the player is currently on. Get the score variable into the graph. Search for the ad node and set its value to one. Then connect the result back to a score variable.

And now, every time this interaction run, the score increases by one. With the scoring logic in place, let's make the interaction feel a little nicer. Whenever the player selects an answer, we want the image to briefly grow and then returns to its original size. Small animations like this make the effect feel much more responsive. Search for transition and add it to the graph. We'll use together with another set property node.

This time instead of changing the asset, we'll change its size. Connect the outputs of our score logic to the transition node. If we look at the inspector, we can see that our image is currently 230x 230 pixels. Let's animate it from 230 to 260 over half a second. Now connect the output on change of the transition node to the size property. Okay, so we got an error. It says value and size must be the same data type. This happens because the size property actually expects two values, width and height.

A single number isn't enough. To fix that, search for the combine into vector node. Connect it between the transition and set property nodes and try again. Yeah, much better. Now, now duplicate both transition nodes. Select and press control D or command D to duplicate. For the second one, simply reverse the values. Connect it so it starts when the first transition finishes. Then make the animation a little smoother by setting the first transition curve to is out and the second one to is in.

So now let's test it again. Okay, but there is still one small problem. While the animation is playing, the player could select the same option multiple times, restarting the animation and triggering the rest of our logic more than once. To prevent that, we are going to create a simple gate. For this, create a new boolean variable called is animation. When the first transition starts, set is animation to true. Then duplicate that node, connect it to the end of the second trans