UI Editor: Events & Triggers

Hi everyone, my name is Ren from Quicksave Interactive. In this tutorial, we will be discussing Events and Triggers in the UI Editor. What are Events? Events are a series of state modifiers which will activate in sequence. Events are very useful for creating animations for loading screens all over the world. buttons, which can be triggered using a click, drag, or hover interaction. Let’s look at the UI Editor and learn more about how we can create events and triggers. In our UI Editor, you will notice that I have added a few new state modifiers to our Start button. These state modifiers will be used to create our events, the first of which increases the start button in scale, while the second decreases it. This uses the transform _scale property we’ve learned about in the previous tutorial. Then the next state modifier will be used for pressing the button. This decreases the start button in scale, but also makes it slightly transparent using the alpha property. And finally, we have a state modifier to reset the button back to its default scale and alpha. Let’s go ahead and create our events using the state modifiers here. here. In the Layout Settings panel you will find a section called Events. I will add a new item which will give us an empty event. I will call this event ButtonBounce. Now I will add a state to this ButtonBounce event. The state I will use will be start-large and then I will add another state modifier called start-small. This will allow us to trigger start-large and then start small in sequence using the button bounce event. Let’s go ahead and see our button bounce event in action. action. We can trigger events by clicking on them from the events panel. Once I do so, we can see that the start button increases and decreases in scale for every click, because start large and start small are running in sequence. This can be useful for a CTA style looping animation. To make looping events, we can use the machine editor and there will be a tutorial linked to this video for making looping events in the machine editor. In the next video, we will create a new event for pressing our start button and attaching it to a click trigger. Thank you for watching. See you again next time.

Hi everyone, welcome back. In this video we will be creating a new event, which can be used for a button press visual element. This event will be attached to a click trigger which we can preview within the UI editor. Let’s take a look at how we can accomplish this. Here we have our events panel. I will add a new event item and call this button press. For the states, I will use the start press state and the start default state. If we were to press the button press event, we can now see that the button has a click style animation. Let’s attach a click trigger to this event so we can make the button interactable within the UI editor. To accomplish this, you must go to the node panel and find the triggers section. To create a new trigger, you must click on the pencil icon here. here. Then you will have a list of available triggers. We will use the click trigger. And then we will attach the button press event to our click trigger. To interact with UI elements in the view panel, we must enter play mode in the UI editor. We can go to the debug menu up here and select toggle play mode. You can also use the F6 key. Once play mode is activated you will see this play icon in the view panels tab. Now that we are in play mode I can interact with the node elements in our view panel. So, I can click on the button here and it will actually activate the event I have attached with the click trigger. Events and triggers are powerful ways of creating interactive elements with your UI. I highly recommend you to click on the button here. encourage you to experiment with different event sequences and trigger handlers. I also recommend that you subscribe to the Quicksave YouTube channel and follow our documentation website where you can find more tutorials just like this. Thank you for watching and see you again next time.