Machine Editor: Layers & Activities

Hi everyone, my name is Ren from Quicksave Interactive. In this tutorial, we will be discussing layers and state activities. What is a layer?

A layer is a layout file from our UI Editor. These are visually drawn to the states of our state machine. And a state activity allows us to define the UI modifiers that are active when entering and exiting our states. Let’s take a look at the machine editor and how we can add layers and state activities.

In the machine editor, we are going to be adding a new layer. To do this, we will go to the Settings panel and under the Layer section, click the Add Item button.

button. This will create an empty layer property for us to use. I’m going to name this layer Main. For our layout file, I will be using the layout we’ve created during the UI Editor tutorial.

I will click this blue button, which will open the File Browser that allows us to select the layout file we wish to use. Now, in the View panel, I will be using the layout file that allows us to select the layout you can see that the layout file has been successfully added as our layer.

Now I do not wish for our menu to be active every time we run our machine. So you might have remembered that during the UI Editor tutorial,

we created a modifier called hide menu that sets the alpha of the menu to zero. Let’s go back to the layout file. Let’s go ahead and set that modifier as our instant state.

To do so, we will go to this instant state section and click the Add Item button. And we are going to set this instant state as hide -menu.

And now our menu has vanished from the view. Now that we have a list, and an instant state, in the next video we will be using state activities to learn how to activate modifiers based on the entry and exit of our machine states.

Thank you and see you again next time.

Hi everyone and welcome back. In this video, we will be creating state activities and demonstrating how they can be used to activate modifiers based on the entry and exit of our machine states.

Let’s get started. To create our state activities, we will go to the settings panel and under the section called state activities,

we will click the Add Item button. This will create an empty State Activity. I will name this State Activity, “show-menu”. For our layout,

we need to use a layout which has the UI modifiers defined in it. In this case, it will be our main layout. Now, we have two modifiers in that layout. We have show-menu and hide-menu. For our entry state, I want to show the menu. And when we exit the state, I wish to hide the menu. Now that we have our state activity, we can use it within our menu machine.

state. So when we enter the menu machine state, we can show the menu UI and when we exit the state, we can hide the menu UI.

Let’s go ahead and do that. With the menu state selected, we will go to the properties and find the activity section. We will add an item and this item will be the activity we have defined.

which is show-menu. And now you can see, because the menu state is active, we can see the menu in our view.

If I were to click the Game event to transition away from the menu, the menu disappears. And, if I were to re-enter the menu state by triggering the menu,

the menu disappears. We now re -enter the menu state where we can see the menu visible. To clarify, when we enter the menu state,

the enter state of our state activity is triggered. In this case, it is the show-menu modifier. While when we exit the menu state,

the exit state of the activity is triggered. is triggered, in this case it is the hide-menu UI modifier. Layers and state activities are powerful ways our machine editor can control the UI of our game based on machine states.

I highly recommend that you subscribe to our YouTube channel and stay up to date with our documentation website for tutorials. just like this. Thank you for watching,

see you again next time.