1
00:00:04,050 --> 00:00:08,880
In the last lecture, we created the game UI, but it's not yet being connected up.

2
00:00:08,880 --> 00:00:11,550
So if we play our game, it doesn't do anything.

3
00:00:11,550 --> 00:00:14,340
So that's going to be our job for this lecture.

4
00:00:14,340 --> 00:00:19,470
And because I know you're up to the task, we're going to start off nice and early with a challenge.

5
00:00:19,710 --> 00:00:26,700
I want you to go ahead and write a new script called UI Display and attach the script to the canvas.

6
00:00:26,850 --> 00:00:31,140
Now, this script should be responsible for updating all of our UI elements.

7
00:00:31,140 --> 00:00:38,190
So our slider and our score text and remember that our health script contains the player's current health,

8
00:00:38,190 --> 00:00:43,350
so you'll need to utilize that and the scorekeeper contains the current score.

9
00:00:43,620 --> 00:00:46,800
So pause the video now and give that a go.

10
00:00:52,220 --> 00:00:52,730
Okay.

11
00:00:52,730 --> 00:00:53,660
Welcome back.

12
00:00:53,690 --> 00:00:58,720
So let's go ahead and create our UI display script over in our scripts folder.

13
00:00:58,730 --> 00:01:03,440
Let's right click create new script and call this UI display.

14
00:01:04,129 --> 00:01:09,470
Let's drag that script over onto our canvas and then go ahead and open that up.

15
00:01:10,090 --> 00:01:11,560
To get us started in here.

16
00:01:11,560 --> 00:01:15,070
Let's remove our comments above, start an update.

17
00:01:15,070 --> 00:01:19,840
And because we're going to be dealing with UI components, we're going to have to add our two using

18
00:01:19,840 --> 00:01:21,070
statements at the top.

19
00:01:21,070 --> 00:01:29,980
We're going to need using Unity Engine UI and using TM pro for our text mesh pro elements.

20
00:01:30,280 --> 00:01:31,630
Then for our variables.

21
00:01:31,630 --> 00:01:38,470
Let's split these with some headers and we'll make the first one elements relating to our health.

22
00:01:39,220 --> 00:01:43,180
And the second one will be elements relating to our score.

23
00:01:44,080 --> 00:01:47,230
Under our first health header, we're going to need two variables.

24
00:01:47,230 --> 00:01:53,290
So let's have a serialized field of type slider and we'll call this the health slider.

25
00:01:53,440 --> 00:01:59,560
So that's the object on our UI, and I'm going to want access to the player's health.

26
00:01:59,560 --> 00:02:04,720
So let's have another serialized field of type health called the Player Health.

27
00:02:05,230 --> 00:02:10,630
And the reason we are attaching this manually rather than finding it in the scene is because all of

28
00:02:10,630 --> 00:02:13,300
our enemies are also going to have health scripts.

29
00:02:13,300 --> 00:02:18,730
So for now, it really is just going to be easier to manually connect it in the hierarchy with those

30
00:02:18,730 --> 00:02:19,300
set up.

31
00:02:19,300 --> 00:02:24,850
Let's go under our score header and add another serialized field of type text mesh pro.

32
00:02:24,880 --> 00:02:31,300
You go and call this the score text and then finally we're going to need the scorekeeper.

33
00:02:31,330 --> 00:02:35,170
So we'll call that the scorekeeper so we can grab our current school.

34
00:02:35,590 --> 00:02:40,300
Now, we could go ahead and make this serialized as well, but since there's only one in the scene,

35
00:02:40,300 --> 00:02:47,980
let's just go and find it in a wake so we can say our scorekeeper equals find object of type scorekeeper.

36
00:02:49,380 --> 00:02:54,570
Now before we start updating these elements in the update method, there's one more piece of setup we

37
00:02:54,570 --> 00:02:59,460
want to do for our health slider, and that is to set up its maximum value.

38
00:02:59,490 --> 00:03:05,490
We could do this in the inspector, but because it's linked to the maximum health of the player, it's

39
00:03:05,490 --> 00:03:10,410
probably a good idea to grab that from the health script when the game starts so that if we have a change,

40
00:03:10,410 --> 00:03:15,720
the player's maximum health during the design stages, the UI can just update itself.

41
00:03:15,990 --> 00:03:19,680
Then down in our update method, let's update our UI.

42
00:03:19,710 --> 00:03:26,250
So first of all, we can take our health slider value and that is going to be equal to our player health

43
00:03:26,550 --> 00:03:27,930
dot get health.

44
00:03:28,080 --> 00:03:36,420
And finally, to update our score text, we can say score, text, text equals our score, keeper dot

45
00:03:36,420 --> 00:03:37,650
get score.

46
00:03:38,220 --> 00:03:44,280
And because that returns an integer rather than a string, we can say to string to convert it.

47
00:03:44,820 --> 00:03:50,130
So with that set up, let's jump over into unity to test things out before we can hit play.

48
00:03:50,130 --> 00:03:51,540
We do need to connect things.

49
00:03:51,540 --> 00:03:55,170
So on our canvas let's scroll down to our UI display.

50
00:03:55,470 --> 00:04:03,020
Let's drag over our health slider, let's drag over our player and let's drag over our score text.

51
00:04:03,030 --> 00:04:05,310
This is currently labeled text temp.

52
00:04:05,310 --> 00:04:10,710
So while we're here, let's also change this to score text to make it a bit more descriptive.

53
00:04:11,130 --> 00:04:14,670
And with all of that hooked up, let's go ahead and hit play.

54
00:04:15,030 --> 00:04:20,730
So if we resize our UI, we can see that it will adjust based on the screen size.

55
00:04:21,180 --> 00:04:24,170
We can see our health diminishing and we've died.

56
00:04:24,180 --> 00:04:25,980
So let's restart very quickly.

57
00:04:26,580 --> 00:04:29,130
And this time, if we actually shoot some things.

58
00:04:29,850 --> 00:04:32,250
When an enemy dies, we gain some score.

59
00:04:32,880 --> 00:04:36,720
But I'm not a massive fan of all of this blank space next to the skull.

60
00:04:37,140 --> 00:04:41,430
So let's see if we can pad this out, make it look a bit more like our pre visualization.

61
00:04:41,730 --> 00:04:48,210
Well, if we jump back over into our script, what we can do is we can pass in some parameters into

62
00:04:48,210 --> 00:04:55,050
our two string method and tell our game to always try and print a set number of characters in quotation

63
00:04:55,050 --> 00:04:55,500
marks.

64
00:04:55,530 --> 00:04:57,660
Let's just give it nine zeros.

65
00:04:57,990 --> 00:05:02,970
And now, as we add score, it will add some leading zeros to the front of our score.

66
00:05:03,090 --> 00:05:07,410
So let's save that up, jump back into unity to see this in action.

67
00:05:07,980 --> 00:05:11,490
And now, rather than a score of zero, we have nine zeros.

68
00:05:11,800 --> 00:05:15,150
And now when we kill some enemies, we'll see that our score increases.

69
00:05:15,150 --> 00:05:20,490
And our score text looks a bit more like those old fashioned arcade led displays.

70
00:05:20,550 --> 00:05:24,390
And personally, I quite like this kind of aesthetic with these sorts of games.

71
00:05:24,420 --> 00:05:29,070
You may be different though, so do feel free to format your score text however you prefer.

72
00:05:29,640 --> 00:05:33,330
And with that, the game scene itself is now pretty much finished.

73
00:05:33,510 --> 00:05:39,660
So congratulations on getting your UI all hooked up and working and I'll see you in the next lecture.