Tutorial: Code Basic UI in Unity (Legacy InputField, Text, and Button)

I have three other videos that go over in more detail about adding UI to Unity adding a button adding an input field and also a text field as UI but it's a little old and I figured I would do an updated version and also kind of combine them instead of having it in three different videos so to begin I already have a Unity project open and I am going to create my UI elements on the screen and for these we're going to be using the Legacy versions not the text mesh Pro ones I'll demonstrate that in a different video since the coding is different so the first thing I want to do is create these elements so in the hierarchy panel I'm going to click on the plus sign and I'm going to go to UI and let's add all three of these elements I'm going down to Legacy so once again not MP put field not the button or text up here going to Legacy and I'll add the text field I'm going to also add the input field so I'm going to go to UI Legacy input field and I'm going to go to UI Legacy button okay now it looks kind of strange since it's actually putting these things on a canvas and not what you look at the camera with so this canvas actually will overlay what the camera will see so we need to put this in an easier way to view it so I'm going to go ahead and go to Canvas and double click on it and I can wheel Mouse and to zoom in a little bit um something I'd also recommend if you are in a 3D project there is a 2d button up at the top of the screen so if you're in a 3D project it might look kind of strange so go ahead and click on that 2D button to make sure it looks like that when you're done you can always unclick it to go back into 3D mode but this canvas area with the outline is really showing what the bounds of the screen is going to be that the user will see so this will overlay anything once you play and these elements are created up down at the bottom left and we just need to move them into place so to do that I'm going to choose this move tool in my tools panel and I can click on what I'd like to move so I think what I'll do is do the input field on the top so I'll click here and grab this Blue Button position it where I'd like it to be I'm going to move the button next I'll put that in the middle and then I think I'll put the text at the bottom and if I hit play I can see what it'll look like actually on the screen and since I've zoomed into the canvas it looks about the same now notice the text I can't really see very well and the button is still called buttons so I'm going to go ahead and change those so I'm gonna hit stop to change the name of what's on the button I'm going to click on button and this arrow on the side I can open up and click on text over in the inspector I can change the text so I can just say push me right so that's fine so that changes the text on the button and to change the attributes of this text I'm going to go to this text field and over also in the inspector I can change what it would say if I'd like I'm just going to leave it as new text for now but um I think I want it to be white text so it'll show up a little better so I'm going to change that and I could change it larger if I'd like I can change the font size here if you drag on the side you can make it larger and smaller I'm going to make a little larger but also keep in mind if the text is too large for this bounding box the text will end up um disappearing so what I'm going to do is actually increase that by clicking this and making my bounds larger and then I'm also going to make it centered so you can play with this a lot you can also change the Overflow settings and set it up but I just wanted to point that out okay so now our UI elements are on here and also might be be wise to name these what they're going to be so I'm going to name this output okay input field is fine and I guess the button is fine too the reason I named this text field is that there is also a text field on this and here so it makes it a little confusing on what to drag over later okay so the next step is to create the script to control the UI now I already made a c-sharp class and just so I don't neglect that I'm going to make a new empty game object I'm going to call it script and assign that script to that okay so it's in the hierarchy I'm going to go ahead and open that script okay so for this I'm not actually going to be using start or update so I'm going to go ahead and delete these and um I am only going to be using a custom method so the first thing I'm going to do is add a directive at the top to allow it to use Unity engine's UI so I need to say using using unityengine.ui now it's gray since it hasn't actually been accessed yet and that's fine now I'm also going to add public input field and public text objects here and give them names to allow them to connect to the script okay so for each of these I gave them a name so it's kind of like a variable so for this I'm going to be creating an input field object and for this I'm calling username because I'm just going to type in a name there and for this also for the output it is a text object so what I want to refer to it I use in this case username and output to actually have it do something I need to create a method that the button will run when I click on it to do that I'm going to say public void and I can call it whatever I want in this case I'm going to call it my demo button and I need parentheses open and close curly braces and inside of there is I will put whatever code I want to run when I have the button pushed so if I want to access the text of the input field or the text of the text field I need to use the text attribute so for instance if I want to set the output text to anything I would say output dot text I can't just say output I need to actually use the text attribute so I'm going to say equals and I can set it to whatever they enter so I could say username.txt and what this will do is take whatever is in that input field username the text of it and it will assign it to the text of the output field so in this case it will just set it exactly to what I entered so we'll just start with that so I'm going to go ahead and save this script I'm going to go back to Unity and before I run it I need to connect these up so first I'm going to connect the method to the button so I've got this button but it doesn't know what to do until I assign it so I can either click on the button in the scene with the move tool or I can click on it in the hierarchy so I'm going to click on button and over in the inspector if I scroll down there is an on click section so I'm going to click on the plus sign and it will allow me to attach a script to it now I can't just grab the script from the assets I need to grab it from an object it's attached to so in this case I'm going to drag script down to the spot that says None object alternately there is a little Target that I could click on I could click on the scene and I could choose the script object from that so now I also need to assign the function so here I'm going to click on this where it says no function and I choose my name of my class and the method inside of it which is my demo button then it should be connected okay I also need to do one other thing which is assign what the input field is and what the text field is to the things on the screen so if I click on script I'd already assign this over here notice over in the inspector it says None input field and none text so I need to say what in P put field and what text field should be connected so I go over to here and I can drag output to text because that's a text field and I drag the input field to the input field now that should all be connected up when I push play I should be able to enter something push this and now it says whatever I entered so in this case I was picking a username or something okay I can also add other text to this if I'd like so if I wanted it to be more of a greeting I could go into my code and I could add on things like hello there it'll be the username I'm going to save this go back to Unity and if I hit play now it says hello there Sam so that is a basic demo of how you can create a UI using the Legacy input field button and text in unity like I said these are for the Legacy ones only the text mesh Pro ones code a little bit different and I will be doing a separate video on how to work with those it's very similar but you need to do a few different things if you found this handy please subscribe

Channel: Digestible

Views: 4,911

Keywords:

Id: mLjylUyng2o

Length: 11min 9sec (669 seconds)

Published: Sat Feb 11 2023