1
00:00:04,130 --> 00:00:05,550
‫Hey, welcome back.

2
00:00:05,570 --> 00:00:10,940
‫In this video, we're going to create a countdown timer so that the player knows how much time they

3
00:00:10,940 --> 00:00:16,250
‫have to wait before they can start moving their tank around and blowing stuff up.

4
00:00:16,250 --> 00:00:22,280
‫So we're going to show the time left in the countdown timer until the game starts.

5
00:00:22,280 --> 00:00:25,580
‫So let's hop into the editor and start doing this.

6
00:00:25,850 --> 00:00:33,620
‫Now I'm here in our Widget Blueprint, BP Start Game Widget, and this is the widget editor as we've

7
00:00:33,620 --> 00:00:34,160
‫seen.

8
00:00:34,160 --> 00:00:39,560
‫But you may have noticed at the top right, there are two tabs here, one that says designer.

9
00:00:39,560 --> 00:00:42,890
‫That's what we're in right now and one that says graph.

10
00:00:42,890 --> 00:00:50,570
‫And if you click on graph, it looks more like a blueprint event graph with event nodes and a my blueprint

11
00:00:50,600 --> 00:00:53,180
‫tab here with various sections.

12
00:00:53,180 --> 00:00:56,120
‫And this is where we can do blueprint logic.

13
00:00:56,120 --> 00:00:57,920
‫Now we have three nodes here.

14
00:00:57,920 --> 00:01:00,080
‫We have event pre construct.

15
00:01:00,080 --> 00:01:07,910
‫This is similar to a constructor in C++ and then we have event construct which is similar to begin play.

16
00:01:07,910 --> 00:01:13,460
‫So this is where it's more appropriate to do things at the beginning of the game because all relevant

17
00:01:13,460 --> 00:01:18,500
‫classes are constructed by this point and then we have event tick.

18
00:01:18,500 --> 00:01:24,020
‫And just like the tick function in C++, we have access to Delta time here.

19
00:01:24,020 --> 00:01:28,670
‫Now we're not going to use the first two nodes, so I'm going to highlight those and delete them and

20
00:01:28,670 --> 00:01:30,650
‫we're going to use event tech.

21
00:01:30,650 --> 00:01:37,670
‫Now, our goal for this video is to show how much time is left and we have a three second countdown

22
00:01:37,670 --> 00:01:40,100
‫timer now in C++.

23
00:01:40,100 --> 00:01:45,260
‫We created a timer handle and we used the world timer manager to start a timer.

24
00:01:45,260 --> 00:01:49,010
‫Everything we do here in blueprints is independent of that.

25
00:01:49,040 --> 00:01:55,790
‫We're creating a completely different system of logic here, and it's just going to coincide with that

26
00:01:55,790 --> 00:01:57,470
‫timer that we set in C++.

27
00:01:57,470 --> 00:02:02,090
‫So this is all different and independent from the C++ side.

28
00:02:02,120 --> 00:02:10,460
‫Now here in WB start game widget, we can add variables just like we can add variables in C++ right

29
00:02:10,460 --> 00:02:10,850
‫here.

30
00:02:10,850 --> 00:02:18,380
‫Under my blueprint, I can click add and select variable and now I have a variable called new var underscore

31
00:02:18,410 --> 00:02:19,340
‫zero.

32
00:02:19,340 --> 00:02:25,250
‫And down here in the details panel, which is confusingly on the left side, now we have the variable

33
00:02:25,250 --> 00:02:26,870
‫name and variable type.

34
00:02:26,870 --> 00:02:32,240
‫Now it's highlighted by default because it's just expected that you're going to rename your variables

35
00:02:32,240 --> 00:02:33,380
‫as soon as you create them.

36
00:02:33,380 --> 00:02:35,690
‫So we don't need this default name.

37
00:02:35,690 --> 00:02:37,820
‫We're going to call this our own name.

38
00:02:37,820 --> 00:02:39,290
‫I'm going to call it Countdown.

39
00:02:39,290 --> 00:02:46,160
‫And Countdown is going to be a float variable Y because this is going to keep track of how much time

