 Alright, welcome back. So we're gonna continue with our UI screens and the UI structure. So let's hop back into Unity and set up the registration screen Okay, so here we are back. We've finished our login screen. Okay, so I'm going to collapse that and turn it off And I'm going to turn on the register screen So just like the login screen, let's just drop in this background So we could have it on the register screen itself But I don't necessarily like to have the image script on there. I like to have a proper background So I'm going to remove the image script and the canvas renderer from this screen and create an Image and call it BG just like the login screen and then I'm going to make it so that it stretches fully All right, and then I'm going to put that register BG onto that particular Item okay, perfect Pretty cool Okay, so now let's take a look and see what we have to do So now this one will be relatively easy. We can actually reuse a lot of elements. So let's do that Let's set up all these particular fields and this button and this Bottom text down here by reusing elements that we already created. Okay, so let's do that I'm going to go and start to lift these things. So the button itself I'm going to and that should be the login button. We should name that so I'm going to duplicate it I just put it into the register register screen. Excuse me and Voila, we now have The button so we don't have to spend all that time doing that so I Do need to save the scene. So let's save the scene. We'll just save it as to do app front-end scene Yes, okay, so then we're going to get the no account panel and we're going to parent that There we go And this one says what is this one say already have an account sign in So let's just open this guy up here And we're going to say already have an account So we really just need to change the don't to already And maybe adjust this a little bit like so And we can make this just a little bit bigger Just a little bit and then the button itself Should be sign in Oops, there we go Perfect. All right, so let's pull over one of the Username or one of the input fields all right, so This is going to be name now, so I'm going to pull that up a little bit and We'll just call this the name field Awesome, all right, so you can actually collapse and expand your groups by using the arrow keys left and right arrow keys That's how I'm getting around so fast like that. So the text then for placeholder Actually, the placeholder should just say name Right, yep name the icons fine so we can move on now All right, and when unity UI renders it does render in order that they are situated underneath their parents So that's why I'm moving them up and down in the order because all these things will render over each other Excuse me All right, so let's move this down again Something like that and this one is the email field Okay, and we'll change this to email See how much easier it is to Reuse components you can even save these off as prefabs right so let's say we go into our to-do app And we create a prefab folder and Inside of that folder we created a UI folder just so we know their UI components We could start to just pull these off So there's an input field that we like and a register button that we like you know all this stuff Right, and then I'll just Break the prefab instance, so I just wanted to show you can make this modular by just making them prefabs And then you can start building UI is a lot faster Alrighty, so now we have the email there and it looks like the icons a little stretch So let's fix that we're gonna preserve the aspect. That's why Let's make sure all these guys are set to preserve aspect there Same with these guys Don't want to stretch your icons, and it just looks kind of funky and low-quality all right So I didn't want to do that There we go, and now we need the password field So I could have just copied The one that we already have but we'll we'll just go through and set all these guys up It's a password Let's go down to the placeholder. It's gonna say password Like so and we will change the icon to password or to the lock So I want the lock icon There we go, and that guy is also got a repeat repeat problem. So let's go and Change it to clamp on all axes. He's boom Okay, and then a birthday so you can enter in your date of birth Very important to all these apps So I'll just call this the b-day input field and this is going to say a birthday And the icon is going to be that present icon Alright, so let's move that down again Okay, and it looks like all the particular icons have that Weird issue so I'm going to set them all to clamp all at once. There we go All right, so the last thing we need to do is set up the back button So let's set that up All right, so I'm going to call this the back button And we don't need any text because it is just an icon. So I'm going to delete the text out of it and Put that in there preserve aspect set native size And it will pull that up into the corner and you can actually move it really quickly by just holding down control shift and all together and selecting that anchor like so and Then we'll just move this out Until we get it to roughly the right size and Then we can move it accurately by pixels by dragging on the labels here And we'll change the Size here. There we go. It looks about right And it actually looks like it's down further in the actual mock-ups And then I need the title so and create the text just a text field put that behind everything And let's actually anchor that to to the top corner, but we'll move it down here And we'll just move it off To the right like so perfect, and I'm going to center it up and We'll just make it a little bit bigger So we can have some space and this is going to be sign up What do you change the font? So this is going to be semi-bold All right, and we'll do something like 72 for the font size Make it white And I think it actually needs to be a bit bigger in my opinion That's a bit bigger. You know the font looks a little lighter. Let's go with the regular Or maybe light. Actually, yeah, there you go. Cool Not too shabby and it's actually in a little bit. You can see the lineup right there with the arrow There we go All right There we have our registration screen. All right, so now we have our two screens Okay, we are actually ready to begin coding out our UI system So let's let's get started on that in the next couple of videos. Thanks so much