Unity Beginner Tutorial - Part 5: UI & Scoring

if you want to learn how to make a game in unity this tutorial should help you learn how to create a basic scoring system in the last video we added code that triggers when our player flies into an obstacle or through a point collider now it's time to build on that and count each pipe our player dodges and add it as a point on a scoreboard to create a scoreboard the first thing we'll do in unity is create a canvas object to do this i'll go into our hierarchy right click go down to ui and left click on canvas since this canvas will house all of our ui or user interface game objects let's rename it to game ui you may have noticed when we added our game ui canvas an event system was automatically added in by unity all this will do is handle stuff like clicks for buttons and other things like that that we'll get into a little bit later but for now in our game ui canvas let's tweak a few things in the inspector the first thing i'll do is go down into our canvas scaler to best account for a variety of screen resolutions let's change where it says ui scale mode from constant pixel size to scale with screen size i'll just left click on that and because 1920x1080 is often the most common resolution i found this to be a good size to work in regardless of your own monitor's resolution so i'll type down here my reference resolution 1920 by 1080. because we have this set to scale with screen it will scale up or down pretty well next in order to get some text to show up here in our game let's go back to our game ui object here right click on it go down to ui to select all the ui options and we'll select text because this text game object will hold our score let's go ahead and rename it to current score believe it or not we actually are seeing it it's this tiny little dot down here in the middle of our screen now when you're working with ui objects you'd think all you have to do is increase the font size from 14 to something slightly larger but you'll quickly see it disappears and that's because there's a few things we need to change first i'll back out of that by hitting controller command z and you still see we now have the 14 font size the best thing to do is just double click on the object you're trying to work on and you can see it zooms me really closely into this text game object that we just created we can expand the font size here just slightly to see how it will begin to come closer into view you'll notice this other box around the text field that's actually going to be the borders so if you go beyond that it'll just disappear meaning it's too big for the box that it's inside you may remember in part one we talked about this rec tool this is what we're going to use in 2d most often to change the size of our ui objects i'll left click on that and you'll see these four little dots pop up one for each corner to expand this box i'll take one of these blue dots and hover over it with my mouse then i'll left-click to grab it so make sure you left-click first then hold the alt button and when you do that you can grab all four corners at the same time and spread it out you can now see our game object has a bit more room to place this in the center of our screen i'll go into my text component here and just hit this center align button here in my alignment section i'll left click on that and then i'll increase the font size a bit more now you can kind of see in our game here it's beginning to look more like it fits into the rest of the scene i'll keep mine at 180 and then i'll change the font style from normal to bold just to give it a little bit more pop now because our current score will be showing numbers and not text i'm gonna change where it says new text here to zero just to get a better idea of how this is going to look in our game next let's change the color from this dark color to white so i'll go down into my color field here left click and just move this up to white this is totally a preference thing you're welcome to change this to any color you like i'll go ahead and close the color picker here next to make sure this really scales and stays in the center of our screen i'm going to scroll to the top unlike the other transform components we've seen on our other game objects we have a rect transform here and something different you might notice is it really emphasizes anchoring to make sure our score stays in the very center of our screen regardless of our aspect ratio i'm going to left click on this middle center it's going to open up our anchor presets to snap it to the top and make sure it stretches across and stays in the center of our screen i'll go over here hold the alt button down on my keyboard and you'll see arrows that spread across the top of the screen let's left click on that you'll see our object snaps to the top and now the anchor points for our rec transform are anchored to the edge of our current screen if we move our current screen down here by changing it in the free aspect mode the current score object changes in size as well so it always stays in the center perfect next let's put our current score to use to track and show our player their current score over in our scripts folder i'm going to right click go up to create and left-click on c-sharp script to create a new c-sharp script and we'll name it score manager next with our current score game object selected let's left-click on our score manager script that we just created and bring it over as a component in our current score object just like that next let's double click our score manager script to open it up inside our new score manager script let's remove these two namespaces at the top and also remove our update method we won't need those next down in our score manager class let's add a text variable and name it score text you'll notice here that we get an error this is because unity's ui variables aren't accessible in our script by default we talked about namespaces earlier in this tutorial series but we've only ever removed ones we didn't need however this time we actually need to add a new namespace to do this simply go up under our unity engine namespace hit enter and type the word using then we'll type unity engine again dot ui this allows us to access unity's ui variables such as this text variable that we just created next with your score text copied let's go down into the start method left click and hit controller command v on your keyboard to paste it now to set this equal to the text component on our current score object let's type equals get component next we need to type the less than and greater than symbols and an open close parentheses with a semicolon to specify which component we want to get let's click inside this less than and greater than symbol and just type the word text just like that okay with our score text variable now set up let's go below our start method and add a new method called add point so i'll left click after the little curly braces space down a couple times and then just type the word void add point now inside our add point method let's copy and paste the score text variable so i'll double left click to highlight it hit controller command c on my keyboard to copy it then controller command v to paste it inside my add point method and after the variable let's type dot then the word text to access our text components text field and to create new text we need to type whatever words or numbers we want to show and place them within quotation marks for now let's type add point perfect we'll soon connect this to the point collider method we created in the last video but for now to test out our add point method let's just call it in our start method so i'll highlight add point hit controller command c to copy it and then move it right below where we assign our score text variable and then hit controller command s to save my script then we'll head back into unity now back in unity if i click play our script should change from zero to add point okay now we need a way to track our points and update this text a little more dynamically to do this let's head back into our score manager script back in our score manager script the first thing we'll do is create an int to hold our score's number value so under our text variable let's type int and then we'll name it current score next let's select our new int variable by double left clicking on it hitting ctrl or command c on your keyboard to copy it and right above where it says scoretext.text let's hit enter then controller command v to paste the current score variable like other variables we've created in this tutorial series so far our current score variable starts at zero and that's perfect because we don't want the player to have any points at the beginning to take our current score and add one point to it all we need to do is type plus plus adding plus plus at the end of our variable just means anytime this method is called it will add one to the current variable's value now to get our current score value to show up in our scoretext.text field all we have to do is replace this add point text that we put in here with our variable control or command v to paste it in here when we pasted our current score variable you may have noticed we're getting an error this is because our score text.text requires a string value strings hold letters and words similar to what we typed out in our first message there are a few ways to fix this but i've found the best way is to simply add dot to string at the end of our current score variable just like that all this tostring does is take our current score integer value and converts it into a string next let's save our script and test this out in unity when we click play in unity we should see that our text displays a 1. this is because we're taking our current score default value of 0 adding 1 to it then updating the text to show its current value of 1. great now we're ready to connect a few scripts together and complete our scoring system let's head back into the score manager script one last time back in our score manager script let's go in front of our add point method here and type the word public then i'll hit a space unlike the other private methods we've created so far we'll need access to this one from other scripts specifically our player collide manager script now that we made our add point method public let's go into our player collide manager script inside our player collide manager script let's create a new variable this variable will act as a direct link to our score manager script so let's type score manager as the variable type then i'll name it score manager next to make this accessible in unity type open and close brackets and then serialize field if you'll remember in the last video we added this debug.log add point in order to actually add a point let's take our score manager script here by double left clicking on it i'll hit ctrl or command c to copy it then i'll go below debug.log add point and i will hit controller command v to paste it and now when i type dot add point you'll see it pops up here as a method we can call from within this script if you don't see add points show up here make sure that you recently saved your score manager script i'll hit enter to select it and then just hit open and close parentheses followed by a semicolon great now let's go back into our score manager script one last time and make sure that we remove the call to our add point method from the start method here so i'll simply highlight it and delete it now we can save all of our scripts at the same time by hitting command or control shift and then s and you'll see all the scripts are saved at the same time and that's it let's head back over into unity back in unity there's still a couple more things we need to set up to make this work if we left click on our bird player let's go to our player collide manager component and set our score manager variable by left-clicking on our current score game object because if you remember we attached our score manager script to our current score game object and dragging it into the slot if we click play you'll notice one weird thing seems to happen anytime we cross over one of these add point colliders it jumps up by six just like that and it's doing that because every time we cross over our ad point collider here it's firing off the same method six times one for every collider that's currently attached to our player when we built our bird player in the first part of this tutorial series we left everything pretty much as is so the sphere collider is what we want but all these other game objects that we created down here also had colliders that we don't need so to remove them you can select the beak that has a box collider left click on these three little dots and hit remove component and then if we go and expand out our left eye and pupil and right eye and pupil you'll see all of them have the same capsule collider so we can actually remove all of them really quickly by holding shift and clicking to select everything so that it's all highlighted in blue then go over to the capsule collider go to the three dots again left click and go to remove component that way on our bird player object here the only collider we have left is this sphere collider on our bird player if we click play one last time you'll see anytime we cross over one of these pipes our score goes up by one which is what you would expect of course our player can't do much if they hit a pipe the game is basically over with no way to try again players won't be able to stop or reset our game but we'll change that soon now that we've added points to our project it's starting to feel more like a game in the next video we'll complete our project by adding a game over window that pops up if our player hits an obstacle it'll show their final score and a button for them to play again if you liked this video be sure to let me know by hitting that little thumbs up button down below it's totally free and helps me out a ton as always please leave any comments or questions in the section down below thanks so much for watching and i'll see you in the next video

Channel: tutmo

Views: 139

Keywords: game development, unity tutorial, unity beginner tutorial, unity beginner, how to make a game, how to make a game in unity, unity tutorial for beginners, unity 3d game tutorial, unity 3d game tutorial 2021, unity basics tutorial, create a game in unity step by step, learn unity for beginners, unity tutorial complete game, unity complete game tutorial, Coding in unity, unity ui tutorial, unity score counter, unity score system, unity score, unity game tutorial, unity game

Id: rQnBdCnpSkI

Length: 12min 48sec (768 seconds)

Published: Sun Nov 07 2021