40
00:02:46,160 --> 00:02:47,360
‫we have left.

41
00:02:47,360 --> 00:02:53,450
‫I'm going to start it off at 3 seconds and each frame I'm going to subtract the amount of time that's

42
00:02:53,450 --> 00:02:55,400
‫passed since the previous frame.

43
00:02:55,400 --> 00:02:59,750
‫So we get a countdown going from three downwards.

44
00:02:59,750 --> 00:03:01,880
‫Now I'm going to click Compile.

45
00:03:01,910 --> 00:03:07,820
‫Now, as soon as I click compile, I can give this a default value by scrolling down in the details.

46
00:03:07,820 --> 00:03:10,550
‫Panel, it's set to zero by default.

47
00:03:10,550 --> 00:03:16,100
‫I'm going to set it to three by default since we have a three second countdown.

48
00:03:16,100 --> 00:03:22,040
‫Time now as it stands, this is just a float called Countdown with a value of three.

49
00:03:22,040 --> 00:03:28,490
‫We haven't actually changed it, but every single frame of the game, I'd like to subtract away Delta

50
00:03:28,490 --> 00:03:32,660
‫time, which is the amount of time that's passed since the previous frame.

51
00:03:32,660 --> 00:03:39,980
‫And that way, Countdown will constantly be updating decrement by Delta time so that we have a running

52
00:03:40,010 --> 00:03:41,120
‫time count.

53
00:03:41,150 --> 00:03:42,980
‫Now, here's how we can do that.

54
00:03:42,980 --> 00:03:50,030
‫I'm going to take a countdown from our My Blueprint tab, click and drag it here into the event graph

55
00:03:50,030 --> 00:03:50,870
‫and release.

56
00:03:50,870 --> 00:03:53,480
‫Now, as soon as I release, I have two options.

57
00:03:53,480 --> 00:03:56,060
‫Get Countdown and set countdown.

58
00:03:56,060 --> 00:04:02,090
‫If I click Get Countdown, now I have the countdown note and if I click and drag out of its output,

59
00:04:02,120 --> 00:04:05,240
‫this gives me access to the value of Countdown.

60
00:04:05,240 --> 00:04:12,310
‫Now I can also click on Countdown, drag in and click Set Countdown and we have a set node.

61
00:04:12,320 --> 00:04:13,910
‫We've seen these both before.

62
00:04:13,910 --> 00:04:21,230
‫In earlier videos, the input pin for the setter allows us to plug in a float value and then countdown

63
00:04:21,230 --> 00:04:23,210
‫will be set to that value.

64
00:04:23,210 --> 00:04:30,260
‫So how do we actually subtract Delta time away from Countdown and then set that to the countdown value?

65
00:04:30,260 --> 00:04:37,820
‫Well, we can take our countdown node here and I can click and drag off of it and type the minus symbol

66
00:04:37,850 --> 00:04:41,600
‫on my keyboard and choose the Subtract node.

67
00:04:41,600 --> 00:04:47,660
‫If I select that, then I now have a float minus float or a subtract node.

68
00:04:47,660 --> 00:04:50,960
‫You'll see that it says Target is Kismet Math Library.

69
00:04:50,960 --> 00:04:54,800
‫That tells you that Kismet Math Library underpins this node.

70
00:04:54,800 --> 00:04:58,100
‫All nodes have C++ code at their core.

71
00:04:58,310 --> 00:05:01,460
‫So what this node does is it takes two inputs.

72
00:05:01,490 --> 00:05:03,500
‫It takes a float input.

73
00:05:03,560 --> 00:05:05,370
‫And it takes a second float input.

74
00:05:05,390 --> 00:05:09,560
‫Now, it's not going to change any of the variables we're passing in.

75
00:05:09,590 --> 00:05:16,700
‫It's simply going to perform a calculation and return that value that is the result of the subtraction.

76
00:05:16,730 --> 00:05:24,140
‫Now I'd like to take count down and subtract Delta time from it so I can take the output pin called

77
00:05:24,140 --> 00:05:31,340
‫in Delta time from the event tick node and plug that straight in to the second input in my subtraction

