Building a basic composition
Transcript
-
OK. We know how this composition produces this window with the text “Hello World” upon it. Now let’s build it. There are several ways to go about this; I’ll show you one common way. I’ll close this one, and select “File,” “New Composition.”
-
When opening up a new composition, Vuo automatically inserts a “Fire on Start” node onto the canvas to help get us started. In the previous composition, the “Fire on Start” node was tinted yellow. To help organize your composition, you can tint nodes different colors by right-clicking on the node. I’ll go ahead and tint this one yellow.
-
Tinting doesn’t have any effect on how the node functions, it’s just a tool for organizing your composition. It becomes especially helpful when you have a large number of nodes on the canvas and you want to visually organize them into different groups. For example, you might want all the nodes that produce layers to be labeled green so you can find them more easily. If you browse Vuo’s example compositions, each one is built to demonstrate a specific node or concept, and those nodes are tinted violet.
-
Our “Fire on Start” node is going to fire off our initial event, so the next thing we want to do is make some text. I’ll go to the node library and type in “make text.” We have two immediate options: to make a text image, or make a text layer. Both will work, but in this context I prefer to work with layers for a few reasons, the main one being that I have the flexibility to easily add a background layer later on if I want to.
-
I’ll drag “Make Text Layer” onto the canvas. “Make Text Layer” will perform the primary function in this composition, so, like the built in example compositions, I’ll tint it violet. Now I want to take the event that will fire upon starting and send it down to the “Make Text Layer” node. Notice that when I drag a cable outward from the started port, that any port that’s capable of receiving an event will light up.
-
I can’t send an event to an output port, but any of these ports can receive an event. In this context, I could actually send the event to any of these ports and create a text layer, but since I’m only sending an event, and not any data that might modify the data already present at these ports, I’m just going to send our event directly to the refresh port.
-
When “Make Text Layer” receives the event, it will look at the information present at its input and assemble a layer with this text, in this font, at this position in the window. Now we need to create a window for that layer to be displayed upon. In Vuo, when we want to display something on a window, the technical term is to “render” it, to bring it to fruition within the window.
-
I’ll go to the Node Library and type “render.” Notice that there are several render nodes. Vuo can work with many formats of information, all of which you can read about in the user manual and node documentation, and in a case like this, you just need to match it up. We’re working with layers, so we’ll choose “Render Layers to Window.”
-
I’ll put “Render Layers to Window” onto the canvas, and I’ll tint it green. Now I’ll begin to drag a cable that will contain our text layer plus our original event, and notice that our “Layers” port lights up as well as the “Refresh” port. And, if I hover the cable over the “Refresh” port, notice that our cable switches from a thick data + event cable, to a thin event-only cable.
-
This demonstrates that we could bring the data of our text layer, plus the original event to the “Refresh” port, but that our data would automatically be stripped away, because “Refresh” ports only receive events. And when they receive an event, they cause the node to process the data that is already present within the node. Since we want to input new data into this node, our text layer, we’re going to bring our data + event down to the “Layers” input port. Now we are ready to go. I’ll go ahead and press run, and there we have it.
-
If we want to do more with this, it’s pretty easy. To demonstrate, I’ll quickly walk you through how to insert another layer behind our text layer. To do this, I’ll start by dragging an image onto the canvas, and a node will pop up that retrieves the image from my computer. I’ll type in “image” and “layer” to find a node that will create a layer that shows my image. I’ll choose the “Make Scaled Layer” node as it will scale the image to fit our window, as opposed to trying to produce its original size.
-
“Fetch Image” will need an event to make something happen, so I’ll link an event from “Fire on Start” to “Fetch Image.” Then I’ll take our image and send it to the “Image” input port. Next, I’ll take our new layer and lay it down first position on our window. The positions are oriented so that the first layer you lay down is at the back, or farthest from your eyes, and the second one is at the front, closer to you eyes, and the third is closer still, and so on.
-
Now I’ll take our text and lay it down second, in front of our background layer. I’ll right click our trigger port, fire a new event through our new nodes and now we have our image rendered as a layer in the background. Excellent, to learn more about how the editor works, check out the next video.
