1
00:00:03,690 --> 00:00:09,660
There were many ways that we could look at changing from one question to the next, but I think using

2
00:00:09,660 --> 00:00:12,050
a timer would be a good idea here.

3
00:00:12,060 --> 00:00:18,270
We can give them a set amount of time to answer the question before automatically showing them the answer.

4
00:00:18,300 --> 00:00:23,790
We can then display that answer for a fixed amount of time before automatically showing them the next

5
00:00:23,790 --> 00:00:24,460
question.

6
00:00:24,480 --> 00:00:28,770
So let's look at how we might implement this almost turn based timer.

7
00:00:29,710 --> 00:00:33,990
So the first thing we need to do is to place the timer onto our canvas.

8
00:00:34,000 --> 00:00:38,650
So let's open up our pre visualization canvas to see where we want to place it.

9
00:00:38,830 --> 00:00:44,650
And I've got mine in the top right corner here and all this really is it's just a plain image where

10
00:00:44,650 --> 00:00:46,470
we're controlling the fill amount.

11
00:00:46,480 --> 00:00:53,320
So over on our quiz canvas lets right click, go down to UI and then bring up an image and we'll call

12
00:00:53,320 --> 00:00:54,820
this the timer image.

13
00:00:55,180 --> 00:00:59,560
Before we move into place, let's drag over our image sprite.

14
00:00:59,560 --> 00:01:02,830
So I'm going to use this neon round orange sprite.

15
00:01:03,340 --> 00:01:08,530
And now if we zoom in a little bit so we can get the positioning correct, we can then drag that into

16
00:01:08,530 --> 00:01:09,250
place.

17
00:01:09,250 --> 00:01:11,140
And now it's just a case of resizing it.

18
00:01:11,710 --> 00:01:16,750
Now with our timer in position, we can go ahead and hide our pre visualization canvas.

19
00:01:18,800 --> 00:01:22,850
And then do any final movement tweaks for our timer based on our current design.

20
00:01:22,850 --> 00:01:25,220
So I'm actually going to bring it down ever so slightly.

21
00:01:25,370 --> 00:01:31,940
And now to make it act like a timer that's going to empty over time, let's go down to the image component

22
00:01:31,940 --> 00:01:34,070
and where we've got the image type.

23
00:01:34,070 --> 00:01:39,500
We've previously changed this to sliced for our buttons, but this time we're going to change this to

24
00:01:39,500 --> 00:01:40,310
filled.

25
00:01:40,850 --> 00:01:43,520
Now this has given us a whole bunch of extra options.

26
00:01:43,520 --> 00:01:49,730
So as it's set up at the moment with radial 360 from the bottom, if we go ahead and decrease the fill

27
00:01:49,730 --> 00:01:53,450
amount, we'll notice that it starts to carve away at our image.

28
00:01:53,990 --> 00:01:58,910
Now, I think the radial 360 is going to be fine for us, but if you want a different one then you can

29
00:01:58,910 --> 00:02:02,480
just select it from the dropdown for the Fill Origin.

30
00:02:02,480 --> 00:02:08,120
I'm actually going to change this to the top and rather than going clockwise to fill it up, we're going

31
00:02:08,120 --> 00:02:14,180
to go anti-clockwise or counterclockwise so that as we reduce the full amount, it starts to go down

32
00:02:14,180 --> 00:02:15,500
a bit more like a clock.

33
00:02:16,310 --> 00:02:21,560
And now it's time to create a new script which is going to control how this timer works.

34
00:02:21,560 --> 00:02:26,450
So in our scripts folder lets right click and create a new script.

35
00:02:27,520 --> 00:02:29,290
Ammar, call this the timer.

36
00:02:29,770 --> 00:02:35,500
As for where we're going to place this timer in our game, we could reasonably put it wherever we think

37
00:02:35,500 --> 00:02:39,240
is most sensible, so we might put it on the quiz canvas itself.

38
00:02:39,250 --> 00:02:44,440
But I think I'm going to create a new empty object and just call it the timer.

