Wiring UI to Game Manager

[00:00:00]
>> Now we've got our UI, but our UI isn't going to do anything unless we hook it up to some scripts. So how do we do that? Well, we need to add this. Well, we need to add a few things to our score script so that it's aware of the UI.

[00:00:24]
So to do this we'll add a serialized field for the TextMeshProUGUI object which I know is really long but that is the name of the component. And that comes from the TextMesh Pro namespace or TM Pro for short, which will then hook up in the editor to the TextMesh Pro UI objects that we created.

[00:00:51]
And then we'll update that string, every fixed update. So we already have the score component. So we can just go into VS Code and go to score. And at the top here, I want to add the namespace TM Pro. And then we need a serialized field which I'll put above.

[00:01:21]
For this property and this needs to be a object of type TextMesh Pro UGUI and that will be called Score Text. We have these two other methods here we need to add a fixed update method. And we could update this ScoreText and reset score or increment score but okay, we're just going to be a little bit lazy and updated every frame.

[00:02:01]
Or sorry, every fixed update, I should say. So every fixed update, update the score string. So we'll say score text dot text. That's how we access the actual string that is string. We want to set that tot he score value and cast that to string. So we'll call the two string method, that's on integers.

[00:02:36]
So now that we'll update our score provided that we hook up everything in the inspector. But let's actually go back to our slides before we hook things up in the inspector because we have several things that we need to hack up there. But before we do that, there are several other updates that we want to do to the GameManager to update our UI.

[00:03:03]
So, we have a timer, we have Game Over Text, we need to update those values from the GameManager because we're keeping track of them, we have them in the UI, we just need to To connect the two together. So, let's go to the Game Manager and I believe they have that open still in VS Code.

[00:03:23]
So at the top, we'll create a serialised field called TextMesh Pro. You doing and I didn't add the namespace To have TM Pro, so we got to do that first and that will clean up that error. And then we're going to call this Game Over Text. We need another one for the timer.

[00:03:48]
So we'll create a serialized field for TextMesh Pro. You go we call this Timer Text So down here, we have this method, update timer. I'm going to uncomment that because now it is time to update the Timer Text. And let's actually switch back to our slides to see how we're going to do that.

[00:04:17]
So the update timer method is going to format that floating point value of the timer into a more human readable format with minutes and seconds. So this is all one line, it's just updating the timer but there is a lot of stuff that's being packed in here. So, first of all, we're using the format method on the string class within C-Sharp.

[00:04:48]
And the first number 0 or 1 inside of this format so here's the first zero here's the first one is an index so that's corresponding to additional arguments in that method so. Here's zero as the index, and here's that zeroeth index, and here's one. And here is that one index and that's where our two numbers are going to go for minutes and seconds.

[00:05:21]
The colon separates the index, and the formatting. And the 0's are leading 0'. So here's the index 0 and 1 and then we have a colon. And then the formatting for those is that we want just one place for the minutes because we only have 60 seconds in the game.

[00:05:43]
And then we have two numbers for the seconds. So we're going to have a leading zero there if it's less than 10. The second part of this is using the math functions or math F which is part of Unity. And we're using what's called a floor method. That's common in many math libraries.

[00:06:09]
You may have come across this in JavaScript, and this is going to format that floating point value into our minutes in seconds. So if we divide the timer by 60, that's going to give us our minutes. If we take the modulus operator of 60, that's going to give us our seconds.

[00:06:36]
Okay, so let's type that out. We're gonna switch back to Unity. And we will say update timer. And I'm going to type out that whole comment just so we know what's going on. Here so we've got 0 colon 0 colon inside of these curly braces, and 1 colon 00.

[00:07:10]
And we'll say the first number 0 and 1 is the index. Colon separates index and the formatting, and that's referring to the colon inside of the curly braces. And then the zero, Or the zeros, are leading zeros. So now we need to take that timertext.text, and remember that's the TextMesh Pro UGUI object there.

[00:07:48]
And if I can find my method again, there it is. We need to take that text and we need to apply string.format to it. And we need this string here. So, and of course this is a string literal. So So it needs to be in quotes as well.

