Input, Selectables, Navigation, and Transitions

3D BUZZ Programming and Digital Art training
A free video tutorial from 3D BUZZ Programming and Digital Art training
4.3 instructor rating • 17 courses • 121,727 students

Lecture description

Displaying images and text is important, sure - but what about interaction? In this video, we talk about the Selectable - the base type for all intractable components. We also show the built-in controls: such as sliders and input fields. We also talk about navigation, transitions, and events.

Learn more from the full course

Modern UI Development in Unity 4.6/5.0

This series goes over the core concepts of Unity's UI system and also shows the creation of an entire game using the UI.

13:30:32 of on-demand video • Updated May 2015

  • Become familiar with Unity's UI system
  • Create an entire game using the UI for all of its visual aspects.
  • Apply all of what is learned in a real world scenario.
  • Learn to think like a UI developer.
English [Auto] 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 want to make a tadeu, for example, you could kapos 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 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, and I'm not going to I don't care about the anchors at this point. OK, so I want 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, scroll bar is an interactive UI element, but we're going to talk about that in a later video. I am going to create a toggle. However, I'm also going to create two more toggles. And the reason why will be 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 wreck transform because it's underneath the canvas canvas render because it's a visual element, an 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, intractable transition. All of these colors, color, multiplier, federation and navigation all come from the base type selectable. Now a selectable is basically a component that can retreat, 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 Urtext. So you'll notice that the image is going to. Be the same size as the wreck transform in its entirety. The text is going to be set by default to fill and stretch this, all 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 read the text, I can right. Click the button, go down to you. I select text and 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 wreck, transform, holding down ult 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. OK, one other interesting thing you'll notice about Button is that we have this unclick 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 in 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. Feedback right here. On the transform of the film, one we can see, it's quite obviously moving and that's most likely due to a small bug in the way that the U.S. 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 slight 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 are all these attributes were inherited from the selectable base type. Then you'll notice we give it a Phil Recht and a handle recht, so the Phil Recht is the fill in the handle, Recht 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 spa. So it's really cool how we can kind of dissect these these intractable elements and make them behave in the way that we want them anyway. So, again, just to repeat, the slider component simply needs a reference to the Filaret and the handle. Recht 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 men value max value is pretty straightforward, a slider allows you to select a value between them in value and the max value. So, for example, if we wanted to select between a hundred and a thousand, 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 minimum 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 poll numbers, pretty self-explanatory poll numbers just make it so we can't have fractional units. So, for example, if we had a mean value of five and a max value of 15, you'll notice that the only acceptable values are whole numbers between five and 15. And they kind of see it snapping a little bit. Then finally, we have a value which values the current, well, value of the Sleater. And that's really it for the slider. That's what makes a slider all that makes the sliders as a film director and handle act 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. OK, 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 toggle button, as you can see. Has the selectable as intractable transition as all of our stuff has our navigation, that 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 checkmark, whether or not he slowly transitions or not, that checkmark is determined by this graphic right here. So really, all the 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 I don't even need this background or this checkmark or the 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 as it happens to be, a particular hierarchy of objects that was 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 a label which is a text, and of course, we can change this to whatever you 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 render. And an image. Directly on the control as well, if he 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 Reck 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. OK, moving on to toggles, we now have groups, so you might be familiar if you're familiar with working with guys like maybe, for example, HTML or Windows Forms or Zemel, you might be familiar with the differentiation between a checkbox and a radio. But 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 or 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 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 a 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 at Torgau Group and. 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 Torgau 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. There 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 a panel and I'm going to add a component and I'm going to say Torgau Group. Now you notice that Tuggle Group does not have any public properties on it. So there's nothing that we can play around with in the target 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 Torgau, 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 noticed that the Torgau Group parent or the Torgau Group decided, first of all, that only one Torgau can be selected at that time anyway. And at 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 Torgau 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 I'm simply going to duplicate the Stogel. Now, by duplicating the toggle, it's now you can 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 Torkel 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 target 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 checkmark and change its source image. In this case, I'm going to change the source image to a gooey 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 a checkmark. Now, you notice that the checkmark 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 checkmark was set to none. So let's go ahead and change this to agree spray. Now, let's do this on the last Torgau, I'm going to go check mark, change this to agree 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 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 transforms in images and text. I mean, I can come up here as long as this toggle still has this checkmark game object, I can do whatever I want to it. I can move this checkmark 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 the checkmark 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 recasting, 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. The 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. You eyes yourself. OK, so that's about toggle buttons for now, we'll be coming back to them shortly. Let's talk about Input Field's input fields. Very straightforward. We have a starting value. So I can say test. And we see it starts with test, so super exciting. Well, that's not work, it's going to be that. So that's a starting value. We have an input type, we have auto, correct 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 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 multiline, which we can enable or disable. And that's actually it as far as the input field, everything else is inherited from selectable intractable transition and navigation all come from the selectable based type. So, again, the only thing that makes a text component, a text component or a field component is that we have. The tax component, the starting value, the input type, the character limit, text color and multiline. Now, the tax 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 textfield. OK, so. Those are going to be our major interactive components, and they'll 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 tax, 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 unclick handler and what it inherited from selectable. And once you understand how to work with collectibles, it'll just be the same on every single one of them. Now, the first thing you'll notice about collectibles is they had this intractable checkbox, the intractable checkbox determines if the button is or if this selectable is enabled or not. Remember, this is also controlled by canvass groups, meaning if I were to come up here to my panel, add component and type and canvas group, I can uncheck intractable and Dettol, overwrite it for every one of my controls. So we have intractable, again, turning intractable 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 had 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 noticed that all of those items disappear and I can no longer modify 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 on click 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 there'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 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. OK, so the color tint effectively just tints the color of a particular image when we something happens and we can see that by, um, 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 ED. Let's talk about. Well, we should have seen, however, is the tent 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 can be really ugly, but. Press color to retina melting purple. And let's throw in some grain for disabled. Now let's play. And notice how the color 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 a color multiplier color, multiplier effects, 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 have the Federation Federation should be pretty straightforward. We said it's a five, it's going to take five seconds to fade into a particular color. If we select the Federation 2.5, it's going to take half a second to fade into a particular color. If we said to default, to point one, you'll notice it's very instant. So that's our Cullerton transition. Next up, we have our Sprite Suwat Sprite swap transition. Now, a spy 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 spot. But we can come in here and we can change what 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 plates change. All right, so that's all well and good, honestly, at this point, you're mostly going to be working with none are colored. And I find Sprite swap to be a little jarring 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 just like 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 and animator sorry, and then I'm going to click and drag a 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 all the 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 in 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, I mean, anything. I can change the color, I can change the scale. I could 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 a great 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 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 a. and I think the blue the last one is going to be pressed. OK, 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 we create a new trigger and say, prest. Then I'm going to get a new trigger and say disabled, so now we have all four of our triggers added in as parameters for 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, it'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 press 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 want to jump into the scene for you. 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 one point. One point. Five in the X-axis now when I hit play. Notice how the button gets bigger. OK, for the prest, I want to do something interesting. When we pressed the button, I wanted 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 one point five. So we had a smooth transition from highlighted, suppressed, and then I'm going to, I don't know, rotate it a little bit. And then, I don't know, wiggle it, why not? Make this go a little bit faster and then at the end of this, we could have the capacity of the button going down to floor and making it red. OK, 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 however it expands, which is good, but if we click, you'll notice it's going to sit here and just wiggle constantly. Well, I don't want to constantly wiggle. I want it to just do that play that clip once. Doing that is 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 expandable effect, but when I click, it only does that once. OK, so that's really all there is with the animation, so 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 capacity, 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 that 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 intractable and transition. But an important distinction is if we click on the target, graphic of our slider will 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 a 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 auto generate animation. And then I can call this slider animation. Now, if you 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 Slotter animation works is it uses some sort of acid API that makes it for 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 read. 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 read with a little bit faint. Color, and then we can go to prest and make it red as well, but a little bit more pink. 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 tillisch kion color. Or what I'm 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. OK, 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 invent 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 and has spent a whole lot of time talking about it basically boils down to how do we navigate from one UI element to another? I can show you an example of that by hitting play. Notice how right now I'm moving my ah, I'm hitting the up and down arrows on my Kiba keyboard. And left and right, and I'm having space or enter 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 getting 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 get to this control. When we hit right, we go to this control and we hit left 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 percent 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 one or two controls that you want to modify the behavior of. And at the end of the day, you can always just visualize and make sure you got it right before having to come in and play around with it and the game itself. Already, 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 unclick for a button or the non-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 zero to one parameters. The only parameters you can specify are primitive types and game or and objects. So, again, we saw that in the first video that there's not a whole lot more to it. The only thing I really want to add on to the 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 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 strange, like I say, it's really straightforward, I'm just showing a guy is really simply how we can really quickly just. Get this going, so let's say I wanted to create a Monáe behavior and let's say I wanted this modern behavior 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 Vasari events. Event system. So when you have tools automatically tell you which namespace certain classes are in, you totally forget which namespace is there. 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. I begin Dragonslayer. I cancel, I'd select, I drag, I drop, I move. I point or 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 interm 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, don't 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 you'd think, OK, there's a big limitation right here. I can only add handlers to unclick. And if I want to handle mouse movement, for example, I need to go and create a model of behavior that's not actually true. There is an additional component you can attach to also collectibles 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 add new and I can say, let's do. Let's do. I don't know, point exit. And then I can add and. I don't know, it doesn't it really doesn't matter what I'm doing here, I can add again, actually, let me go ahead, make this example a little bit more. Better I'm not another method public void print something to my on mouseover handler that just logs out some parameter. This way I 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 on mouseover handler, and then I can select print something and I can pass in a parameter of on mouseover. I can add a new trigger for how about a pointer click. And then say. Point or click, and then I could add a new one like pointer down and say pointer down, for example, so I can do 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 those parameters. So now we can hit play and you'll notice that when I hit over it says pointer down and pointer click and 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 functional 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.