39
00:02:44,740 --> 00:02:50,530
This is a fairly separate component from the actual quiz mechanic itself, so it makes sense to be on

40
00:02:50,530 --> 00:02:51,490
its own object.

41
00:02:51,730 --> 00:02:57,340
Now, before we go ahead and write any code, let's think about what our timer script needs to do.

42
00:02:57,370 --> 00:03:01,410
Well, first, it's going to need to know what state the game is in.

43
00:03:01,420 --> 00:03:06,220
So is the player currently answering a question or are they being shown the answer?

44
00:03:06,430 --> 00:03:11,830
Next, the time is going to need to know if the time has run out for one of those given states.

45
00:03:12,040 --> 00:03:17,110
If it hasn't, then we're going to need to keep track of the fill amount for the timer image on the

46
00:03:17,110 --> 00:03:17,800
canvas.

47
00:03:18,040 --> 00:03:22,690
And when the time runs out, we're going to want to change the state of our game.

48
00:03:22,690 --> 00:03:27,910
So if we're currently in the answering question state, we're going to move over into the showing answer

49
00:03:27,910 --> 00:03:29,560
state and vice versa.

50
00:03:30,310 --> 00:03:34,000
So let's jump over into our script and the waste.

51
00:03:34,000 --> 00:03:39,400
I'm going to delete the comments above the start and update, and I'm also going to get rid of the START

52
00:03:39,400 --> 00:03:41,350
method because we're not going to need it.

53
00:03:41,830 --> 00:03:48,400
One important thing for our timer, though, is to keep track of how long we've got left for our question.

54
00:03:48,520 --> 00:03:51,400
So let's do this with a float variable.

55
00:03:51,400 --> 00:03:55,900
So we'll have a float and I'll call this the timer value.

56
00:03:57,130 --> 00:04:01,510
And to set this timer value, we're going to have two other float variables.

57
00:04:01,510 --> 00:04:07,330
One, for the amount of time we have to answer the question and another one for how long.

58
00:04:07,330 --> 00:04:09,610
We've got to review our answers.

59
00:04:09,970 --> 00:04:14,980
So let's make these serialized fields and they're both going to be of Type Float.

60
00:04:15,340 --> 00:04:18,519
The first one I'm going to call Time to Complete Question.

61
00:04:21,050 --> 00:04:24,260
And we'll maybe give the player 30 seconds for that one.

62
00:04:25,310 --> 00:04:32,420
And the second one another serialized field of type float and we'll call this one time to show correct

63
00:04:32,420 --> 00:04:33,230
answer.

64
00:04:37,030 --> 00:04:40,090
And let's maybe give this 110 seconds.

65
00:04:40,420 --> 00:04:45,280
So for our game, we're going to have a 32nd window to answer the question.

66
00:04:45,490 --> 00:04:51,940
And once that time has elapsed, we'll have a 10/2 review of the answer before we eventually flip back

67
00:04:51,940 --> 00:04:57,190
to the next question and give it another 30 seconds on the clock with those sets up.

68
00:04:57,220 --> 00:05:01,480
Now, let's think about the methods that this timer script is going to need.

69
00:05:01,840 --> 00:05:07,300
Well, the main purpose is really going to be to update this time of value based on the state of the

70
00:05:07,300 --> 00:05:07,810
game.

71
00:05:07,810 --> 00:05:10,510
So let's get this updating, first of all.

72
00:05:10,810 --> 00:05:16,500
Now, we could do this all in update, but I'm actually going to create its own method just for readability.

73
00:05:16,510 --> 00:05:19,900
So let's say void update timer.

74
00:05:22,950 --> 00:05:24,840
And every frame of our game.

75
00:05:24,840 --> 00:05:27,780
We want to be reducing this time of value.

76
00:05:27,810 --> 00:05:34,880
And we can do that by saying time of value minus equals time, dot delta time.

77
00:05:34,890 --> 00:05:39,900
So every frame of our game, we're going to shave off a little bit of time from our timer value.

78
00:05:40,260 --> 00:05:46,710
Now, if you've never seen this minus equals syntax before, this is really just a useful shorthand