78
00:05:31,340 --> 00:05:31,910
‫node.

79
00:05:31,970 --> 00:05:38,520
‫So what I'm doing is I'm taking count down minus delta time and then this gets the result.

80
00:05:38,540 --> 00:05:43,660
‫Now initially count down is 3 seconds and delta time is a very small value.

81
00:05:43,670 --> 00:05:47,900
‫It's the amount of time in seconds that's passed since the last frame.

82
00:05:47,900 --> 00:05:50,000
‫So this would be a tiny amount.

83
00:05:50,000 --> 00:05:56,490
‫So what will result the first time this is executed is three minus a tiny amount.

84
00:05:56,510 --> 00:06:01,880
‫And what I'd like to do is set the value of countdown equal to that result, every single frame.

85
00:06:01,880 --> 00:06:06,500
‫So each frame countdown is being subtracted from little by little.

86
00:06:06,500 --> 00:06:10,940
‫And that way it will keep the countdown from 3 seconds going downward.

87
00:06:10,940 --> 00:06:16,820
‫So I'm going to take the return result from this subtraction node and plug it into the input for the

88
00:06:16,820 --> 00:06:18,490
‫set countdown node.

89
00:06:18,500 --> 00:06:25,070
‫Now, this isn't going to do anything if I don't connect the execution wire from the event, tick execution

90
00:06:25,070 --> 00:06:28,400
‫pin to the input pin for set countdown.

91
00:06:28,400 --> 00:06:34,070
‫So now what this is doing is every single frame subtracting Delta time from Countdown, taking that

92
00:06:34,070 --> 00:06:37,850
‫result and setting countdown to that new value.

93
00:06:37,880 --> 00:06:41,000
‫Now we can see how this behaves with a print string node.

94
00:06:41,000 --> 00:06:47,210
‫So I'm going to drag off of the setter type print string and get a print string node.

95
00:06:47,210 --> 00:06:53,390
‫And then I'd like to print the value of countdown so I can take the return value from the setter, which

96
00:06:53,390 --> 00:06:59,330
‫will give us the new value of countdown each frame and plug it into the in string node.

97
00:06:59,480 --> 00:07:05,750
‫And notice I see a convert float to string and if I release now I get a conversion node that will take

98
00:07:05,750 --> 00:07:10,400
‫my float, convert it to a string, and now we can print that to the screen.

99
00:07:10,400 --> 00:07:13,010
‫Now let's see what happens if I press play.

100
00:07:13,490 --> 00:07:14,450
‫Check that out.

101
00:07:14,450 --> 00:07:22,250
‫We see that count as being documented each frame and we're spamming the screen with the value of countdown

102
00:07:22,250 --> 00:07:24,590
‫and it's getting more and more negative.

103
00:07:24,590 --> 00:07:29,080
‫So this is the first step to getting our countdown timer working.

104
00:07:29,090 --> 00:07:30,800
‫I'm going to close this now.

105
00:07:30,800 --> 00:07:34,940
‫We saw that we're printing a float value which has a bunch of decimal points.

106
00:07:34,940 --> 00:07:40,400
‫And once we print the value to the screen, we don't really want decimal points, we'd like an integer.

107
00:07:40,400 --> 00:07:46,100
‫So I'd like to see the amount of seconds left without those trailing digits to the right of the decimal

108
00:07:46,100 --> 00:07:46,640
‫point.

109
00:07:46,640 --> 00:07:48,410
‫So what I need is an integer.

110
00:07:48,410 --> 00:07:53,930
‫Well, what I can do is I'm going to delete this conversion node and I'm going to take the result of

111
00:07:53,930 --> 00:08:01,730
‫the countdown setter and I'm going to type C E I'll seal, which is short for sealing.

112
00:08:01,760 --> 00:08:08,750
‫The sealing operation is going to take a float value and round it up to the nearest integer.

113
00:08:08,750 --> 00:08:12,320
‫So if we're at three, well, there's no need to round.

114
00:08:12,320 --> 00:08:15,680
‫It's going to return an integer with a value three.

