1
00:00:03,870 --> 00:00:06,210
Our game is now mostly working.

2
00:00:06,210 --> 00:00:10,480
But when we get to the final question, the game just seems to stop.

3
00:00:10,500 --> 00:00:15,660
So in this lecture, we're going to finish off the experience with a wind screen that will show the

4
00:00:15,660 --> 00:00:19,590
player their final score and also give them the option to play again.

5
00:00:20,010 --> 00:00:25,110
We're also going to be fixing a minor bug that we left in the last lecture, which is all to do with

6
00:00:25,110 --> 00:00:30,930
our slider, because at the moment the player could, in theory, click on the slider and change the

7
00:00:30,930 --> 00:00:34,830
value to whatever they like, potentially ending the game early.

8
00:00:35,190 --> 00:00:37,860
So let's fix our slider bug first.

9
00:00:37,860 --> 00:00:41,310
So over on the quiz canvas, let's go down to our slider.

10
00:00:41,550 --> 00:00:46,470
And it's really just as simple as changing this interactive toggle to be off.

11
00:00:46,560 --> 00:00:51,420
This will prevent the player from being able to interact with it, and it will now only move based on

12
00:00:51,420 --> 00:00:53,070
the code that we've written for it.

13
00:00:53,340 --> 00:00:56,900
So with bug fixed now let's think about our windscreen.

14
00:00:56,910 --> 00:00:59,740
So for now, I'm going to hide my quiz canvas.

15
00:00:59,760 --> 00:01:03,120
I'm going to re-enable my pre visualization canvas.

16
00:01:03,120 --> 00:01:08,820
And because we're now done with our core game screen, what I'm going to do instead is on the image.

17
00:01:08,820 --> 00:01:13,410
I'm just going to drag over the end screen pre visualization that I've got here.

18
00:01:13,890 --> 00:01:18,960
So pre visualization set, it's now time to create our windscreen canvas.

19
00:01:18,960 --> 00:01:24,510
And that is going to be your challenge using all the knowledge that you've gained in this section so

20
00:01:24,510 --> 00:01:24,940
far.

21
00:01:24,960 --> 00:01:29,460
I want you to set up your new windscreen canvas in the hierarchy.

22
00:01:29,550 --> 00:01:34,800
On this new canvas, I want you to add a text field that we can use to display the final score.

23
00:01:34,950 --> 00:01:40,620
And I also want you to add a button so that the player can choose to reload the game if they want.

24
00:01:40,830 --> 00:01:45,990
Now, we're only worried about setting up the UI elements at this point and not the code that drives

25
00:01:45,990 --> 00:01:46,470
it all.

26
00:01:46,500 --> 00:01:49,410
So pause the video now and give that a go.

27
00:01:54,920 --> 00:01:55,300
Okay.

28
00:01:55,300 --> 00:01:56,270
Welcome back.

29
00:01:56,290 --> 00:02:02,830
So let's set up a new canvas by right clicking in the hierarchy, going to UI and then canvas, and

30
00:02:02,830 --> 00:02:04,930
we'll call this the win canvas.

31
00:02:05,500 --> 00:02:10,539
Now, before I go and add any other elements, the first thing I want to do is go to my canvas component

32
00:02:10,539 --> 00:02:13,150
and just change the sort order to two.

33
00:02:13,180 --> 00:02:19,030
This will then make sure that it always appears above our quiz canvas and also above our background

34
00:02:19,030 --> 00:02:19,750
canvas.

35
00:02:19,780 --> 00:02:22,060
Next, let's go ahead and add some text.

36
00:02:22,060 --> 00:02:27,980
So right click on our win canvas down to UI and then up to text text mesh pro.

37
00:02:28,600 --> 00:02:31,090
Let's roughly drag it into position.

38
00:02:33,760 --> 00:02:37,510
Let's set some dummy text to maybe congratulations.

39
00:02:39,040 --> 00:02:42,820
You scored and then a default score.

40
00:02:45,030 --> 00:02:49,320
Then we'll change the font size and we'll make this maybe 65.

41
00:02:50,160 --> 00:02:53,880
I won't change the alignment options to middle and center.

42
00:02:55,250 --> 00:02:56,090
With that set up.

43
00:02:56,090 --> 00:02:59,100
Let's also give it a half decent name in the hierarchy.

44
00:02:59,120 --> 00:03:01,940
So let's call this the final score text.

45
00:03:03,920 --> 00:03:05,660
And finally, let's add a new button.

46
00:03:05,660 --> 00:03:10,970
So right click on our win canvas down to UI and then up to button text mesh pro.

47
00:03:11,240 --> 00:03:13,130
Let's call this the replay button.

48
00:03:16,460 --> 00:03:18,200
Drag it into position.

49
00:03:20,300 --> 00:03:23,210
And for this button I'm going to change the source image.

50
00:03:23,210 --> 00:03:28,640
So over in our sprites I'm going to drag over the Neon Orange Square.

51
00:03:29,150 --> 00:03:34,160
And rather than directly following my visualization, I think I'm going to make it a little bit shorter

52
00:03:34,160 --> 00:03:35,570
and a little bit fatter.

53
00:03:36,780 --> 00:03:38,550
Let's quickly center that.

54
00:03:38,550 --> 00:03:40,440
And then down on our button component.

55
00:03:40,440 --> 00:03:42,060
We don't need the color transition.

56
00:03:42,060 --> 00:03:46,530
So we'll clear that off for now and we will be setting up the on click later on.

57
00:03:48,100 --> 00:03:51,730
We drill down into the text object on the button.

58
00:03:52,550 --> 00:03:55,460
Let's go ahead and change the text to play again.

