SCORE & UI - How to make a Video Game in Unity (E07)

since the last video a lot of you guys asked me how you can create some kind of score for the game that's what we're going to be making today it also gives us the chance to play around with some unity UI exciting stuff let's get started let's begin by getting a bit more organized first off let's create a folder for all of our scripts let's name it scripts we'll place our follow player play coalition and play movement in there let's also make one for our materials again we'll call this one materials and drag our obstacle mat and player mat in there I think we can just leave the rest here let's then correct something that's been knowing me since the last video and that is the collision detection sometimes it happens that our player actually passes through one of the obstacles it's something that you guys have also noticed in the comments to get more accurate physics detection we can select their obstacles and choose continuous under collision detection we'll do the same thing to our player we'll also go under edit project settings time and decrease our fixed time step I'll just set it to zero point zero one this means that unis will more frequently update our physics and therefore the chance of missing a collision is reduced this also means that we'll probably have to select our player and increase the forward force a little bit I'll just set it to something like 8000 and I played around with it and found that a sideways force of about 120 felt pretty good so now when we hit play everything should look and feel pretty much the same way but it just feels a lot nicer and the collisions are going to be much better I'm also just going to fix my OCD by setting our played to a Y position of exactly one alright so let's get started with our UI piece creating UI in unity is pretty much the same thing as creating anything else we go to the hierarchy we right-click we go under UI now and we can select text this creates a canvas a canvas is a place to display all of our different UI elements and a text object which of course allows us to configure our text but we can't currently see it anywhere so have a good look at it let's switch to 2d mode that select our text and hit F it's also zoom out a bit so we can see our entire canvas notice that the canvas will resize to fit the size of our game view this is basically the screen that we can paint stuff on for text object here I'm just going to move it up and put it kind of in the upper center I'm also going to change our text alignment to Center on both the horizontal and the you can also see that we can size about text and if we hold down alt we will size from the center however it doesn't actually change the font size it just changes the boundaries of our text so in order to actually scale about text we'll have to increase the font size over here just make sure you make plenty of room for the text so that if your player reaches a really high score it's not going to clip we can also set the horizontal overflow down here to Ola flow which means that if it should reach one of the boundaries it's just going to keep going something like this then let's change the text to something like two hundred and fifty just to give ourselves an idea of what's going on and I'm going to definitely also bump up the font size some more currently when we resize our window say if we maximize it our text is kind of parented to the center so text will always be a fixed distance from the center this also means that it doesn't resize and I kind of wanted to do that so let's select our canvas and let's change the UI scale mode from constant pixel size meaning that everything doesn't resize to scale with screen size and I wanted to kind of try and match the height you can see now that if we maximize our game view the font gets bigger as well and I really like that I'm also going to take the color of our text and make it completely white I think that gives a pretty cool faded look finally for the look of our text I really really hate Arial it's kind of a passion I mean there's a lot of bad funds out there but please anything but Arial so I'm just going to go ahead and download another one there are a lot of great fun our cows out there that font ogle font and so on I'm just going to go and open my browser I'm gonna search for Roboto this is a fun made by Google and its really nice modern and simple I'm just going to select this font click down here and we can now download it as a zip file so I'm just going to unzip that file by hitting extract all and extract and now you can just select all of the different font versions and drag them directly into unity voila we'll also go ahead and create a separate folder for this called fonts and shift select all of them and drag them in there and it's that easy now we can go on to our text and change the font to whatever version of Roboto that we like I'm just going to go with something like Roboto then actually we might wanna make the text black here just to make it more visible that kind of completes the look of our text but it's still not updating I mean if we play it's just going to be stuck at 250 and I want this to count up by the mirror you could also count up the score by time but I think since this is about reaching as far as possible it's pretty fun to measure distance to do that we go ahead and create a new script on our text object I'm going to call it score and they create an ad let's double click it and as always we're just going to be removing the two using tags up there and the start method so in order to keep track of how far we reach into a level we need a reference to our player because our player has a position and we can use that to make sure his distance traveled it's the same as any other variable we start with public then the type here we could either write game object and this gives us a lot of information about our player but we only want the position and therefore we're going to type transform instead because remember the transform component is responsible for position rotation and scale we're going to go ahead and write player as the name and now in our update loop we should be able to access player dot position Z and this is how many units we've moved on the z axis of course we have to make sure that our player stats add a Z of 0 but indeed he does so if we just want to display the position of our player here we can say debug that lock and then insert player dot position dot Z into the parentheses let's save this go into unity select that text object and drag in our player if we then switch to the console and hit play we should get a bunch of debug deadlock messages constantly saying the updated position of our player on the z axis now all we need to do is transfer this value onto the UI element and that's really easy to do as well just like we needed a reference from a scorer to the player we also need a reference from our score to the text so again we'll go into unity and whenever we're dealing with UI elements we actually need to include some more functions so we'll go up here and say that we're going to be using unity engine dot UI and this now allows us to write code for the user interface we can then create another variable this is also going to be public and it's going to be of type text and this is of course because the name of the component that is responsible for text is text and so we make it of type text and we can give this some fancy name I'm just going to go with score text and close it with the semicolon then down here instead of debug dead logging opposition will say score text and now we can access all the different parts of our text we can change the fonts we can change the color and we can change the text itself so score text at text allows us to change the text content we can then set that equal to player table position dot Z however if we try and run this it is going to throw an error and we can actually already see it if we hover over this red part it says cannot implicitly convert type float to string so what's happening well our position on the z-axis is a float number remember float is one of the basic datatypes and whenever we want to set our text equal to something it requires a string a string is also one of the fundamental data types and it's what we use to store text so we need to convert this number into text to do that we simply write dot at the end here and then to string and we need to follow that with two parenthesis it's a bit weird that we have to do this I mean it's still going to be a number but now it's going to be a number inside of a string and that's the difference there for now just write after me so if we save this head back into unity we need to of course reference our score text so we'll drag in our text component and hit play and we can now see the UI updating however it's doing so with a very high precision and I think there's no reason for us to have decimal places in here only whole numbers to do that we simply need to format our text and the to string method actually allows us to do that really easily all we need to do is go in here and in quotation marks write a zero if we save that now go into unity and hit play we should see that it displays our distance in meters but only in whole numbers much much better and we can see how cool that looks in full screen if you think something about your text doesn't look super crisp you can select the canvas and choose pixel perfect this sometimes can make the UI render a lot sharper that's pretty much it for this video if you liked it make sure to subscribe so you don't miss a future episode also because of my traveling I had to delay the monthly live stream a bit but I will be live-streaming very soon make sure to follow me at Facebook facebook.com slash brickies over twitter at brackets tweet to get notified when that will happen you don't want to miss it it's always a lot of fun and I just did a video on creating destructible objects that I think could fit really nicely into this one if you want to have the player or the obstacles break when they collide so check that out here on that thanks for watching and I was you in the next video thanks off the awesome people who donated in February and a special thanks to Derek Hughes Kirk faithful Merrifield James Calhoun and Jason Latino if you want to become a picture in yourself you can do so a pitching that comes - practice thanks a lot guys

Channel: Brackeys

Views: 1,212,130

Keywords: brackeys, unity, unity3d, beginner, easy, how, to, learn, course, series, tutorial, tutorials, game, development, develop, games, programming, coding, basic, basics, C#, user, interface, ui, ugui, score, counter, display, text, distance, organization, first, highscore

Id: TAGZxRMloyU

Length: 9min 8sec (548 seconds)

Published: Sun Mar 12 2017