79
00:05:46,710 --> 00:05:47,600
that we can use.

80
00:05:47,610 --> 00:05:55,110
And what it essentially does is takes the value on the left and takes that and subtracts the amount

81
00:05:55,110 --> 00:05:55,860
on the right.

82
00:05:55,860 --> 00:06:03,360
So another way that we could write this in a longer format would be time of value equals the time of

83
00:06:03,360 --> 00:06:06,300
value minus time dot delta time.

84
00:06:06,920 --> 00:06:13,640
So here we're taking our initial timer value and we're then setting this equal to what it was before

85
00:06:13,640 --> 00:06:15,660
minus time, delta time.

86
00:06:15,680 --> 00:06:19,070
So that's what this minus equals syntax does.

87
00:06:19,070 --> 00:06:24,740
So to save us a bit of time, rather than having to write all of this out, we can just use this nice

88
00:06:24,740 --> 00:06:28,550
shorthand syntax to collapse our lines and make them shorter.

89
00:06:29,610 --> 00:06:34,980
And then once our timer reaches zero, we want to set it to either our time to complete question or

90
00:06:34,980 --> 00:06:36,900
our time to show correct answer.

91
00:06:36,930 --> 00:06:38,730
Now, we'll build that in a second.

92
00:06:38,730 --> 00:06:45,810
For now, let's just get it counting down so we can say that if the timer value is less than or equal

93
00:06:45,810 --> 00:06:50,880
to zero, then we want to reset the timer value.

94
00:06:50,910 --> 00:06:57,750
So for now, I'm just going to set our timer value equal to the time to complete question and so that

95
00:06:57,750 --> 00:07:00,660
we can test this in unity and see what it's doing.

96
00:07:00,660 --> 00:07:07,200
Let's add a debug log message at the bottom here, which is just going to print out our timer value.

97
00:07:07,980 --> 00:07:13,860
And finally, to call this method, let's go to our update method and call update timer.

98
00:07:14,370 --> 00:07:17,610
So if we save our script here and jump back into unity.

99
00:07:18,280 --> 00:07:23,620
If we had over to our console so we can see our log messages and we can just clear this warning for

100
00:07:23,620 --> 00:07:25,810
the moment that's going to be cleared up later on.

101
00:07:26,170 --> 00:07:31,720
Next, let's click on our timer in our hierarchy and let's just lower this time to complete question

102
00:07:31,720 --> 00:07:35,460
to something fairly short so we don't have to sit here forever testing it.

103
00:07:35,470 --> 00:07:37,840
So I'm going to set it to five and hit play.

104
00:07:38,520 --> 00:07:43,320
And now in the console, we'll say that it slowly ticks down from five down to zero.

105
00:07:43,620 --> 00:07:47,790
And then once it hit zero, it goes back to five and carries on counting down.

106
00:07:47,880 --> 00:07:52,620
So we've got a nice cyclical timer here just based on our one variable.

107
00:07:53,300 --> 00:07:58,110
So let's come out of play mode and set our variable back to around 30 seconds.

108
00:07:58,130 --> 00:08:01,100
Now we've done testing that timer functionality.

109
00:08:01,780 --> 00:08:07,600
And if we had back into our script, the next thing we want to think about is how we're going to switch

110
00:08:07,600 --> 00:08:08,980
between our time to complete.

111
00:08:08,980 --> 00:08:12,160
Next question and our time to show correct answer.

112
00:08:12,900 --> 00:08:19,710
For this, I'm going to need another variable and I'm going to pop it above the timer value because

113
00:08:19,710 --> 00:08:24,690
I'm actually going to make this one public for now because over in our quiz script, we're going to

114
00:08:24,690 --> 00:08:30,270
want to have access to this variable and we could go through the process of creating getter methods

115
00:08:30,270 --> 00:08:31,410
and things like that.

116
00:08:31,410 --> 00:08:35,520
But for such a small game, I don't think it's going to be much of a problem.

117
00:08:35,520 --> 00:08:40,650
So we're going to have a public ball and we're going to call this is answering question.