59
00:03:57,580 --> 00:04:04,660
Let's set the font size again to around 65 and I'm going to change the vertex color to be pure black.

60
00:04:05,330 --> 00:04:11,180
So with our canvas now set up, let's go ahead and hide our pre visualization canvas.

61
00:04:11,420 --> 00:04:13,580
And I think that's not looking too bad.

62
00:04:14,520 --> 00:04:17,730
The last step is to tidy up our hierarchy a little bit.

63
00:04:17,730 --> 00:04:24,900
So I'm going to drag my win canvas to be underneath my quiz canvas so that all of my canvases are together.

64
00:04:25,560 --> 00:04:30,660
And I'm also going to go ahead and delete my pre visualization canvas because I'm no longer going to

65
00:04:30,660 --> 00:04:31,230
need it.

66
00:04:31,560 --> 00:04:33,630
Okay, so hierarchy all tidied up.

67
00:04:33,630 --> 00:04:36,960
It's now time to write a script for our canvas.

68
00:04:37,110 --> 00:04:41,970
So just like we had the quiz script in our quiz canvas, we're going to have a script that controls

69
00:04:41,970 --> 00:04:43,680
the elements on our win canvas.

70
00:04:43,680 --> 00:04:49,470
So over in our scripts folder, let's create a new script and let's think about a name.

71
00:04:49,680 --> 00:04:54,780
Now, I don't think when is a particularly good name for a script, so I'm going to call this the end

72
00:04:54,780 --> 00:04:56,280
screen dot CSS.

73
00:04:57,040 --> 00:05:01,750
Let's drag that over onto our win canvas and then go ahead and open it up.

74
00:05:02,950 --> 00:05:05,740
In this script, we're not going to need our update method.

75
00:05:05,740 --> 00:05:10,300
So let's clear that out of the way and also get rid of our comment above the start method.

76
00:05:10,390 --> 00:05:15,610
We're not really going to need access to the button on the canvas, but we will need access to the text

77
00:05:15,610 --> 00:05:16,080
field.

78
00:05:16,090 --> 00:05:21,610
So at the very top, remember, we need to include a using statement for our text mesh pro field.

79
00:05:21,820 --> 00:05:29,410
So using TM pro and then inside the class itself, we can add a serialized field of type text mesh pro.

80
00:05:29,470 --> 00:05:32,980
You go and we'll call this the final score text.

81
00:05:34,120 --> 00:05:39,910
And since we're going to need to display the score, we're going to need access to our scorekeeper there.

82
00:05:39,910 --> 00:05:41,770
We'll call that scorekeeper as well.

83
00:05:42,160 --> 00:05:48,220
Down in start, let's find the reference to that scorekeeper so we can say scorekeeper equals find object

84
00:05:48,220 --> 00:05:49,540
of type scorekeeper.

85
00:05:50,500 --> 00:05:55,750
And finally, let's create a method to update the final score when the end screen is shown.

86
00:05:55,960 --> 00:06:00,460
Now, there are a couple of good ways to do this, but I'm just going to use a standard public method,

87
00:06:00,460 --> 00:06:04,780
which we're very familiar with, that we can then later call from another script.

88
00:06:04,810 --> 00:06:08,950
So let's call this a public void show, final score.

89
00:06:10,870 --> 00:06:17,860
And all this needs to do is update the final score, text, text to be equal to our congratulations

90
00:06:17,860 --> 00:06:18,460
message.

91
00:06:18,460 --> 00:06:20,110
So congratulations.

92
00:06:20,740 --> 00:06:22,540
Then we'll add a new line character.

93
00:06:22,540 --> 00:06:28,330
So the second part of our message will appear on a second line and finish it off with you.

94
00:06:28,330 --> 00:06:33,940
Got a score of our scorekeeper dot calculate score.

95
00:06:34,750 --> 00:06:38,980
Let's also consider adding our final percentage sign there as well.

96
00:06:40,110 --> 00:06:42,730
And because this line is very long.

97
00:06:42,750 --> 00:06:48,360
Let's hide our sidebar and also let's just break this onto a second line.

98
00:06:48,900 --> 00:06:53,910
And because C-sharp doesn't care about whitespace, this is absolutely fine to do.

99
00:06:54,090 --> 00:06:57,840
The only real caveat is that it needs to be broken in the right place.

100
00:06:57,840 --> 00:07:00,510
So here we're adding something to our string.

101
00:07:00,510 --> 00:07:03,330
So it's a good place to break on this line.

102
00:07:03,660 --> 00:07:07,890
If we broke in the middle of a string, then we'd definitely get some weird errors.

103
00:07:07,890 --> 00:07:13,200
So as long as you're careful about where you decide to break your lines, the compiler really won't

104
00:07:13,200 --> 00:07:14,460
care that much.

105
00:07:15,000 --> 00:07:18,810
Let's go ahead and save our script and jump back over into unity.

106
00:07:19,460 --> 00:07:26,330
Then on our win canvas, let's scroll down to our end screen script and just drag over our final score

107
00:07:26,330 --> 00:07:27,140
text.

108
00:07:27,750 --> 00:07:28,710
With that set up.

109
00:07:28,710 --> 00:07:33,180
Unfortunately, we're not currently in a state where we can really test it because we're still lacking

110
00:07:33,180 --> 00:07:38,480
the key component that will switch between our quiz canvas and our win canvas.

111
00:07:38,490 --> 00:07:43,590
So in the next lecture, we're going to finally finish up our game by adding in a game manager, which

112
00:07:43,590 --> 00:07:47,700
will do all of that work for us and also allow us to reload our game.

113
00:07:47,820 --> 00:07:49,290
So I'll see you there.