 All right, welcome back. So in this video, we are going to stub in the UI structure. OK, so what we want to do is we want to get our screens set up. We want to set up the UI group structure. I like to call it a UI group or UI system, but we're going to set up a series of game objects inside of Unity. We're going to parent them, and we're going to start to add in the sprites and the UI images so that we have a couple of screens to work with. This basically will make it so that we can test out our UI system that we are about to build. So we need some UI to work with. And I wanted to spend a little bit of time and actually make this kind of pretty so that way it's fun to watch. So let's actually jump over into Unity and start to build our UI structure up. So let's do that. All right, so here we are inside of Unity. I made a new project. And what I want to do first is just create a new game object over here called UI Group. And now this is going to be the parent of all the screens. So our UI system is actually going to live on this particular game object itself. And the reason why I do this, it just makes everything a lot easier to manage. So we're going to have the canvas and a whole bunch of screens in here. So next thing I want to do is create a canvas. So I'm going to create a 2D canvas and leave it on the screen space overlay over there. And what I want to do is actually reset the size of this. So I want to do a phone app because we're going to be making a little tiny to-do app later on. So this is just a portion of a larger course that I'm working on currently. And the actual to-do app will show you how to build a full app and get you really familiar with the Unity UI system. We're going to cover a bunch of stuff. We're also going to learn how to hook up a Firebase back end so that it actually stores all of your data. But I'll save that for later. So that's why I'm switching it over to a phone resolution. I'm also going to drag this view up here. Since we're working in a mobile type format, I want to be able to see the whole screen a little bit bigger than having it down here. Having it down here just made it really crunched. All right, so the next thing I want to do is set scale of screen size. So that way it scales properly. We can make it responsive. So I'm going to set in the resolution that we're using, which is 1080 by 1920. And we're going to match the width for now. All right, so perfect. Now we are all set up. Now we have our canvas set up. And I'm just going to drag this event system into the UI group. And the reason why I do that, I like to keep everything very organized. So this UI group represents the whole UI for this particular scene. And so I like to keep everything grouped in there. And this event system works with the UI so then is required by the UI. So I like to put it underneath that group. It doesn't affect its performance or its functionality or anything like that. So perfect. So the next thing I want to do is actually start to add the first UI screen in here. And what I decided to do is I found a cool to-do UI kit that's free from InVision. Now if you're not familiar with InVision, it's a great tool for doing UX prototypes, user experience prototypes and UI prototypes. It gives you really quick tools to quickly create these click-throughs as they're called, which gets the idea across of what the app should be, but it's not fully functional. It's meant to show a developer how to create or what they should be creating for the app and how everything is hooked together. So anyways, they have this free to-do app kit that you can download in Photoshop format. So if you just go to InVisionApp.com forward slash do, you can get this kit yourself. It's free. OK. So I'm going to show you here inside of Photoshop. OK, so these are the two screens that we're going to set up really quick. And I've already gone ahead and exported out the images, the logos, and the icons and stuff like that in the background images. So we don't have to spend time doing that. And I've also included them with this course. You're also more than free to download them from the InVision app. They're free, so I highly recommend it. So let's do that first screen. So let's do the login screen. Excuse me. So we're going to do this screen. We're going to get this all set up over here. So what I'm going to do is right click and say Add Image. And this is going to be called my BG. And what I'm going to do is hold down Control Shift and Alt. And that will allow me to snap the image size and all the anchors to a full stretch. And now I want to take the login BG and just plop that on there. Like so. All right, so the next thing I want to do, I love to work in 3D. But in this case, because it's mostly an app, it's a 2D type of interface. So I'm going to hit 2 on the keyboard. That automatically snaps me into this orthographic view, this front view, if you will, OK? So it's all 2D now. So the next thing that we need to do, and I'm going to keep this really basic, I'm not going to go through the details or the nuances of setting up Unity UI. I'm just going to try to get this setup super quick so we have something to work with. Because really, all we want to be able to do in this course is learn how to create a modular system to switch screens and allow us to fade between those and pause and stuff like that, OK? So the next thing I want to set up is this logo. All righty, so I'm going to create another image right here. And we're going to give it that logo sprite. And I always like to say preserve aspect, obviously, because I don't want this thing to be stretched. And then I hit the set native size. And that will take it to that native size. And because this was laid out already in Photoshop, OK, the size is perfect. So we're going to put this up here, but we can actually make it a little bigger. I'm going to take some creative liberties here and make that a little bigger, hopefully. The designers don't get upset with me. Cool. OK, so the next item on our list here is to create this username and password field, OK? Now, these aren't going to be completely functional, but to do this property properly, excuse me, we want to create a input field. So I'm going to go and say input field. And I'm going to stretch this cross like so, because it goes the full width there. And it's around like that. So we're going to call this the username input field like so. And we don't need a background. It's all transparent there. So I'm going to just remove the image. It's kind of crazy. It might feel kind of weird. And then we have the placeholder text and the actual text that is the value that you read from the input field. So the placeholder just gives you something in there like username, right? So what I want to do is get it so it's situated a little bit more like that. And so really, let's just center it up like so. And let's give it a font. So I imported the Lato font here. And I'm going to change the size a little bit. We're also going to change this from Enter Text to Username like so. There we go. And I don't want this to be italic. There we go. And then I'm just going to pull it out a little bit like so. Change this color to white. And it is actually not full white. Actually, it kind of looks full white. We'll leave it at that. I always kind of like to pull it down just a bit so it's not both full white. It's really just kind of a design thing. All right, so the next thing I want to do is just make this a little skinnier. And then add that icon. So we need this icon right here. So let's do that. I'm going to add in a new image like so. And give it that user icon. So I'm sorry. I apologize if I am moving a bit fast through this whole setup. I do want to get to actually talking about the UI system setup, not necessarily how to work with Unity UI. So I just wanted a couple of screens here. But I also did want to show you what I do when I set up these screens. All right, so it also looks like we're getting a little bit of a bar up there. I wonder if I set this to clamp on the V-axis. Yeah, that gets rid of the line up there because it was just repeating. All right, so that's going to be our icon. Perfect. So now we just need the line. You notice there's a really faint line down there. So all I'm going to do is create a new panel actually. I don't need to import anything else. You'll notice that by default, you can just set this to a height of like one or two pixels. All right, so if we just anchor this to the bottom like so, the width is fine. We can also stretch it to the bottom like so. We just want it to be maybe like two pixels or actually it's kind of small. We'll do something like three or four pixels. And then we'll just drop the opacity down. Maybe a little bit. How about that? Yeah. A little bit smaller, five pixels. We'll drop it down. So basically, this is what I do whenever I'm developing an app. And I have used Unity to develop an app. All right, well, we are doing all that work for Amazon. That's fun. Most people don't think of using Unity to develop an app with. But it totally works. It's the same deal. Obviously, there's got to be some performance issues maybe. I'm sure if someone could come up with something, but it does work. I can vouch for that. All righty, so I think the icons are a bit small. And this is just really getting it picking now. So I'm going to set these to like 55 by 55. All righty, so there we go. We've got our username and password. This needs to be a password, like so. Perfect. And now we just need to make the button and some of this other stuff. So we need some text. So we're going to add some more text here. And all of this needs to be under another panel, too. So let's back up for a second. And I'm going to call this the login screen. And then I'm just going to place all these guys underneath. It'll still work. There we go. Right, because we're going to have two screens. We're going to have this login, and we're going to have this sign up. So we want these two main panels. This is where the screen scripts are going to live. So what I want to do is create another panel, not a game object, another panel over here. And this is going to be called the register screen, like so. And we'll just turn that off for now. We don't need to see it until we go and set it up. All right, so in the login screen, we're going to go and set in some UI, or some text, excuse me. And this is going to be forgot password. Forgot password. And I think I'm going to center it as such. I'm going to set the alignment like that. And that's because I want to be able to put it somewhere over here. Let's give it a lot of thin, or light, like so. And then we'll crease the font size. OK, there we go. Maybe we'll go up to like 40 for the font size. And then we'll pull down the white a little bit there. Perfect. OK, so that could be a button, too. But we're not going to hook that up in this particular course. We really just want buttons to take us from screen to screen. All right, so let's do the sign in button. And then finally, we'll do this. Don't have an account to sign up. OK, so what I want to do is create a button this time because this is going to be a button for sure. So I'm going to go and create a button over here. And I'm going to actually anchor this to the bottom. I'm going to pull this guy up here and then stretch it across. So it's actually this guy. There we go. That's the anchoring type I wanted. And we'll pull this down as such. OK, and we'll be able to actually pull all of these guys up a little bit like that. That's good. Again, I'm not going to go into the full details of how you can actually create super responsive layouts using the horizontal layouts and vertical layouts and layout elements and stuff like that. I really just want to get these two screens set up. So that way, we have a couple screens to work with for our UI system. So we're going to set this to 40 as well. Actually, we'll set it to something like 65. It's pretty big. Well, it's like 50. That's good. All right, so for the button background, we want that pink. And that came in with this logo right there, so that's good. And then for the text, we just want that white that we have. There we go. Perfect. So now we've gone and set up that login screen. The last thing we really need for this before we end this particular video is this don't have an account sign up button. So that's a two-piece thing. So I'm going to actually create another panel for this. Let's create another panel. Let's anchor it to the bottom and make sure it stretches with the width. And what I'm going to do is just pull this up there. Adjust the size. I'm going to hold down Alt. That way I can scale both sides at the same time there. So that gives me an idea where the text is going to be. So then what I do is I remove the image and the canvas render script, because this just really needs to be a container. So I usually give these a name of like forgot password or don't have an account. So we'll do that and say no account panel to give me a little note to myself of what is actually in here. So I'm going to add in some text. And it's going to, I'm just going to stretch this fully like so, all right? And we're going to center it. And we're going to say don't have an account question mark. And that's going to be a white. But it's actually kind of really dim. So let's pull that one down. We're going to change the font size here. And then all I do is just kind of adjust it like so until I get it into the right spot. Then the next thing we need is a button. And this is going to be anchored to this side like so. But I don't want the background. So I'm just going to get rid of the background on this. We just need the text. Really, actually, I do need the background because it raycasts it. So I'm just going to empty out the sprite by selecting no sprite and dropping the opacity on this. And then what we can do is change the text to a white over here. Oops, wrong one. There we go. Changes to a white. And give it that same font. So it's a lot to a regular. And we'll change the font size. And we'll say sign up. And we'll pull that down a little bit. What's the size of this text here? It's 41. So we'll set this to 41. It's not too shabby. OK. Perfect. All right, so we got our first screen. So I'm going to leave you in this video. And then in the next video, we'll set up the next screen. Thanks so much.