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.
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 there 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 extensive. 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 make a tab 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 higher key 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 am just going to make this look a little bit nicer by centering. 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 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 that I'm going to go into UI and I'm going to create a slider rather than going to go on panel. I'm going to create a I'm not going to create a scroll bar scroll bar is an interactive UI element that we're going to talk about that in a later video. I mean a creative toggle. However I'm also going to create two more toggles. And the reason why we'll be a parent later. And then in the panel I'm also going to create a input field so if I 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 slider 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 transform because it's underneath the canvas canvas render because it's the visual element in the image. I wonder where we saw that before. And then a button. Now interestingly this button is actually largely by not specific to buttons. In fact intractable transition all of these colors color multiplier fédération 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 selectable. So the brain itself isn't really that interesting because ultimately it's the simplest form of 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 transform in its entirety. The text is going to be set by default to fill and stretch this or 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 it is there for decoration purposes only. So to read the text I can right click the button go down to you I 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 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 the button. So remember just like what I said 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 on click list but we're going to talk about that when we talk about events. Next let's move onto 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 to 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 well I'm going to drag the game window off screen and I'm going to play around with that so you can see that what's going on here is that the fill area is actually getting smaller and 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 fill one 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 are all these attributes were inherited from the selectable based type. Then you'll notice we give it a fill rect and a handle rect. So the fill recked is the fill in the handle rectors 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 helper. 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 anyway. So again just to repeat the slider component simply needs a reference to the Philbert Act and the handle recked and that's it. You can really think about these controls as just prefabs that are preconfigured 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 a 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 valued max value is pretty straight forward. A slider allows you to select a value between them in value on a 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 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 value of five and a max value 15 you'll notice that the only acceptable values are whole numbers between 5 and 15. And you kind of see it snapping a little bit then finally we have a value which values the current well value of the slider and that's really the slider those. That's what makes us lighter. All that makes the sliders as a filler act and handler act and a couple of constraints on its value and that's it. Next up we have the event on you 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 interactive transition has all of our stuff has our navigation that it has the toggle specific things. For example is on which is toggled by clicking then Tuggle transitions none are Faid 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 checkmark 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 we want to set up a source image of like. I think background looks kind of nice. So again we can configure. Once we understand how recked 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 the toggles we now have groups so you might be familiar if you're familiar with working with goolies. Like maybe for example TNL or Windows Forms or XML 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. There are 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 then actually going to go ahead and create a panel. So I'm going to reichlich this panel go to you I know I'm going to create another panel. And this panel I'm going to do the same thing I'm going 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 toggles that 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 and so zooming in here. Like I said the way that we make turn these checkboxes into radio buttons is really just a matter of creating a toggle group component summer and matching it to these tutorials. Now what 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 that could be an empty game object if you want. Or it could be a panel or whatever you want. So I want to come up here to a panel and I'm going to add a component and I'm going to say toggle group. Now you noticed that Tuggle group does not have any public properties on it. So there's nothing that we can play around with in the 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 the toggle scroll down find its group parameter click and drag panel on to 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 that time anyway and it de-selected the second one. Now we see that as we click on the other toggle only one is selected at that time this toggles uneffected. So let's say we wanted to add another toggle to this group. Well I can go ahead and move this and put down a little bit. Increase the size of the parent panel maybe move these guys up a little bit. I'm simply going to duplicate the Stargell now by duplicating the toggle. It's now 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 higher key of these objects are relevant 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 checkmark and change its source image. In this case I'm going to change the source image to gooey sprite then I'm going to do the same on the other toggles as well but open up the other toggle click on each checkmark. 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 the checkbox the alpha of the checkmark was set to none so let's go ahead and change this to a gooey sprite. Now let's do this on the last toggle. I'm going to go check mark change this to. 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 really 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 do this checkmark game object above here I can delete the background and the label if I wanted to and then I can hit play and notice how it still works. I could even take the check mark and I can move it not even be a parent in the system at all. I don't think this will work as I think it will have some issues recasting which we do. So what I can do with this toggle is I can simply throw in an image to a 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 you wiser self. OK so that's 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 so I can say test and we see it starts with test. So super exciting. That's good work. 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. Oh yeah. Character limit. Pretty straightforward. We can restrict how many characters they can have. We have active text colors 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 that input field everything else is inherited from selectable intractable 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 multiline. 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 user name 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. OK 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 can 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 talk to a whole lot about the individual properties of these different techs these different controls but in reality they're much more similar than you might expect because remember that base class that's selectable base class. Let's start off with a button. And the reason I want to start off the button is the button literally has nothing else interesting about it except for it's on click 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 inner actable checkbox the entire simple checkbox determines if that 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 here add component and type in canvass group I can uncheck intractable and will override 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 while guiding people through user interfaces but it's also really important like Ed 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 Goose-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 the tent 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 none that's going to be the simplest transition. Then we have color tint now color tent 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 that 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 tends to color have a particular image when we something happens and we just see that by going to move my game view up 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 lots to about what 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 the highlight color to blue. This can be a really ugly button. Press color to retina melting purple and let's throw in some green for disabled. Now let's play and notice how the color tint changes you can even set all the values for example if in the normal color we want it to be not very 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 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 fédération fédération should be pretty straightforward. 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 set to its default of point one you'll notice it's very instant. So that's our Cullerton transition. Next up we have our sprite swap sprite swap transition now or siteswap transition is exactly what it sounds like. It's basically going to change the Spryte 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 but what we can come in here and we can just change what sprites appear when certain things happen. So in this case I just looked at a bunch of random built sprites. Now when I hit play. Notice how those sprites change hurt so that's all you know well and good. Honestly at this point you're mostly going to be working with non color tends I find Spryte swap to be a little jarring for some user interfaces. It might be appropriate but it's kind of old school their 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's sorry. And then I'm going to click and drag button animations on the controller. Notice how the second we added the button animation controller to our animator component that button disappeared to automatically generator animation controller. And that's because the all the generate all the animation control 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 to highlight a trigger will happen will highlighted thing happens. Pressed pressed and disabled disabled and all 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 want to do is notice that my animator. There's really nothing going on here. Well the first thing I do is I'm going to create a clip on my button for a normal state. So I'm going to create great clip create new clip. I want 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 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. The last can be pressed OK. So that's all well and good. If we go ahead and fire up the game and move over to our animator we notice that button normally is sitting there and playing and so that's well plain because it's their 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 going to create new parameter 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 highlight it that I'm going create a new trigger and say preste then I get a brand 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 trip triggers one to 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 highlight it make transition highlight it 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 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 mouseover 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 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 key frame 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 there was the button gets bigger ok for the pressed. 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 states 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 had a smooth transition from the highlighted to pressed 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 a little bit faster. And then at the end of this we could have the capacity of the button going down to claw and making it read 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 we hit play and highlight Eric hover it expanse which is good but if we click you'll notice it's going to sit here and just wiggle constantly. I 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 just say loop times now when I hit play and I hover I still get that really nice expand 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 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 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 ball 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 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 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 assett 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. 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 hit play now when we're highlighted Of course when we press it switches it reverts back. So for example we can have it be highlighted and read it with a little bit faint color and then we can go to preste 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 can also come in here and say when we have when we hover over it we want the background to turn this ugly teal ish kind color. Whoops I meant to do that as a right to do that as a highlighted or we could really annoy people and make it legal whatever it is that we want to do we can do it with the animation. I just really want to drive that point home. 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 sugars 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 Mark has been a whole lot of time talking about it. Basically it 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 Or I'm hitting the up and down arrows on my keyboard 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 visualized 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 lay out the 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 the button and we sit down we go to this control when we're on this control and we get up we get this control. When we hit right we can get this control and mega-hit left at 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 player. 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 overwrite 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've got it right before having to come in and play around with it and the game itself. All right. 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 On Click for a button or the 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 the 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 cannot zero its one parameters the only parameters you can specify are primitive types and game objects are 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 a 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 a critic 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 or 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 pre-fab that you might create for a custom control. It's really sort of like 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 you wanted to create a mano behavior and let's say I wanted this behavior to be attached to a button and let's say I want 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 Daut UI and Bersani events event system when you have tools automatically tell you which namespace certain classes are and you totally forget that name spaces they're in. But the reason I want 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 drag Hendler I cancel ID select I drag I drop I move I POINAR click like for example if we wanted to do I plane turn into a handler we would implement this interface which would require that we implement the on point or interim method right there. And of course that method is going to need to receive a pointer or 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. Now 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 Hendler hitting enter. Now when I hit play 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 that you'd think OK there's a big limitation right here I can only add handlers to on click and if I want to handle mouse movement for example I need to go and create them a behavior 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 an event trigger the event trigger component allows me to arbitrarily add more event handlers for any of the defaults 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 pointier 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 little bit more better. I mean not another method public avoid print something to my on mouseover handler that just logs out some parameter. This way you 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 on mouse over. I can add a new trigger for how about a pointer or 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 get 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 get over it says POINAR down in POINAR click and it says on mouseover. 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 is again selectable is just the base type that gives us a variety of function 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.