Unity Tutorial For Beginners - Button and TextMeshPro using Unity 2021

hello programmers I wanted to redo my intro to Unity tutorial to show the later version of unity because some things were different so I would start with unity Hub that's a good place to organize all your projects and from Unity Hub you this may be your first project so you may not have any projects listed you're going to say you want a new project and then every time they update Unity some things may change on here but find 2D and your 2D may be a little different like I've got two choices for 2D but I'm just going to pick the 2D core one and then there's a there's a place for you to change the name of your project I'm going to call this it's basically One Step past the hello world we're going to do more than print hello world we're going to end up changing some text every time a button is clicked so I just made my project name button clicked and then I'll say create project this may take a little bit of time to open up all right finally it opened I paused the video so you didn't have to watch everything load we've got our empty scene here and there's a hierarchy of the components right now all we have is a main camera this scene we need to add two different things click the plus sign to add a new component and both of the things I want to add are under UI for user interface the first one is a text mesh Pro so go ahead and click on that and you probably will have to import the text mesh Pro Essentials and then you may say well where is the text supposedly there's text there and every time you add a user interface component the first time you add one you're going to get this canvas object well if you can't find your text highlight the text and the hierarchy and go over into the scene View and hit F on your keyboard and it will help you find that text that you just positioned there and I instead of the word new text I'm going to change that and the properties are over on the right hand side in this column here I'm going to change that to say times clicked because my game is going to keep track of how many times the user hit the button and there's a resize handles here we can make this a lot bigger if we want I'm making it much bigger so that I can actually change the font size to be something a bit larger um the position where this decided to put the text if you scroll out I'm moving my fingers um on the mouse let's see to scroll out and I end up seeing that the times clicked is in the bottom left corner I'm going to select the arrows here the move tool and drag the green and red arrow to position this or I'm going to look up or on the right hand corner and see that the position I could change that to 0 0 if I wanted it to be directly in the center of the screen all right so that's one component I said that there were two components so go back over to your canvas and and select that and then the user interface and this time I want a button that the user is going to be able to click on so there's a button slash text mesh Pro I'll click on that it ends up again trying to put it in the lower left corner if you want to move it into a different position go ahead and move it to a different position and I'll show you a few more things over here there's above the move tool is the view tool and it will allow you to scroll and look at the view from a different position here um and I'm going to make the font a little bit bigger on that button so with the button selected I'm going to choose the rectangle tool and allow for a bigger font number one and then also my position I'll put it zero so it's kind of centered and then there's this little expandable and expand and contract right next to this button this arrow and you can see that there's a text mesh Pro thing inside the button and that makes sense because there's text on the button so I'm going to say click here all right and this any of these components that we just added we could change the color so if you don't want the button to be that bland white you could change the color I'm going to make the font a little bit bigger on that just like we did for the Times clicked the text mesh Pro label all right that looks good if you want to see what this looks like when you run it the Run button is this little arrow at the top you'll toggle it on and off to go from the scene view to the game View and if you don't want the blue background we can toggle this off again and click on the canvas and the canvas actually I take that back the main camera is where you're going to find that background color and we could pick a different background color if we want maybe a nice pretty blue color and oh it already was blue so then you won't be able to tell that I just changed it so purple and when you run we're gonna see that purple color but right now if somebody clicks on the button then nothing's gonna happen so we want to create a C sharp script that has a function that runs every time the button is pressed so I'm going to go over to that button and along with the where you change the font color and the font type if you scroll down there's that on click section we're going to be able to add an action to happen every time somebody clicks on that but first I actually want to add a script I'm going to add a script with ADD component I'm going to choose new script and I'll give the script a name and the name of your script is going to end up being the name of the class inside of the script so choose your name wisely I'm going to call this test script and we'll notice over in the view of the project that is the name of our C sharp file and if you double click on this I have this configured to work with Visual Studio code so that it opens it up and we'll be able to see and edit the code here and if this isn't hooked up I'd highly recommend you use visual studio all right so notice that the name that we gave this script is also the name of our class we've got some inheritance um from mono behavior and two functions I do want a start function I don't need an update function so I'll delete that and I want this class to have two properties I wanted to have a public text mesh Pro u g u i and don't worry if it's underlined mine's going to be underlined until I do something else so that I'll give the variable name my label and then a private int that is just the word number now if you want to get rid of that red underline hover over that and the tooltip says well here's a little suggestion maybe you just need using text mesh Pro that that library to be pulled in and so if I do that it adds this line up here the lines that are not bold means we're not using anything from that so we could remove that and your program will work the same so in start if it's the very first time you've come to this scene or or you're coming to this scene um from another scene and you've transitioned here we're going to set the number to zero and just for debugging I'm gonna print in start and I'll show you where that print statement is going to show up log consoles what you might see in some other tutorials and I want one more function that will be publicly available and I'm going to call this button pressed and this is I'm going to hook it up as the action that happens every time someone hits a button I'm going to change the number and increase it by one and then I want to change the words that are displayed on the label so the label has more than one component we saw it had um has background color font type and I want the component that's the text mesh Pro ugui and I'm going to get that part only and then look at the text of that part and change it to times clicked and here I can concatenate that string with the current version of the number all right go ahead and save your changes and jump back over to the scene and to hook this action up to the button I'm going to select the button and go back to that section where it said on click and I'm going to hit a plus sign so now I'm going to drag in the component that has the script I want to run well I had actually just added the component to the button itself so I'm going to drag the button into this new box that opened up and I'm going to choose the function from that from the buttons test script and the function was Button pressed so the one other thing we have to change is when you look at the text uh test script it has any publicly available parts of that and there was a public part my label when we were looking at the script it actually had my label with camel case and it started with a lowercase but this is the same label object so it wants to know what is the text mesh Pro uh object that we want to change every time we call that function and I'm going to drag that in to that empty box there so I clicked on what I wanted to add but I didn't let go of the mouse I held it down and dragged it okay let's test it out go ahead and hit run and we can click our button and voila every time we click we're going to increase that number of times clicked all right hope you enjoyed your first Unity tutorial

Channel: Painless Programming

Views: 5,474

Keywords: Unity Tutorial For Beginners - Button and TextMeshPro using Unity 2021, Beginners Unity Tutorial, Updating TextMeshPro in Code, C# code to update Unity Text, First Unity Tutorial, Unity Beginners Tutorial, Unity 2021 Tutorial

Id: pZY94sr8UkI

Length: 11min 5sec (665 seconds)

Published: Sun Jan 15 2023