115
00:08:15,680 --> 00:08:22,430
‫But if we're at 2.9, for example, then the seal node is going to round it up to three.

116
00:08:22,430 --> 00:08:29,480
‫And as that value decreases, it's going to continue returning three until we get down to two.

117
00:08:29,480 --> 00:08:31,970
‫So we're always going to get an integer.

118
00:08:31,970 --> 00:08:37,640
‫Now I can plug this into print string and you'll see that it says Convert integer to string.

119
00:08:37,640 --> 00:08:44,720
‫So now the seal node is taking a float, rounding it up to the nearest integer and returning that integer

120
00:08:44,720 --> 00:08:45,410
‫value.

121
00:08:45,410 --> 00:08:51,530
‫So now if I hit play, we'll see that we get 3 to 1 and zero.

122
00:08:51,530 --> 00:08:56,660
‫And of course it continues going down because we never tell this to actually stop.

123
00:08:56,660 --> 00:09:02,120
‫But this is a great start because now we have access to the number of seconds left and we can print

124
00:09:02,120 --> 00:09:05,060
‫something to the screen in response.

125
00:09:05,330 --> 00:09:09,560
‫So how are we going to print the correct message to the screen?

126
00:09:09,590 --> 00:09:15,050
‫What I'd like to do is when we have 3 seconds left, I'd like the widget to say, Get ready.

127
00:09:15,170 --> 00:09:18,980
‫When we have 2 seconds left, I'd like you to show the number two.

128
00:09:18,980 --> 00:09:22,130
‫When we have one second left, I'd like to show the number one.

129
00:09:22,130 --> 00:09:27,140
‫And when we have 0 seconds left, I'd like the text to say Go.

130
00:09:27,140 --> 00:09:34,910
‫Well, we can do this with a switch node switch nodes can switch on a number of different types, including

131
00:09:34,910 --> 00:09:35,360
‫INT.

132
00:09:35,390 --> 00:09:41,840
‫Now the way that a switch on int node works is it has a number of cases for a number of values.

133
00:09:41,840 --> 00:09:47,510
‫And based on the value that we pass into this switch node, it will do one of a number of things.

134
00:09:47,540 --> 00:09:54,410
‫For example, if we pass in the integer value three, then we get the three case which will result in

135
00:09:54,410 --> 00:09:56,600
‫thing three being carried out.

136
00:09:56,600 --> 00:10:03,050
‫So the switch on end node has multiple lines of execution and it will only execute one of them based

137
00:10:03,050 --> 00:10:03,230
‫on.

138
00:10:03,320 --> 00:10:04,250
‫The input.

139
00:10:04,280 --> 00:10:12,200
‫Now we can use a switch on int node and pass in an integer for example the result of our seal node.

140
00:10:12,320 --> 00:10:18,410
‫So I'm going to remove the print string and I'm going to drag off of the countdown node and type switch

141
00:10:18,410 --> 00:10:21,980
‫on INT and select switch on int.

142
00:10:22,010 --> 00:10:25,360
‫Now notice it takes a input of type integer.

143
00:10:25,370 --> 00:10:31,880
‫I'm going to pass in the return value from the seal node and also notice that we have an add pin option.

144
00:10:31,880 --> 00:10:39,470
‫If we click on that, you'll see that we get a default pin in addition to the output that says zero.

145
00:10:39,650 --> 00:10:47,300
‫What this says is if we hook up some blueprint logic from the zero execution pin, then that logic will

146
00:10:47,300 --> 00:10:48,500
‫be executed.

147
00:10:48,530 --> 00:10:55,730
‫If the input value passed in is zero, and if it's not well, then it will default to this execution

148
00:10:55,730 --> 00:10:56,170
‫pin.

149
00:10:56,180 --> 00:11:00,470
‫Now we can click add pin again and now we have zero and one.

150
00:11:00,470 --> 00:11:05,150
‫So we can have two lines of execution, one for zero and one for one.

151
00:11:05,150 --> 00:11:11,760
‫And then if the input is not zero or one, then whatever's hooked up to default will be executed.

