Input, Selectables, Navigation, and Transitions

This video. We're going to talk about user input. So in the last video, we showed how we can pretty much make anything look like what we want it to look like. At least we we talked about the base objects that we would manipulate in order to achieve a desired visual look. However, we haven't yet talked about how we can accept input from the user. Now we're not going to get all crazy and put together a custom control or something like that. But I do want to go over the built in controls, their similarities and how to handle their events. So all of this is actually going to be pretty straightforward because all of the things that accept input, all share the same base class called selectable. And if you know how to use one, you're probably good on using the rest of them. So the way I'm going to organize this this video is I'm going to go over each one of the items, each one of the input items first, and then I'm going to talk about their shared attributes and how we can hook up to events. So let's just look at each one of the built in types. Know that the system is very extensible. Like previously I said that you could pretty much construct your own input types as well if you wanted to. That's a little bit beyond the scope of this video series, however, But you guys should be able to see though, how you can take these UI elements and actually combine them into more complex things. Like if you wanted to make a Tab view, for example, you could compose that as a combination of toggle buttons and panels, for example. But again, I just want to show you guys just the basic stuff that the folks over at Unity decided to throw into the engine by default. So let's go and get that started. The first thing I'm going to do is go to my hierarchy and create a canvas. And just like before, I'm going to leave this in screen space overlay. Inside of my canvas, which is huge. As always, I'm going to create a panel. I'm just going to make this look a little bit nicer by centering it. I'm not going to I don't care about the anchors at this point. Okay, so I'm going to go ahead and instantiate each one of the controls we're going to be talking about today. Go over each one of their unique features and then go over what they share in common. So inside this panel, I'm going to go to UI and I'm going to first create a button. Then I'm going to go into UI and I'm going to create a slider. Right there. Then I'm going to go and panel, I'm going to create a I'm not going to create a scroll bar. A scroll bar is an interactive element, but we're going to talk about that in a later video. I'm going to create a toggle. However, I'm also going to create two more toggles. And the reason why will become apparent later. And then in the panel, I'm also going to create a input field. So if we go ahead and hit play, all of these things will behave the way that we expect them to. We can click on our buttons, we can slide our sliders, we can toggle our toggles and we can input in our input. So let's go ahead and talk about each one of these individually. First off, the button. Now the button is composed of a rec transform because it's underneath the canvas. Canvas render because it's a visual element in image. I wonder where we saw that before. And then a button. Now, interestingly, this button is actually largely like a not specific to buttons. In fact, interactable transition. All of these colors, color multiplier, fade duration and navigation all come from the base type selectable. Now a selectable is basically a component that can retrieve receive user input. So all of what we're looking at are collectibles. So the button itself isn't really that interesting because ultimately it's the simplest form of an input control. And largely it its behavior comes from the selectable base class, which all of these components share. So I'm not going to talk about it too much, but I do want to point out again, it is composed of an image. That's important. And a text. So you'll notice that the image is going to. Be the same size as the rect transform in its entirety. The text is going to be set by default to fill and stretch this. This. But it's important to realize, though, that the text itself is really irrelevant. I could delete the text and now the button doesn't have text. I can hit play and I can click on the button all I want. It'll fire off its events. It'll function just as it should. So it's important to understand that that text is really just text that happens to come along for the ride and is there for decoration purposes only. So to add the text, I can right click the button, go down to UI, select text. Now you'll notice it doesn't look quite right. And that's because the default text isn't going to automatically go into stretch mode with the anchors. But we can fix that really easily by going into the rect transform, holding down alt and shift and clicking on the uniform stretch. Now you notice that the text isn't aligned the way we might want it to be. So that means we just go into the text component that we talked about in the last video and select center. And we've now deleted and replaced the text that was in that button. So remember, just like what I said in the last video, everything is composed of images and text. And of course we can go ahead and change the text inside of it. Say, this is a button. Again. If I hit play, the button will behave just as it did before. Okay. One other interesting thing you'll notice about Button is that we have this on click list, but we're going to talk about that when we talk about events. Next. Let's move on to the slider. Very simple control. If I hit play, we can slide it forwards and backwards. So what exactly is going on here? Well, we can see that the slider is made up of the fill area, the fill the slide area and the handle. So the fill area and the fill determine how much of that is filled. So, for example, go ahead and I'm going to drag the game window off screen and I'm going to play around with this so you can see that what's going on here? Is that the fill area is actually getting smaller or not smaller. The fill itself is getting smaller. As you can see right there. Unfortunately, I'm not getting any. Um, feedback right here. On the wreck transform of the fill when we can see it's quite obviously moving and that's most likely due to a small bug in the way that the system is built. But as you see, it will be getting bigger and smaller depending on. How much we filled it. So then we have the handle slide area and the handle. So it's pretty straightforward stuff. These are just made up of images. Getting back to the slider itself, really all the slider needs is a image. First of all, for the background that's just there for decoration purposes. Then you'll notice these are the same things that were in a button because all of these components or all of these attributes were inherited from the selectable base type. Then you'll notice we give it a fill rect and a handle rect. So the fill rect is the fill and the handle rect is the handle. So that's how it knows which game object to increase the size of. As we move it up and down. So you can really construct a slider by yourself if you really wanted to. You could create a slider out of anything. And what's cool about sliders is that you could do things like take this handle, for instance, just disable it. And now we have a health bar. So it's really cool how we can kind of dissect these these interactable elements and make them behave in the way that we want. But anyway, so again, just to repeat, the slider component simply needs a reference to the fill rect and the handle rect and that's it. You can really think about these controls as just prefabs that are pre-configured for us. Next up, we have our direction. We can go left to right, right to left, Bottom to top and top to bottom. Now, you'll notice that when I do bottom to top and top to bottom, it looks kind of messed up. And that's because I don't have any height. But if I add height to it, you'll notice the bottom to top and top to bottom. Now look like they should. Next up, you'll notice the min value and max value. It's pretty straightforward. A slider allows you to select a value between a min value and a max value. So, for example, if we wanted to select between 100 and 2000. Notice that visually the slider didn't change at all. But if we look at this value right here, it did. So in reality, the minimax value aren't going to change how the slider behaves or how it looks, but they will change what value it dumps out. Next up, we have whole numbers. Pretty self-explanatory. Whole numbers just make it so we can't have fractional units. So, for example, if we had a min value of five and a max value of 15. You'll notice that the only acceptable values are whole numbers between 5 and 15. And you kind see it snapping a little bit. Then finally we have our value. Which value is the current well value of the slider. And that's that's really it for the slider. Those that's what makes the slider. All that makes the slider is as a fill rect and a handle rect and a couple constraints on its value and that's it. Next up, we have the event on value changed which allows us to have some code happen when the value of the slider changes. We'll look at that here shortly when we talk about events. Okay. Toggle buttons. I'm going to look at the first one in isolation and then the second two I'm going to put into a group. Now, a toggle button, as you can see. Has the selectable, has interactable transition has all of our stuff. It has our navigation. Then it has the toggle specific things. For example, is on. Which is toggled by clicking. Then toggle transition none or fade. Which just makes it so the toggle. CheckBox inside of it. This guy right here, this check mark, whether or not he slowly transitions or not. That check mark is determined by this graphic right here. So really, all a toggle is is it's a control that when you click on it, it'll toggle whether or not a graphic is being shown and that's it. So don't even need this background or this checkmark or this sorry background or this label at all if I didn't want it. I mean, again, there's nothing special about this particular hierarchy of objects. Again, all this control is, is it happens to be a particular hierarchy of objects that was pre-created for us that we can modify in any way that we want. Which is really cool. So again, we have our check mark, which is an image and we have our label, which is a text. And of course we can change this to whatever we want. If we do that, we also should make sure that we have our size big enough to contain it. And of course, we could even go ahead. And if we really wanted to, we could throw a and this applies to every single control. We can throw a canvas renderer and an image. Directly on the control as well if we wanted to set up a source image. Of like, I think background looks kind of nice. So again, we can configure once we understand how rec transforms images and text work, we can make these look however we want. So the only thing that makes a toggle, a toggle is the fact it has a graphic somewhere in its hierarchy. Okay, moving on with toggles, we now have groups, so you might be familiar if you're familiar with working with Gooeys like maybe, for example, or Windows Forms or Xaml. You might be familiar with the differentiation between a checkbox and a radio button. If you're not a checkbox is like what we see here with our toggles, we can just toggle them on and off as much as we want. But a radio button, however, always exists in a group where only one item can be selected at a time. We can accomplish the same thing by adding a toggle group component to any game object we want and then adding our toggle our individual toggle items to that toggle group. So let's go ahead and take a look at doing that. I'm going to go ahead and exit play mode and then so that we can modify the scene without it, without the changes being lost. And I'm actually going to go ahead and create a panel. So I'm going to right click this panel, go to UI, and I'm going to create another panel. And on this panel, I'm going to do the same thing. I'm going to go ahead and set it to center and then I'm going to resize it a little bit. And the reason I'm doing this is just to give you guys some visual distinction for our toggles. Then I'm going to take these two toggles right here and I'm going to child them to panel. So now we have a nice little panel that we can put together a toggle group in. So zooming in here, like I said, the way that we could make turn these checkboxes into radio buttons is really just a matter of creating a toggle group component somewhere and matching it to these two toggles. Now, I want to I want to really stress the fact that the toggle group does not need to be in the canvas. It doesn't need to be anywhere in particular. It just needs to exist. However, I highly recommend when creating radio buttons by using toggles that you add the toggle group component to a parent of the toggles that you want to group. It could be an empty game object if you want, or it could be a panel or whatever you want. So I'm going to come up here to panel and I'm going to add a component and I'm going to say toggle group. Now, you notice that toggle group does not have any public properties on it. So there's nothing that we can play around with in the toggle group itself. And in fact, it doesn't really do anything until we plug in some toggles into it. So let's go ahead and do that. I'm going to click on this toggle. I'm going to scroll down, find its group parameter, click and drag panel onto that. Then I'm going to do the same thing with the other toggle. I'm going to click on the other toggle. Click and drag panel onto the group. Now, both of these toggles are associated with the toggle group component on its parent panel. So to see the behavior of that, let's go ahead and hit play. And right off the bat we notice that the toggle group parent or the toggle group decided, first of all, that only one toggle can be selected at a time anyway, and it deselected the second one. Now we see that as we click on the other toggle only one is selected at a time. This toggle is unaffected. So let's say we wanted to add another toggle to this group. Well, I can go ahead and move this input down a little bit, increase the size of the parent panel, maybe move these guys up a little bit and then I'm simply going to duplicate this toggle. Now by duplicating the toggle, it's now going to still reference this group because I duplicated the game object. It's going to contain the same parameters because it contains the same parameters. It's now tied to that same group. Meaning if I come back here and hit play. You'll notice that that toggle now appears in the group. Now, I want to stress this one more time. The actual hierarchy of these objects are irrelevant. Meaning I can take this toggle. And move it outside of the panel and move it all the way over here into the canvas. And hit play. As long as that toggle still references the same toggle group. Notice how it still behaves as a radio button instead of a checkbox. Now, when doing stuff like this, you may want to actually follow the typical design paradigms and instead of using a checkbox, use a radio button instead. Now doing that would be very trivial because we would simply select the check mark and change its source image. In this case, I'm going to change the source image to a sprite. Then I'm going to do the same on the other toggles as well. I'm going to open up the other, toggle click on its check mark. Now you notice that the check mark is currently invisible and that again is due to the toggle group turning off this checkbox because it turned off this checkbox. The alpha of the check mark was set to none. So let's go ahead and change this to a Sprite. Now let's do this on the last toggle. I'm going to go to check. Change this to a Sprite. Now when I hit play. It looks a little bit more like radio buttons. I mean, not great, but obviously you guys can see that if you went in and wrote your or put together your own sprites, you can make it look however you want. And again, I'm just I really, really, really want to stress that these these components, these game objects, these these input elements are really just combinations of the primitive things that we have been learning about throughout this entire series. They're just rec transforms and images and text. I mean, I can come up here as long as this toggle still has this check mark game object. I can do whatever I want to it. I can move this check mark game object above here. I can delete the background and the label if I wanted to and then I could hit play. And notice how it still works. I could even take this check Mark and I can move it not even be apparent in the system at all. I don't think this will work because I think we'll have some issues raycasting, which we do. So what I can do with this toggle is I can simply throw in an image to it. And then hit play. So see. This checkmark. Checkmark flew all the way over here. But it still works. And again, understanding how these elements are created is incredibly important because once you understand that, you can create very, very complex. Ease yourself. Okay, so that's it about toggle buttons for now. We'll be coming back to them shortly. Let's talk about input fields. Input fields. Very straightforward. We have a starting value. Um, so I can say test. And we see it starts with test. So super exciting. Well, that's not going to work. Let's go and delete that. Um, so that's a starting value. We have an input type. We have autocorrect and password. Password will do exactly what you expect. It'll just be password. Now it seems to be a bug where after we click off the panel or the password, it shows the password. I don't think that's exactly what it is that it should be doing, but. It's bad after all. We have character limit, pretty straightforward. We can restrict how many characters they can have. We have active text, color selection. Text color just gives us the different colors for text that we've typed in or the selection that we've had. We have multi-line which we can enable or disable. And that's actually it as far as the input field. Everything else is inherited from selectable, interactable, transition and navigation all come from the selectable base type. So again, the only thing that makes a text component, a text component or an input field component is that we have. The text component. The starting value, the input type, the character limit, text color and multi-line. Now the text component inside of the edit field is going to just be what the what the label is like. For example, we could say username. For this. Duplicate this to create another one. Click in here and change it to password. Now you'll notice that these input fields have these text components and what they're going to do is when we hit play. You'll notice that those those labels change. Then finally, you'll notice that. We're not going to have any events with our text fields. Okay. So those are going to be our major interactive components and they really will work for a variety of scenarios both in interaction and non interaction, because you could certainly tell a slider, for example, to not accept input and then simply use the slider as a health bar like I had mentioned earlier. So I talked a whole lot about the individual properties of these different texts. These different controls. But in reality, they're much more similar than you might expect. Because remember that base class, that selectable base class. Let's start off with the button. And the reason I want to start off with the button is the button literally has nothing else interesting about it except for its onClick handler and what it inherited from selectable. And once you understand how to work with selectable is it'll just be the same on every single one of them. Now, the first thing you'll notice about collectibles is they have this Interactable checkbox. The Interactable checkbox determines if the button is or if this collectible is enabled or not. Remember, this is also controlled by canvas groups, meaning if I were to come up here to my panel, hit add component and type in canvas group, I can uncheck interactable and it'll overwrite it for every one of my controls. So we have interactable again turning interactable off. If I hit play, I can no longer press the button. Now that's really important for things for, for well, guiding people through user interfaces. But it's also really important, like I mentioned earlier, for controls that are not meant to be interacted with, maybe controls that you're just using the behavior of a control for display purposes, but not necessarily expecting the user to actually interact with it. Next up, we have our transition. Now a transition is a big one. Basically the transition allows us to respond to events. Transitions replace the old gooey skin on hover and on active and all that stuff. Now it's all replaced by transition. Transition is going to, first of all, have a transition type. The simplest of a transition type is none. So when I hit none, notice that all of those items disappear and I can no longer modify like the tint color. Now, when I hit play, notice how the button doesn't respond to my input. At least it doesn't appear to. Now, of course, if we bound to the onClick event handler, we would know the button was receiving that event. But we don't get any visual indication if the mouse is hovering it or not. So now that's going to be the simplest transition. Then we have color tint. Now color tint is going to require a target graphic. In this case, the target graphic is the image component that is on the button object itself. Note while I turn on and off the image component, look what happens to the button. So that image actually comes from the button object itself and in this case, a simple gooey sprite. I could change it to a background or an input field background or a pop up highlight or whatever I want. Or a custom button as well, and it'll change appropriately. It's important to understand, though, as we're going to see shortly, that the target graphic on your transition does not need to be on the same game object as the button or as the selectable component itself. Okay, so the color tint effectively just tints the color of a particular image when we something happens and we can see that by I'm going to move my game view off to the side again and I'm going to have my button and we're going to notice that unfortunately, it's not going to show up in the editor. That's too bad. Well, we should have seen, however, is the tint of this image changing? As I hovered over the button and clicked it And it's going to change according to these values. So, for example, I can set the normal color. I like color to blue. This is going to be really ugly button. Press color to retina melting purple. And let's throw in some green for disabled. Now let's hit play. And notice how the color tint changes. You can even set alpha values, for example, if in the normal color we want it to be not very or very transparent, we can do that and notice how it gets less transparent as we transition to the other colors. Then we have color multiplier. Color multiplier affects the strength of how these colors affect the button. See this? Yeah. This is melting my retina right now. But if we tone it down a little bit, you'll notice it's much, much more muted. Then we had the fade duration. Fade duration should be pretty straightforward. If you set it to five, it's going to take five seconds to fade in to a particular color. If we select the fade duration to 0.5, it's going to take half a second to fade into a particular color. If we set it to its default of 0.1, you'll notice it's very instant. So that's our color tint transition. Next up, we have our sprite swap. Sprite swap transition. Now our sprite swap transition is exactly what it sounds like. It's basically going to change the sprite of an image when something happens. Again, it operates under a target graphic. And again, that target graphic is the image component that's underneath this button. But we can come in here and we can change which sprites appear when certain things happen. So in this case, I just selected a bunch of random built in sprites. Now, when I hit play. Notice how those sprites change. All right. So that's all well and good. Honestly, at this point, you're mostly going to be working with none or color tint. I find Sprite Swap to be a little jarring. I mean, for some user interfaces it might be appropriate, but it's kind of old school. The transition you should really spend some time getting acquainted with, however, is the most powerful one, and the most powerful one is the animation. The animation transition, you'll notice, does nothing by default. As you see. So you might assume that it's broken. But in actual fact, what it's doing is it's attaching to an animation controller. And sending triggers into it when something changes. So let's go ahead and put this together. I'm not going to hit auto generate animation. The reason I'm not going to do that is because I want to show you guys how that process is handled manually. Because it's really important to understand the animation transition so that we can make the most use of it. So what I'm going to do is in my project window, I'm going to select, Create, and I'm going to create an animation controller and I'm going to call this button. Animation. This is. Then I'm going to click on my button. I'm going to say add component and I'm going to add an animation, an animator, Sorry. And then I'm going to click and drag button animations onto controller. Notice how the second we added the button animation controller to our animator component, that button disappeared to automatically generate our animation controller. And that's because the all the generate automatic animation controller does is does what we just did. Plus it sets up some triggers in our controller for us. So basically what's going to happen is the normal trigger will be fired. When a normal thing happens, the highlighted trigger will happen when the highlighted thing happens, pressed, pressed and disabled, disabled. And those triggers will allow me to go in to the animation and play around with the visual aspect of anything to do with the button. Like mean anything. I can change the tint color, I can change the scale, I can bring in an element I can do fading, I can do anything. So let's take a look at all that flexibility that we got. The first thing I'm going to do is notice that my animator, there's really nothing going on here. Well, the first thing I'm going to do is I'm going to create a clip. On my button for a normal state. So I'm going to create, create, clip, create new clip, and I'm going to call this button normal. The normal state is going to be empty. It's not going to have anything in it because I want the normal state to look like exactly what we see in the inspector. Next up, I'm going to create our. Are highlighted, pressed and disabled states. I'm not going to put fill them in with any animation yet. We'll do that in a momentarily. So next up, I'm going to say button highlighted. Which is going to be empty. Then I'm going to say button disabled. Which is going to be empty and I think be the last one is going to be pressed. Okay, so that's all well and good. If we go ahead and fire up the game and move over into our animator, we notice that button normal is sitting there and playing. And so. That's well, it's playing because it's our default state. So how do we perform the actual state transition? Well, basically all we need to do is we need to create triggers for all four of these bits. So I'm going to create a new parameter and I'm going to create a new trigger and I'm going to say normal. Then I'm going to create a new trigger and I'm going to say highlighted. Then I'm going to create a new trigger and say pressed. Then I'm going to create a new trigger and say disabled. So now we have all four of our triggers added in as parameters for our animation controller, which we can change. For example, I could say the normal trigger is one, two, three. But of course if I did that, I would have to make sure I updated the parameter inside of our animator controller. But we have we have the parameters now, but we don't have any transitions. Meaning how do we go from one state to another? Well, that's actually pretty straightforward to do. We simply right click any state say make transition, click on the state we want to go to click on the transition and select a trigger. In this case, I'm going to select the normal trigger. Now I'm going to do the same thing for highlighted make transition. Highlighted. Make transition disabled. Make Transition. So now if I'm going to move my game view off to the side here and I'm going to keep my animator open and I want you guys to see what happens as I interact with this button, when I hover over it. Notice how we're in the highlighted state when I click. We're in the pressed state when I unclick we're in the highlighted state and when I mouse over, we're now in the normal state. Of course, this isn't going to actually do anything yet because our clips are actually empty. So let's go ahead and see what we can do about that. I'm going to jump into the scene view. I'm going to make sure my button is selected. I'm going to open up my highlighted. I'm going to click on the first keyframe and make sure record mode is open and I'm going to set my scale to 1.5. One point. Five in the x axis. Now, when I hit play. Notice how the button gets bigger. Okay for the pressed. Um, I want to do something interesting. When we press the button, I want it to first of all, I want to start it off in the highlighted state. So I'm going to copy or actually I'm just going to go into the press state and make sure that the X is 1.5. So we get a smooth transition from highlighted to pressed. And then I'm going to, I don't know, rotate it a little bit. Then don't wiggle it. Why not? Make this go a little bit faster. And then at the end of this, we could have the opacity of the button going down to blah and making it red. Okay. So that's what we want to have happen when we pressed. I'm not a designer. I'm not an animator. I know that looks ugly, but it's the process that counts. So now if we hit play. And highlight or hover. It expands, which is good. But if we click, you'll notice it's going to sit here and just wiggle constantly. Well, don't want it to constantly wiggle. I want it to just do that. Play that clip once. Doing. That's actually very straightforward. I simply click on the button pressed clip in my project view and I disable loop time. Now when I hit play and I hover, I still get that really nice expando effect. But when I click, it only does that once. Okay, so that's really all there is with the animations. You can animate anything, Anything that's a child, a button. You can go ahead and animate, you can animate the text, you could add an element, you can remove elements, change the opacity, make it fly around the screen, whatever it is that you want, you can do with the animation transition. And that's what makes the animation transition so powerful. Now, remember, there is a very easy way to automatically create a animation transition. I can go ahead and show you guys how to do that now using the slider as an example, because you'll notice the slider also has all of these values that we saw before from the button, including interactable and transition. But an important distinction is if we click on the target graphic of our slider, we'll notice that the target graphic is actually a child component, not the component itself. So with the button, the target graphic would be the button image itself. With the slider, the target graphic is the handle. Anyway, a really easy way to set up an animation controller is simply to set the transition to animation and then say Autogenerate animation. And then I can call this slider animation. Now, if we click on the slider, we see it already created all of these for us. Now, one interesting thing about the slider, though, is it's. You're not going to see all those individual clips. The way that the auto generate slider animation works is it uses some sort of asset API that makes it so the individual clips won't be visible. If I'm not mistaken, they're supposed to expand here. You're supposed to be able to expand slider animations and see the individual clips. But again, it might have to do with a bug here. But the point is, is that all the clips get created just like what we did manually moments ago, but hopefully the experience of seeing it done manually makes more sense why it's set up in this way. But anyway, so now that we have it set to an animation transition, we can come in here, we can say highlighted. Go into record mode. Let's set the handle to Red. Now when we're highlighted. It's red. Of course, when we press it switches, it reverts back. So for example, we can have it be highlighted and red with a little bit faint. Color and then we can go to pressed and make it red as well, but a little bit more opaque. And now we have a nice little red transition. Of course, that's not the only thing we can modify with the animation. We could also come in here and say when we have when we hover over it, we want the background to turn this ugly tealish cyan color. Or whoops, I meant to do that as a. I meant to do that as a highlighted. Or we could really annoy people and make it wiggle. And whatever it is that we want to do, we can do it with the animation. I just really want to drive that point home. Okay. So that's really about it. As far as transitions go. There's nothing stopping you from doing your own transitions. Maybe you want to hook into the event system and send off your own triggers into the animation controller. You're certainly welcome to do that as well. Maybe give you some more flexibility on things, but. That's that's all there is really to say about transitions. Next up, we have navigation. So navigation. I'm not going to spend a whole lot of time talking about it. Basically, it boils down to how do we navigate from one element to another. I can show you an example of that by hitting play. Notice how right now I'm moving my or I'm hitting the up and down arrows on my keyboard. And left and right and I'm hitting space or inner or whatever, and I'm able to select different controls. Well, the order in which the elements appear in the navigation list is controlled by the navigation right here. So we can visualize that by hitting the Visualize button and seeing that when we hit up and down, we get up to the different controls. But things can get a little trickier than that because I can move this panel. Over here. Come back here. And now I'm visualizing the navigation and things got a little bit more complicated, but the automatic layout engine determined it for me, which is really nice of it. Basically, the way to read this diagram is we can see that when we're on this button and we hit down, we go to this control. When we're on this control and we hit up, we go to this control when we hit, right? We go to this control and we hit left, we go to that control and so on and so on. There's a couple other ways we can do navigation. We can do it horizontally. We can do it vertically. We can. Do it automatically and we can do it explicitly and explicitly will require that I fill in each one of these four items with another selectable. But yeah, there's not a whole lot to say about navigation. The automatic system will work 99% of the time. I'm sure if it doesn't, you can override it using explicit navigation. And the good news is you only have to override it for things that you know need to be overridden. You can use automatic navigation for most everything and then use explicit navigation for 1 or 2 controls that you want to modify the behavior of. And at the end of the day, you can always just hit, visualize and make sure you got it right before having to come in and play around with it in the game itself. All righty. So the last thing I wanted to talk about are events. And we already talked about them to an extent. It doesn't I don't really need to go into too much more detail on them. I just wanted to point out a couple other important things. Just to recap what we talked about before, events such as the onClick for a button or the on value changed for a toggle or the on value changed for a slider. What they allow us to do is they allow us to register a function on a particular component that's on a particular object to be invoked with a particular parameter when that event is fired. That's really it. So we can create events out of any component that has a method on it that follows a particular criteria. For example, it needs to be public, it needs to return void and it can have 0 to 1 parameters. The only parameters you can specify are primitive types and game objects and objects. So again, we saw that in the first video. There's not a whole lot more to it. The only thing I really want to add on to discussion about events right now is the fact that we can actually do a couple interesting things. For example, if I wanted to, let's go ahead and create. I'm going to create a C-sharp script and I'm going to name this. On mouse over handler because I want to show you guys how you can actually handle an event through code, through just code without having to mess around with the inspector. I find this to be an appropriate way to handle certain events, especially events that are in kind of an integrated prefab that you might create for a custom control. It's really great. Like I said, it's really straightforward. I'm just showing you guys really simply how we can really quickly just. Get this going. So let's say I wanted to create a monobehaviour and let's say I wanted this Monobehaviour to be attached to a button and let's say I wanted it to print out to the console every time someone hovered over the button. Well, I can just inherit or implement a particular interface. The interface is going to be unity engine dot UI and or sorry dot events. Event system. See, when you have tools that automatically tell you which namespace certain classes are and you totally forget which namespaces they're in. Um, but the reason I wanted to bring up the namespace though is because we could implement any one of these events and we'll be notified of that event. So we can implement Ibegin drag handler. I cancel ID select, I drag, I drop, I move, I pointer click. Like for example, if we wanted to do I pointer enter handler, we would implement this interface which would require that we implement the on pointer enter method right there. And of course that method is going to need to receive a pointer event data parameter. Now I can simply say debug dot log, you are over me. And that's it. So just by implementing this interface and implementing this method, I can now attach this component to a button and this behavior will happen. And I can show you guys an example of that by coming into unity. Selecting the button. Going down to add component and typing in on mouse over handler and hitting enter. You'll see. That when the mouse cursor enters the button, we get that debug message. There's one more way to handle events like these, because you see, there's a you would think that, okay, there's a big limitation right here. I can only add handlers to onClick. And if I want to handle mouse movement, for example, I need to go and create a monobehaviour. It's not actually true. There is an additional component you can attach to all delectables that allow you to handle more events than just the ones they decide to expose. So what I can do is I can come up here to add component and I can type in event trigger. Adding the event trigger component allows me to arbitrarily add more event handlers for any of the default supported events in a selectable. So I can simply hit add new and I can say let's do let's do, I don't know, pointer exit. And then I can hit add and. I don't know. It doesn't. It really doesn't matter what I'm doing here. I can hit Add again. Actually, let me go ahead and make this example a little bit more. Um. Better. I'm gonna add another method. Public void print something to my onmouseover handler that just logs out some parameter. This way it can actually show you guys me tying up into an actual event. So now on this event trigger, I can select the component I want, which is the onmouseover handler, and then I can select, print something and I can pass in a parameter of onmouseover. I can add a new trigger for How about pointer? Click. And then say. Points are click and then I can add a new one like pointer down and say. Pointer down, for example. So I can add as many of these event triggers as I want. From within the inspector and I can target any method that can be targeted through an event in the entire scene if I wanted to, and then pass in those parameters. So now I can hit play. And you'll notice that when I hit over it says Pointer down and pointer click. And now it says on mouse over. So you see, these events are indeed getting fired in the way that they should be. All righty. Well, I think that just about wraps up the concept of selectable. Again, selectable is just a base type that gives us a variety of bits of functionality. And unity was so kind to have provided a handful of selectable components out of the box, such as buttons and sliders and toggles and fields. So I hope that you guys enjoyed learning about these again. We have buttons, sliders, toggles toggle groups and fields. I think that just about wraps up this video and we'll see you guys in the next one.