[00:08:07]
So we'll say zero colon zero and then after the closing curly brace we'll add another colon, up up our curly braces and say 1:00. I know this is confusing I promise this is probably the most confusing part of this entire game, is formatting this timer string. So next, for the arguments we need to say, math F.floor I need to take the timer value and divide by 60 to get the minutes, then we say math F.floor.

[00:08:52]
And we say the timer mod 60, To get the seconds. All right. We'll save them. There's a few more updates we need to do to the Game Manager. So let's get started on those In the game over method, we need to update the Game Over Text based on the final score.

[00:09:20]
So if the player wins, we need to say you win. If the player loses, we need to say you lose. If there's a tie, we'll say there's a tie. And then we also need to concatenate that Game Over Text to some additional text that says, press space to restart.

[00:09:38]
So one other thing to keep in mind is that that Game Over Text shouldn't always be shown we need to hide it and show it at the appropriate time. So to do that we'll actually just deactivate the game object that the text component is attached to so we'll say Game Over Text.Game Object.Set Active and pass true into that to activate it and later on we'll deactivate that in another spot.

[00:10:07]
So let's switch back to our Game Manager and this is going to happen inside of the game over method. And there's a few things that we need to type out here so we need to display The end game text if the game's over. So we'll just create a string here called Game Over Text.

[00:10:34]
That's local. And then we'll say if the players score, that score value is greater than the opponent score that score value. Well then the Game Over Text should say something like you win Well in that if statement with a semicolon. Then we'll say else if the player score that score value is less than the opponent's score value.

[00:11:18]
Well then the Game Over Text should say something like you lose. And then finally if neither of those are true then it must be a tie and things are equal so we'll say that it is a tie. And then, finally, we need to take that string And we need to assign it to Game Over Text .txt again remember the Game Over Text is a TextMesh Pro UGUI object that we will assign in the inspector soon.

[00:12:02]
And we need to apply that Game Over Text, but we don't wanna just say you win, you lose. There's a tie, we wanna say that and we also wanna say to press this space bar to restart, and we want a little bit of formatting in there. We don't want that to just be right up against this text, so we'll create two new lines, and then we can say Press Space, To restart, And so that will be our gameovertext.

[00:12:42]
There's one more thing we need to do here. If you'll recall, we need to actually show this because at this point, the gameovertext will be disabled. We're gonna disable it soon. But right now, we need to enable it because we want to show this text that we just wrote out.

[00:13:03]
So show the Game Over Text once it has been set and we'll say gameOverText.gameObject.setActive it's true. And that will activate the game object. So let's save that. And let's do one more update to the Game Manager. And that is under the RestartGame. So when the game restarts, we want to hide that text.

[00:13:38]
So let's switch back, go down to the restart method. So in Game Manager Restart Game, we want to hide the end In the game text will say the same thing gameovertext.game object.setactive and instead of true will say false. And that will hide the game object and it won't be visible.

[00:14:13]
So, we'll save that. And now we have a couple of things that we need to hook up in Unity that we have neglected up until this point. So we have all of our bits of UI here, but I'm going to go to the Game Manager because if you'll recall in the Game Manager, we created those TextMesh Pro UGUI slots, we need to populate them.

[00:14:45]
We created the player score slots that we never populated. So we need to drag that stuff over. So the Game Over Text will drag there, will drag the Timer Text there, we can drag just the Player Game Object to one of these slots and it's looking for a score component.

[00:15:11]
So it will automatically grab the score component and then for opponent we need to do the same thing now on the player and the opponent. There's a few things we need to hook up as well. We have this UI here, but we never filled in this value. So we need to for the player, get the player score and make sure that gets updated.

[00:15:41]
And then for the opponent So, we need to grab the opponent score. Make sure that gets updated. So now we'll save the scene. And if we hit play, if everything went well, we should see a timer that starts with a minute on the clock. Okay, we should be able to hit space to start the game and this text should disappear.

[00:16:07]
The timer should start running. It is not we'll investigate that. But it does look like the scoring is happening successfullly. So that's good, But let's see why that timer might not be updating. So we've got Timer Text in the Game Manager And where does this get updated? Update timer, Okay, so we called it in start, but, I missed a step.

[00:16:58]
In fixed update we never actually update the timer. So we'll add the update timer method to fixed update because we need to update that every fixed update. And if I switch back to Unity. And then hit Play, Now the Timer Text should update.