UI Crash Course

3D BUZZ Programming and Digital Art training
A free video tutorial from 3D BUZZ Programming and Digital Art training
4.2 instructor rating • 17 courses • 111,025 students

Lecture description

This video is all about getting your feet wet with the UI system! We don't go into depth into the different components, however. Instead, we get a birds eye view of this system and what you can do with it!

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] Alrighty this video is going to be a quick crash course into the new unity system. So what we're going to be doing is we're going to be downloading installing unity 4:6 beta and then we're going to be jumping into it and putting together a really simple demonstration project. Now you guys could follow along if you want to but it should be sufficient just to watch what I'm going to be putting together. The purpose of this video is to give you guys kind of you know a overview of how it is. Unity expects you to be building goolies now because it's quite a fundamentally different way than we're used to with the immediate mode on Gooley system. So I really wanted to show you guys just some really basic stuff how do we create things like Sliders and buttons and how do we wire up events just to get you guys kind of in the mood for working with this system since it is such a huge huge shift. And in subsequent videos we're going to be taking a look at each one of the individual components. You know I a line light on by a line item checking out what we can do with them and all that great stuff. But again I think it's really important to get a good feel for what we're going to be doing first before we dive into the specifics. So we will be talking a little bit about panels and canvases and recked transforms but the really in-depth discussion is going to happen in later videos. So let's go out and get started. First thing you want to do is grab the Unity 4 6. Easiest way to do that is to jump over to Unity 3D dotcom. Click on this little guy right there hit get unity for six beta. And in this video series I'm going to be using the beta A. If you're using the beta 17 I believe pretty much everything should still work. But beta 18 is the one I'm going to use. So go ahead and download it for your operating system. And while it's downloading let me go ahead and explain how you can go ahead and get two different installations of unity on the same computer at the same time. Because I think a lot of you guys already have a unity installation that you really don't want to compromise while playing around with the beta because it's especially if you have an application that's in production you're going to want to be able to you know maintain that application while you are learning how to use the new GUI system. So it's really basic process. All you have to do is tell it to install unity to a different folder. It's not going to remove your old unity installation unless it detects one inside of the folder that you were installing it to. I do want to really quickly point out however that you really need to install it as a sibling folder of the other unity installation. At the very least. So what do I mean by that. Well if I go ahead and open up my program files ex-city 6 folder right over here you'll notice that I had my Unity. Unity for 5 and so I installed them as siblings of each other. What I mean by that is you know they're there next to each other in the same parent because if you were to install a different unity installation for example within the unity folder itself thinking that it won't conflict with the editor folder you might run into issues. And these are these issues are outlined in that unity manual. So be sure to not do that. If you're going to install two unity installations side by side make sure that you do them in separate folders entirely. So for example as separate folders in your program files separate folders that are across different hard drives and so on and so on. It doesn't really matter where you put the other installation as long as it's not anywhere inside of the previous installation. Anyway once you do that you will have two versions of unity going side by side and that should be what you want for playing with the new. So after installation what I did was I just jumped into my Unity folder jumped into my editor folder and just grabbed the unity exile and plopped it into my taskbar which is what you see right here. So when I click on this unity editor I am opening up the unity beta for 6 beta 18 or so you might want to pause a video if you're still installing. But if you're done let's go ahead and jump right in and put together something really basic. Again just really basic crash course stuff not going in depth yet but it should give you guys a good feel of what's to come. So I'm going to go ahead and open up unity. I'm going to go ahead to create new project and I'm just going to say new unity project 3. Why not create name is not really going to matter. OK so we're in unity. Everything should look pretty familiar at this point. So your first question might be well how do I start making a goofy to start making a movie you're going to have to create what's called a canvas. Now canvas is kind of the parent of all gooey elements all gooey elements must be printed too or must be a descendant of a canvas so the canvas is what controls where the unity rally is going to be rendered in your scene. So to do that I'm going to go up here to my higher key and get a right click anywhere inside of this blank space in my Harkey. Open up this new little UI. Drop down and I'm going to click on canvas so a couple of cool things happened. First of all we got an event system in addition to our canvas. We'll talk about that later when we got this canvas guy. And if I double click on this canvas guy you'll notice he's really really really big. The reason for this is canvases are actually described in pixels where one unit corresponds to one pixel. Which means that it's kind of is going to be very big. Because if you look right here on the right hand side you'll notice it's 957 by 600. Now that measurement isn't pixels but when we view the canvas inside of our system inside of our scene we will see that rendered as units. So one pixel equals one unit. Therefore we get really really massive canvas as a quick example. I could go ahead and create a a 3D cube and place it somewhere like 000. And you can't even see that cube. You know I would have to scale it up really really really really really big. Just to make it even visible when I'm viewing the canvas like this. So I really wanted to point this out. Basically that's why the canvas is so big. It's not a bug or an issue or anything like that it doesn't really conflict with how we're going to go about building our gear. Position of the canvas in this case does not matter. Canvases can be created in different as different types and those different types of canvases dictate where those canvases are going to be positioned and the screen well that this type of canvas. It doesn't matter where it's positioned so positioning is irrelevant. It's going to be painted directly on to our main camera regardless of where it's physically located. So that's another important aspect of this. Remember you can't have multiple canvases. We'll talk about that later. But again the canvas is really just the brute elements of A. So I'm going to go ahead and delete that cube and let's start working with our canvas. What I'm going to do is I'm actually going to hop into 2-D mode. And 2-D mode is really handy when working with the unity system because it allows us to view our objects as an orthographic projection inside of our scene view which is really handy when working with a predominantly Tuti based system. All right. So now that we've done that let's go ahead and do something more fun I guess and that's create a panel. So let's Right-Click canvas go to UI panel. Now we have a panel so I didn't really talk about what the inspector looks like with the canvas because we're going to talk about these other fun things later. But now that we're in the panel we'll start to notice a little bit of a a common thread among everything that's parenting to a canvas at some point. And that is our transform is replaced with this wrecked transform transform is basically the new goolies equivalent of a normal transform and allows us to do everything from scaling to rotation. But it also allows us to describe where this element should be positioned relative to his parents and it allows us to do some really really cool things. So you'll notice right here that the panel is actually filling the entire canvas. And if I went into the game view you'll notice that as well. You'll notice though. While I change the dimensions of my game view two things seem to happen. First the size of the canvas changes in this canvas mode the size of the canvas is always going to be determined by the size of the resolution of the main camera. As you can see right here as I change the resolution of the camera so does the canvas size change. You'll also notice that the panel's size changes as well. And that's because the panel is currently set to fill its parent its parent being the canvas. So I don't we change that behavior. How do we make it so let's say I want the panel to be 200 pixels wide and I want it to only be docked on the right hand side of the screen. And I don't want it to resize. Well it's really easy to do. We can come over here up to our recked transform we can kill that click this handy little square doohickey right there and we can see all sorts of these preset recked transforms we can create. Now we can even create custom transforms and do some really neat things with that. But that's going to be something we'll discuss later. For now what I want to accomplish is I want again this panel to be 200 pixels wide and I wanted to be docked on the right hand side of the screen. So what I'm going to do is I'm going to click this that preset right there will make the panel be on the right hand side of the screen basically. So you might be wondering Well it doesn't look any different but if I come over here to my game view and I stretch it to the left look at that now no longer is taking into consideration the with that the screen. So it looks like I'm about halfway there. You'll notice that it also doesn't stretch horizontally which we'll address here as well. So let's address the stretching horizontally bit. First I'm going to come here and I'm also going to click on stretch vertically sorry. So we want left and we want straight trick here. So this button right here you see that roll will stretch vertically and we want to be talked to the right hand side. Now if we come over here and start expanding it you'll notice that it does stretch. But there's still less padding in between the top and the bottom that we'd like to get rid of. The easiest way to do that is actually to use a handy little trick with this anchor pre-sets and I'll reiterate this hand a little trick later in case you guys are getting a little confused that all these new options. But if you hold down Allt and shift and then click on this you'll notice that it'll expand to fit the entirety of the vertical space which now our panel will behave almost exactly how we want it to. You'll notice that it's up to the right hand side. It doesn't change it's weird and it always fills the height. Just really cool. But we definitely want that with. So how do we do that. Well if you look at the transform if you've been paying really really close attention you may have noticed that the actual parameters of the transform change depending on our docking mode which is also really cool because they make sense based on the context of what we're doing. So you'll notice that I now had this option for what. So for example I can type in 200 and I now have it constrained to 200 pixels wide. Coming back here to the game view you'll now notice that the panel behaves exactly like I expect it to. That's a really really quick introduction to some of the things we can do with the transform. There's a whole lot more we can do with it. We'll talk about that more in depth later. I do want to go ahead and introduce a couple of bits of padding because you'll notice that by default or panels use this really nice little rounded rectangle doohickey. Well I don't like how that looks on the edge of the screen. I think it would look a lot better if we introduced some padding. We can do this visually of course by clicking on our panel and selecting the rect transformed tool right here which is a new addition in unity 4:6. This can also be activated by hitting the white key on your keyboard. And once we do that we can adjust our padding. However we want or if we want to be a little bit more precise we can also come over here the transform. I can set its position 10 to negative Irv's position x negative 10 it's top to 10 and it's bottom to 10. This gives us about 10 units of padding. But despite that padding you'll notice that our previous behaviors of vertical stretching combined with horizontal stickiness to the right is preserved anyway. So that's really cool. We'll talk again more about Reyk transforms later. Next thing I want to go ahead and do is let's place a slider because why not. That's right click panel because I want it to be a child a panel click UI and I'm going to Slider now the behavior of the slider is I want the slider to stick to the top of this panel. Very easy to do that is to open up our recked transform presets hold down alt and shift and click that button right there. Now it is at the top of the panel. Furthermore you'll notice that it sticks to the top of the panel. Just like with our panel we can introduce some padding to it by specifying a left to 10 a right of 10. And how about a position of negative by doing that we have now successfully created some padding and our behaviors are still as expected. All right let's go ahead and talk about some interaction. Well now let's do it button for next button and then we'll talk about interaction because I want to I want to show you guys how you can create a button and create a click handler for that. But because that's another thing I think is really important to understand. I hope you guys are so far kind of getting a feel for how the transforms work. So next up I really want to show you guys how you could handle an event because handling an event is really pretty much all you guys do. Besides presenting information so on this panel right here I'm going to add another child to it by right clicking UI button and this button I want it to be at the bottom of the panel and I want it to be sticky to the bottom of the panel. Now again naively I could do this but if I did that you'll notice it doesn't quite stick. It kind of like kind of moves as I resize vertically which isn't behavior I'm looking for. So I'm going to do just like we did with the slider open up this little red transform helper hole don't Alton's shift and click down here to the bottom. Then I'm going to give it the padding of 10 by giving it a left of 10 a position y of 10. A right of 10. And now we have that 10 units of patta giving us very fine control over how we want this displayed. So let's say that when we click the button we want this slider. The value of this slider to be printed to our consul. So it seems like it seems like a really straightforward thing to do. And I think it's a good example because it shows how we can handle a click event be it shows how we can extract the value the slider. And then while really that's about all but still good stuff. So let's go ahead and get that worked out. So in the immediate mode we handling a click event is pretty straightforward. You just hit Taipan if you hit a button then do something. In this system. It's a little bit more complex but more simple at the same time which is a really interesting way that they went about this. It's actually the way we can handle events in the new Googie system is ridiculously ridiculously flexible and it's very straightforward once you have seen example of it being done basically basically when we have our button right here and we have the button selected the higher key remember the button selected not the text. It's very easy to accidentally select the text by double clicking on the button. But make sure that you hit the button selected. You'll notice that it has this button script attached to it. The button script has this on click which says list is empty. Basically I can filled this list with things I want to have happen when the button is clicked. So what determines a thing that I want to have happen. Well basically any function that meets a particular criteria on any game object in the entire scene can be invoked by simply filling out this on click list. So let's go ahead and do that. What I'm going to do is I'm going to create a Mahna behavior OK C-Sharp script and I'm going to call this button to test and then I'm going to sync Monod velt project to your and then hope visual studio is going to open up properly and it does OK. So our button test is basically going to be a game object that will be responsible for responding to a click event from the button that we placed in our seat. But again I did say earlier that I wanted to take the value of the slider and printed out to the cons.. So our button test is going to need a reference to our Slider. It's very simple to do. Wilson will just type in public slider and you'll notice that autocomplete actually doesn't show you anything. The reason it doesn't is because most of the objects are the classes that we're going to be dealing with when working in the new gooey system are going to be located in the unity engine door UI namespace. So unity is finally embracing the concept that you can have multiple names spaces which is cool but it will also require everybody wanting to work with the UI in code to add a using statement up at the top of the file of using unity engine UI. So make sure you have that. OK so now that we have our public slider fields I'm going to name it and I'll just name it slider because I'm not a very creative person. So now what do we have to do. Well again I want this button to be notified when the button in our view is clicked. So basically what we have to do is we have to create a method that follows a particular criteria the method must be public. The method must return void. It could be named anything. And it must take an 0 to 1 parameters. So let's just leave it as your parameters. Now what I'm going to do is to say debug log slider value not too strict. So do something we'll simply debug log cyder value to string because this method is public and it's a void and it takes zero parameters. I can use this as a target for my button click so jumping back into unity. Let's go and do just that. The first thing I need to do is actually instantiate my button test components somewhere in the scene. So what I can do is I can come over here to my hierarchy I can right click and I can say create empty and then I'm going to call this button responder now the button responder game object. I'm going to add a button test component too. So I want to take button test. I'm going to click and drag it over into the inspector. Now remember our buddy responder does need a reference to a slider component which is this guy right up here. So to do that I'm going to go back to the button responder game object. I'm going to take the slider over here in our higher key and I'm going to click and drag it into the slider property of our button test script. And then once I drop it there it's associated. So that's really all the setup we need because now we have a target for the button to invoke. So the click on the button and then scroll down to the on click list to hit plus. And you'll notice that this little this line item appeared and it's going to have these four things on it for a piece that data whether or not it's enabled. What's the target game object. What's the target function and what parameter to pass to it if any. So the first question is what's the target game object. Well if you click on this little circle guy here we can select or button respond on fact we can select anything we wanted. But in this case for selecting or button responder now we have to select a function so we click on this little dropdown and we're going to see it organized by component. So each component is going to get its own little dropdown menu. We're going to want to select the button test component and now we can select any one of these values. The one we're going to want to select is to do something with it. Our button now clicked will invoke the do something method on the button respond or object. Let's test that out. I'm going to go ahead and hit play I mean hit the button and we get one printed out. Let's move the slider down a little bit and we get a fractional value. And we get zero and we get another. About half way ish and so on and so on. All right I do want to point out one quick thing that we could also do in addition to what we did with the on click. I don't want to get too in-depth with event handling because we have a whole video about that coming up but for now I want to show you something else that's really cool. I'm going to delete that. Handler going to go back into code and up here on my my button test I'm going to create another method to say public void do something with a slider and then I'm going to just print out the slider value to string. Note that I'm doing the lowercase slider which is provided to me as a parameter and not the upper case slider field. So I just want to demonstrate one other really cool thing about hooking up events in the new system. You'll notice in our previous example we had the slider reference actually added from within the inspector. But what if we wanted to provide the slider as a parameter where we can actually do that with the new pulley system the goofy system can. Like I said except events or methods as events. If they have a zero to 1 parameters. And if those if that parameter is a game object or rather an object a string in a ball floats and a couple other I'm probably forgetting basically primitive types. So now that we've created this method let's jump back into unity and come over here to a button and add that drag over button responder. Click on the no function open up button test. Go down to do something with the slider and now you'll notice that we can now fill in the parameter. What's the première that we're going to fill it in with. Well it's the slider object that we already created in the panel. So coming over here to our hierarchy and clicking and dragging the slider over into this little parameter argument doohickey right here dropping it there will actually provide that as a parameter to the function when it's invoked. So now what I can do is I can hit play and I'll get the exact same behavior although we didn't statically provide the slider to that button responder we provided it as a parameter All right there's two things I want to show you guys before we'll head off into some more in-depth discussions and that is a really powerful new cool ability with images and how to hook up slider values to other values. So let's look at images first. I'm going to go in here and to my panel I'm going to reichlich create new UI. I'm going to create a image now this image I'm going to leave in the center of the screen. I'm not going to worry about positioning it then. We're going to go over here to the image component on the image game object and on the source image. I'm going to click this little circle doohickey and I'll select one of our built in source images like a checkmark. OK. So that's really cool so far we can add images to it. Actually that's not particularly exciting but still it can be really cool because the images now support the concept of this image type. We'll talk about the other image types later but for now let's just talk about the sliced one because I find this particularly interesting if we click on sliced or wups not sliced filled derp. All right if we click on filled we can actually use this Philmont property that appears to determine how much of the image is filled. I don't know when I was learning the whole new GUI system. This is one of my favorite things because it makes things really easy to put together. For example we could use this to put together a speedometer or if we change the fill method to horizontal we can use this as a health bar so that was just something that particularly made me happy when I saw it. Lots of fun stuff. So we have to fill a mountain that's really cool. But another interesting thing we can show here before signing off is the ability for the slider to actually send events. So if I click on the slider you'll notice if I scroll down that he has an on value changed. And you'll notice this little parentheses single Princie. That means that this on value changed needs to accept a method that takes in a float and won't accept anything else. Well it will if it's a premier or less. So let's go ahead and click the Add button. And what I'm going to do is I'm going to take this image right here. This is the image that I have selected right here in the hierarchy and I'm going to click and drag it over into the target object. The value changed then for the function I'm going to select image. Then on dynamic float I'm going to select fill out. So now I'm going to hit run. And you'll notice as I change the slider the fill amount also changes. In fact I can see that represented in the inspector as well. If I click on the image over here in my hierarchy and look at the Inspector and watch the fill amount as I change my slider you'll notice a change in all right well. Anyway this was really just a quick rundown of the goofy system I really wanted to show you guys how to start using it by creating a canvas and I wanted to show you guys how to dock panels and how to create some basic interaction. So you know this sort of thing should get you guys up and running relatively quickly but there's a whole lot more that we need to discuss and we're going to do that and a little bit more in depth here shortly. All right guys we'll see in the next video.