118
00:08:44,059 --> 00:08:50,540
And initially we're going to set this to false with that or set up now I think is a good chance for

119
00:08:50,540 --> 00:08:51,720
a challenge.

120
00:08:51,740 --> 00:08:58,460
So your challenge for this lecture will be to change the state of our is answering question when our

121
00:08:58,460 --> 00:09:00,560
timer value reaches zero.

122
00:09:00,560 --> 00:09:03,440
So this will be down in our update timer method.

123
00:09:03,620 --> 00:09:10,310
Then once you've changed the state list, I want you to think about setting the timer value to match

124
00:09:10,310 --> 00:09:11,840
the state that we're in.

125
00:09:12,170 --> 00:09:20,270
So if is answering question is true, when the timer runs out, we want to set that to false and change

126
00:09:20,270 --> 00:09:23,570
the timer value to the time to show correct answer.

127
00:09:23,810 --> 00:09:26,660
Otherwise, we essentially want to do the opposite.

128
00:09:26,660 --> 00:09:31,040
So see if you can get your timer flipping between these two states.

129
00:09:31,040 --> 00:09:33,440
Pause a video now and give that a go.

130
00:09:37,440 --> 00:09:37,950
Okay.

131
00:09:37,950 --> 00:09:39,030
Welcome back.

132
00:09:39,060 --> 00:09:42,420
So let's head down to our update time and method.

133
00:09:43,240 --> 00:09:51,700
And in here, we first of all want to say that if is answering question is true, then if our timer

134
00:09:51,700 --> 00:09:56,050
value is less than or equal to zero.

135
00:09:57,620 --> 00:10:02,810
Then we want our timer value to be equal to the time to show correct answer.

136
00:10:03,170 --> 00:10:09,470
And in here as well we're also going to toggle the state of our is answering question boolean so we're

137
00:10:09,470 --> 00:10:13,580
going to say is answering question equals false.

138
00:10:13,910 --> 00:10:20,450
So if it is true and we've run out of time, we're going to say that the question is now false and we're

139
00:10:20,450 --> 00:10:23,990
going to change over to our showing of the correct answer.

140
00:10:24,170 --> 00:10:28,760
Otherwise, if answering question is false, we can say else.

141
00:10:30,380 --> 00:10:37,400
And then we also again want to ask if the timer value is less than or equal to zero, then is answering

142
00:10:37,400 --> 00:10:39,980
question is going to be set back to true.

143
00:10:40,670 --> 00:10:46,970
So again, we're just flipping the state of our timer and we're going to switch our timer value equal

144
00:10:46,970 --> 00:10:49,010
to the time to complete question.

145
00:10:50,350 --> 00:10:53,080
We don't need this final if statement anymore.

146
00:10:53,080 --> 00:10:54,580
So let's get rid of that.

147
00:10:55,150 --> 00:10:58,300
And if we again save and jump back over into unity.

148
00:10:59,130 --> 00:11:02,610
I said we could change this back to 30, but we aren't done testing yet.

149
00:11:02,610 --> 00:11:07,680
So let's change the time to complete question to five and we'll keep the time to show correct answer

150
00:11:07,680 --> 00:11:08,850
as ten for now.

151
00:11:09,180 --> 00:11:15,330
So if we go ahead and hit play, we should find that it starts counting down from five and then when

152
00:11:15,330 --> 00:11:21,210
it reaches zero, it'll flick over to 10 seconds and this will slowly count down.

153
00:11:21,570 --> 00:11:24,990
And then when this reaches zero, it'll flip back to five.

154
00:11:24,990 --> 00:11:31,110
So we've now got a nice timer that's flipping back between 5 seconds and 10 seconds.

155
00:11:31,530 --> 00:11:35,070
That's pretty much the bones of our timer now working.

156
00:11:35,070 --> 00:11:40,260
And in the next lecture, we're going to start paying a bit more attention to the fill image for our

157
00:11:40,260 --> 00:11:43,920
timer and calculating the fill fraction.

158
00:11:44,040 --> 00:11:45,420
So I'll see you there.