UI Editor: State Modifiers

Hi everyone, my name is Ren from Quicksave Interactive. In this tutorial, we will continue our work with the UI Editor. We will focus on the alpha node property and how to use state modifiers to switch between the active states of our node properties.

Let’s dive into the UI Editor and learn more. The Alpha node property can be found in the node panel of our UI Editor.

Each node has their own set of node properties, including the Alpha property. This is useful for showing and hiding certain parts of our user interface.

Let’s go ahead and use the Alpha property to hide our start button. To do so, I will click on the start button node, and then for the alpha value,

I will set it as 0. And now you can see in our view, the start button has disappeared. We can also change the transparency of nodes as well,

using the alpha property. I will select the exit button, and then for the alpha value, I will set it as 0. then for the alpha value I will set this as 0 .5, and now the exit button is slightly more transparent.

The alpha property is inherited by the children nodes, so the start button is in fact hidden, but so are the child background and icons.

icons. If we were to set the start button back to 1 and then only hide the background, we can do so by clicking on the background sprite node and setting the alpha here to 0.

And now you can see only the background child node has been hidden, but the icon is still fully visible. It is now visible. It is important to mention that when we use Alpha 0,

we are not only hiding the node, we are preventing the rendering of this node. This is a great optimization when it comes to managing our resources for showing and hiding elements in our user interface.

The Alpha node property is one of the most powerful properties you will use. use in the UI Editor. In the next video, we will be using the Alpha property with our state modifiers to create different states of visibility for our menu and our buttons.

Thank you for watching and see you again next time.

Hi everyone, welcome back. In this video, we are going to use the Alpha property and state modifiers to create different states of visibility for our menu and our start button.

Let’s get right to it. To create a new state modifier, I’m going to click on our menu node. And then I will go to the node panel,

and look for this section called modifiers. I will click the add item button. This will create a new state modifier for us to use.

You can name your state modifiers as you see fit. I will name this “show-menu” because I want the state modifier to be used to show our menu.

There are many properties to be used for a state modifier. I wish to use the transform alpha property. I will search for it in the search box.

Now we want our transform alpha to equal a certain value when this state is used. So, I will use the equals operator,

and the value I wish to set is 1, because I want this state to show the menu in full visibility, and then I will add another state modifier.

This one I will call “hide-menu”. because I want to completely hide the menu. I will also use transform alpha which should equal a value and that value should be zero.

Therefore the menu should be completely hidden. Now we can demonstrate these modifiers by clicking on them. them. And as you can see,

the menu is shown here in the view, but when I click “hide menu” they are now gone. The menu has been completely hidden. Let’s do the same with the start button and the exit button to demonstrate how you can hide only certain parts of the user interface depending on what you wish to be seen.

seen. First I will show the menu once more and then in the start button I will add a new state modifier. I will call this state modifier “show-start”.

For the property I will once again use transform.alpha which should equal a value of 1. And then I will add another state modifier and call this “hide-start”.

I will also use the alpha property with an operator of equals with a value of 0. Now if I click show start, of course we see the start button,

but if I click hide start, the start button, the start button, the start button, the start button. the start button has now vanished. And once more, let’s do the same for our exit button. I will go to the exit button node and add a new state modifier.

I will call this state “show-exit”. And then for the property, I will again use the transform .alpha, which should be 1,

and I will create another state modifier called hide exit, using alpha and equaling 0. So if I toggle between these,

we can see that “show-exit” and “hide-exit” will make the exit button visible or not visible. And, by clicking on the start button again,

we can “hide-start” or “show-start”. This allows us to control the visibility of individual nodes in our UI editor.

State modifiers are a powerful way of using the node properties to control the visual states of your game. In the next video,

we will look at the active states and the states list. Thank you for watching. See you again next time.

Hi everyone, welcome back. In this video, we will be looking at active states and the state list. Let’s go to the UI Editor and find out more.

In the UI Editor, we already have a few active states being shown. As you can see in the hierarchy panel, there are these labels, such as show menu,

menu, hide start, hide exit. These labels show the currently active state of the node. For example, in the menu node,

if I were to click between show menu and hide menu, you can see the active label of the menu node has been changed. Same with the start button.

button and the exit button. This gives us a clear way of understanding which nodes currently have what active state modifiers.

In addition to this, we can also see a list of the state modifiers that are available to us. To do so, we can go to the link in the description below. Settings panel and click on this tab here which says States.

And here we can see all of the state modifiers that we have created. We can click on them and it actually will alter the active state of our nodes.

Your UI can potentially have many, many different states. This is why it’s important to have clear visibility on what states are active and available to you.

The UI Editor is undoubtedly a powerful and proven tool when it comes to managing our states. Thank you for watching. In the next video,

we will discuss resetting your active states. See you again next time.

Hi everyone, in this video we will be taking a quick look at how to reset the modifiers of our nodes back to their original states.

Let’s dive into the UI Editor and learn how to accomplish this. Here we have a few nodes that have active states. The menu start button and exit button nodes.

all have the active state labeled. I wish to reset these active states so that we can see the nodes with their original properties. This means completely removing the current active states.

To do so, we will go to the debug menu and select reset modifier states. Now you can see the active states have been removed from the nodes,

and the buttons and menu are currently visible once more in their original states. Resetting the modifier states can be a very useful tool when it comes to debugging your current active states in the UI editor.

I highly encourage you to. experiment with creating different state modifiers and also being more familiar and comfortable with the UI Editor and how it makes it easier to manage our state modifiers.

I also recommend subscribing to our YouTube channel and staying up to date with the documentation website, where you can find more tutorials just like this.

Also, as an added bonus with this tutorial chapter, we’ve included a more advanced video on easing and duration when it comes to the alpha property.

If you’re feeling bold, I highly recommend checking it out. Thank you and see you again next time.

Hi everyone, welcome back. In this advanced bonus video, we will be taking a look at easing and duration and how they can be used to improve the fidelity of our state modifiers.

Let’s dive right in. To demonstrate the easing and duration properties of our state modifiers, I will use the state modifiers we created for our start button.

I will click on the start button node and then go to the state modifiers in the node panel. In the show start modifier I will go to easing and select “easeincubic”.

I will set that duration to zero. 0.5. For hide start, I will set the easing to “easeoutcubic” and set the duration to 0.5.

I will then toggle between the two. And you can see in our view, the start button is now fading in and out. whereas a node that does not have easing quickly show and hide itself.

Easing is a bit more of an advanced feature, but it definitely makes showing and hiding our elements all the more appealing. I highly recommend you experiment with the duration and other easing property values as well.

Thank you for watching and see you again next time.