152
00:11:11,780 --> 00:11:14,930
‫I'm going to click plus again two more times.

153
00:11:14,930 --> 00:11:19,370
‫So we have cases zero through three and a default case.

154
00:11:19,370 --> 00:11:26,540
‫So now it's up to us to drag off of this and add some blueprint logic that we would like executed based

155
00:11:26,540 --> 00:11:30,680
‫on the value passed in that we're getting from this SEAL node.

156
00:11:31,220 --> 00:11:34,240
‫And that's what I'd like you to do for your challenge.

157
00:11:34,250 --> 00:11:41,240
‫I'd like you to print different messages for each case using a print string node for the value three

158
00:11:41,240 --> 00:11:44,720
‫you can print get ready using a print string node.

159
00:11:44,750 --> 00:11:50,420
‫For the two case, you can simply print the value two for the one case, you can print one and for the

160
00:11:50,420 --> 00:11:57,470
‫zero case you can print go now for the default case, simply print start game with our print string

161
00:11:57,470 --> 00:11:58,040
‫node.

162
00:11:58,040 --> 00:12:03,320
‫Pause the video and add a whole bunch of print string nodes in the event graph now.

163
00:12:07,230 --> 00:12:07,740
‫Okay.

164
00:12:07,740 --> 00:12:13,590
‫So I'd like to go ahead and use a print string node and I'm going to start down here at the bottom for

165
00:12:13,590 --> 00:12:16,920
‫the default case and I'm going to type print string.

166
00:12:17,820 --> 00:12:21,030
‫And the string I'd like to print is start game.

167
00:12:21,180 --> 00:12:22,440
‫Now, here's a shortcut.

168
00:12:22,440 --> 00:12:28,020
‫If you didn't know with the print string node selected, I can hover my mouse somewhere else in the

169
00:12:28,020 --> 00:12:33,720
‫event graph and hit control dx and that will copy the node that I had selected.

170
00:12:33,720 --> 00:12:40,050
‫I'm going to hook up the three case to this print string node and I'm going to type get ready.

171
00:12:40,200 --> 00:12:43,200
‫So when the input to the switch is three, we'll see.

172
00:12:43,200 --> 00:12:45,300
‫Get ready, printed to the screen.

173
00:12:45,300 --> 00:12:52,260
‫Now I'm going to control DX again and hook this up to the two case and for two I'm simply going to print

174
00:12:52,260 --> 00:12:58,050
‫two now I'm going to copy the print string node and for one, I'm going to print the value one.

175
00:12:58,050 --> 00:13:04,470
‫And finally, one last print string node here is going to be hooked up to the zero case and this is

176
00:13:04,470 --> 00:13:06,060
‫going to say go.

177
00:13:07,110 --> 00:13:07,590
‫Okay.

178
00:13:07,590 --> 00:13:13,980
‫So let's go ahead and compile this and I'm going to hit play and now I see get ready, two, one and

179
00:13:13,980 --> 00:13:14,940
‫go.

180
00:13:14,940 --> 00:13:18,660
‫And then of course we see start game once we've ran out of time.

181
00:13:18,660 --> 00:13:24,900
‫So we know that the value is decreasing and becoming more and more negative, but that is the default

182
00:13:24,900 --> 00:13:29,220
‫case for our switch and that's when we know we can actually start the game.

183
00:13:29,220 --> 00:13:34,020
‫So this is the first step to showing our countdown timer in our widget.

184
00:13:34,050 --> 00:13:40,080
‫We're not quite changing the text that says Get ready just yet, but we'll be doing that soon.

185
00:13:40,320 --> 00:13:45,210
‫So in this video we created Countdown Logic and added that to our widget blueprint.

186
00:13:45,240 --> 00:13:50,160
‫We used print string to show our countdown values and print a different message.

187
00:13:50,160 --> 00:13:52,110
‫Based on our countdown values.

188
00:13:52,110 --> 00:13:56,640
‫We still need to set the text in the widget, and we're going to do that in the next video.

189
00:13:57,000 --> 00:13:57,990
‫I'll see you soon.