UI Editor: Introduction to Nodes

Hi everyone, my name is Ren from Quicksave Interactive. We’re going to be exploring the UI Editor’s node and hierarchy system. What is a node?

A node is the visual element that makes up your game’s user interface. For example, you may have a main menu. The buttons on your main menu are nodes.

There are many different types of nodes, but for this tutorial, we will be focusing on two common node types, the container node and the sprite node.

Let’s dive into the UI Editor to learn more about these. Upon opening the UI Editor, you will be greeted with a number of panels. panels. For the sake of this tutorial,

we will be focusing on these two panels here, the Hierarchy panel and the Node panel. The Hierarchy panel will be a tree list format collection of your nodes.

Meanwhile, the Node panel will contain all of your node’s properties. Let’s go ahead and add a new container node. To do so,

I will click this plus icon button here, which is the add node button. Once I click this button, we now have a new container node.

I am going to rename this node as root, as it is our root container node. The container node is essentially an arbitrary node type.

It is very useful in organizing the other node types which can exist within it. And as you can see, every node type that we create has a set of node properties which we will be exploring in a later tutorial.

Thank you for watching our first tutorial video. In the next video, we will be exploring the hierarchy system, why it is important, and the parent-child relationship between nodes.

See you next time.

Hi everyone, welcome back. What is a hierarchy? A hierarchy is a collection of your nodes in a tree list format.

You will use the hierarchy to group and layer your nodes in the same way. Why do you need a hierarchy?

Well, let’s say you have a main menu and your main menu is made up of multiple buttons. Each of those buttons can be an individual container node.

Each of these buttons may also have a background and an icon. This is where the UI Editor’s hierarchy becomes a powerful tool in organizing your visual elements for understandability, updating, and even animating. Now let’s take a look at the hierarchy in the UI editor and how we can add more nodes to our hierarchy.

We still have the root container node from our last video. I’m going to add a new node by clicking the add node button and I will call it “menu”.

You will see that the menu container node is now a child of the root container node. This means the menu exists within the root node making the root node the parent node.

As with the parent-child relationship between nodes, if we were to update the property of the root node, for example, the alignment or the size,

the properties of the menu child node would also be updated as well. Within the hierarchy, we can add as many child nodes as we need.

I’m going to add a new container node to the menu. I will name this new container node “Start button”. I will also add another container node to our menu by clicking on the menu node and then adding a new node and calling it “Exit button”.

The Start button and Exit button nodes are children of the menu node. If the menu node were to be updated, then the start button node and the exit button node will also be updated.

But you’ll notice that the start button and exit button nodes are siblings of each other. This means the changes which occur on one, will not occur on the other.

For example, if we have an animation while clicking the start button. that animation will not occur for the exit button. In our next video, we will add sprite node types as children to our buttons and add textures to those sprite icons as well, so we can see our buttons in our view panel.

Thank you for watching and see you next time.

Hi everyone and welcome back. In this video, we will be taking a look at the sprite node type and adding an image to our sprite node.

Now what is a sprite? A sprite is a visual image that’s part of your game’s user interface. For example,

this can be a clickable sprite button or an icon. Let’s take a look at the UI Editor and how we can add a sprite node to our hierarchy.

Here we have our UI Editor’s hierarchy with our start button container node. I will add a sprite node to this start button node.

To do this, we will click this drop down here, which shows us all of our node types. We will then select the sprite node type.

We will then click the add node button here, and I will name this sprite node “background”. I will now create another sprite node for our start button.

I will click on the start button container node, and then add another sprite using the add node button. I will name this sprite node “icon”.

Starting with the background sprite node, I will select it and we will now choose an image to be used as the texture for our sprite node.

I will go to the node prompt and click on the start button. here and select this button which will then allow me to open the file browser or finder to find an image to use as the texture.

Once I’ve found that image I will open it and we can then see it in the view of our UI editor. I will now do the same for the icon.

I will select the icon sprite node, I will then go to the node properties and then click this button which will open the finder and I will find my image to be used as a texture.

I will then open that image and then we can see the image has been brought into the view. We have now created a visual representation of our start button using the sprite node.

The sprite node type is one of the core features of the UI Editor when it comes to adding visual elements to your game. As an added challenge,

I recommend that you make an attempt to add these sprite nodes to your game’s nodes and images for your exit button as well. Thank you and see you again next time.

Hi everyone, and welcome back. In this video, we will be talking about layering and moving around a few nodes to demonstrate why layering is so important.

Now, what is layering? Well, with any visual design, there is a foreground, background, and an order by which our nodes are displayed. The UI Editor’s hierarchy allows us to clearly and easily define this order. Let’s take a look at how this is done.

Here we have our start button. As you can see, the star icon is on a higher layer than the background. The further down the node is, the higher the layer the node will be. So we can re-order the layer by clicking on the node we would like to move in the hierarchy and dragging it to the position we would like it to be.

So I will move this icon. In the position above the background, which then moves the icon behind the background sprite node.

I will now move the icon back to the foreground of the background sprite node. And there you have it. Layering is a powerful way of setting and determining which of your visual elements are on the foreground or the background of your user interface.

Thank you for watching and see you next time.

Hi everyone, and welcome back. In this tutorial video, we will be deleting nodes in the UI Editor. I will be deleting the BG node.

To do this, I will select the BG node, and then I will click this trash icon button, which is the delete node button.

button. I will be prompted whether I would like to confirm or deny the deletion. I will select yes, and the BG node is no more.

Now, what happens if we were to delete a node that has children? For example, this exit button is a parent that has an icon and BG child node. If I were to click the “Delete” button on the “Exit” button node and select “Yes”,

it will delete both the parent and the child nodes. It is important to remember that deleting a node is a destructive action.

It is possible to undo the deletion using Ctrl +Z or Command +Z on your keyboard. But we still highly advise you to be careful when deleting your nodes.

Thank you for watching and see you again next time.