WEBVTT

1
00:00:23.970 --> 00:00:26.450
Hello, this is Younghoon Lee

2
00:00:26.450 --> 00:00:30.320
What we will learn this time is game over processing

3
00:00:30.320 --> 00:00:34.220
In this section, we will learn how to implement the player's HP

4
00:00:34.220 --> 00:00:37.720
And display a game over widget on the screen

5
00:00:37.720 --> 00:00:41.099
When health reaches 0

6
00:00:41.099 --> 00:00:44.749
We will also learn how to handle

7
00:00:44.749 --> 00:00:47.640
The button event of the Game Over widget

8
00:00:47.661 --> 00:00:51.561
Player HP Management and Hit Event Handling

9
00:00:51.740 --> 00:00:54.890
To handle the game over, it seems like it would be necessary to create player HP

10
00:00:54.890 --> 00:00:59.190
And implement a game over UI when the enemy attacks the player and HP decreases

11
00:00:59.190 --> 00:01:04.260
And then stamina becomes 0

12
00:01:04.260 --> 00:01:08.360
So first, we're going to create the player health

13
00:01:08.360 --> 00:01:14.469
Go to the player's header file and create a HP variable here

14
00:01:14.469 --> 00:01:19.379
Let's make it int 32; let's call it HP

15
00:01:19.379 --> 00:01:22.400
And you have to have maximum HP

16
00:01:22.400 --> 00:01:30.500
So let's set it to int 32 and MaxHP 3

17
00:01:30.500 --> 00:01:35.260
We will reset the HP to MaxH

18
00:01:35.260 --> 00:01:39.049
I'll give these two UPROPERTY properties

19
00:01:45.099 --> 00:01:48.099
Make it like this

20
00:01:48.099 --> 00:01:51.580
Shall we work on the UI first?

21
00:01:51.580 --> 00:01:54.980
 Here, we will create a HP UI

22
00:01:54.980 --> 00:01:59.380
Let's inherit the user widget with a widget blueprint

23
00:01:59.380 --> 00:02:04.419
And call it WBP Player HP

24
00:02:04.419 --> 00:02:10.020
Open the player HP and create a canvas here

25
00:02:10.020 --> 00:02:14.660
And I'm going to draw the UI here at the top left

26
00:02:14.660 --> 00:02:19.619
The UI will progress right away

27
00:02:19.619 --> 00:02:21.699
Arrange it like this

28
00:02:21.699 --> 00:02:24.660
And I will express it as HP

29
00:02:24.660 --> 00:02:31.460
Let's put the text like this to say, 'You are HP.'

30
00:02:31.460 --> 00:02:34.500
Increase the size to about 50

31
00:02:34.500 --> 00:02:38.000
In this case, we will check the size of the content

32
00:02:38.000 --> 00:02:42.179
And configure the letterbox to fit properly

33
00:02:42.179 --> 00:02:46.300
Now, you can just implement the progress bar like this

34
00:02:46.300 --> 00:02:50.340
But in most games, we usually structure it like this

35
00:02:50.340 --> 00:02:53.740
If you have a HP bar like this

36
00:02:53.740 --> 00:02:56.240
For example, if it's filled with red this much

37
00:02:56.240 --> 00:02:58.139
This is the background

38
00:02:58.139 --> 00:03:01.820
But it has taken damage, so that we will reduce it to this amount

39
00:03:01.820 --> 00:03:06.460
Then we can now express color in three stages

40
00:03:06.460 --> 00:03:10.020
For example, let's say this is red

41
00:03:10.020 --> 00:03:12.619
And this place is now painted red like this

42
00:03:12.619 --> 00:03:15.259
And this is like black

43
00:03:15.259 --> 00:03:16.779
It's black like this

44
00:03:16.779 --> 00:03:20.179
Then paint white like this

45
00:03:20.179 --> 00:03:26.310
The white part is done like this

46
00:03:28.660 --> 00:03:30.699
And the guy here shrinks like this

47
00:03:30.699 --> 00:03:34.699
There is a production like this

48
00:03:34.699 --> 00:03:36.339
Where it shrinks and fits like this

49
00:03:36.339 --> 00:03:39.100
I don't know if I'm expressing it well

50
00:03:39.100 --> 00:03:41.979
But the concept is reduced like this

51
00:03:41.979 --> 00:03:45.339
Then, every time you take damage, the red color decreases first

52
00:03:45.339 --> 00:03:49.500
Then the white color follows and touches

53
00:03:49.500 --> 00:03:52.139
Those things are done a lot

54
00:03:52.139 --> 00:03:55.489
So, let me try to make it as simple as this

55
00:03:55.489 --> 00:03:58.829
Then, we will process the HP gauge

56
00:03:58.829 --> 00:04:01.100
But to paint three colors

57
00:04:01.100 --> 00:04:05.059
There are two progress bars

58
00:04:05.059 --> 00:04:07.460
If you look at it, there's a style here

59
00:04:07.460 --> 00:04:10.740
Iif you expand it, it's made up of two images

60
00:04:10.740 --> 00:04:13.940
A background and a fill image

61
00:04:13.940 --> 00:04:16.420
It is usually arranged in two ways

62
00:04:16.420 --> 00:04:18.739
So, if you increase the percentage like this

63
00:04:18.739 --> 00:04:20.579
It is painted like this

64
00:04:20.579 --> 00:04:24.940
So I'll make another one and layer it on top of it

65
00:04:24.940 --> 00:04:27.339
Then, we're going to overlap this

66
00:04:27.339 --> 00:04:32.260
If you want to overlap, if you look here, there's a thing called overlay in the panel

67
00:04:32.260 --> 00:04:34.859
You can use this to make it a little simpler

68
00:04:34.859 --> 00:04:36.660
After inserting an overlay

69
00:04:36.660 --> 00:04:40.140
Add this progress bar to it like this

70
00:04:40.140 --> 00:04:42.739
Then the size doesn't fit

71
00:04:42.739 --> 00:04:45.420
So I'm going to expand this for a moment like this

72
00:04:45.420 --> 00:04:49.059
And I'm going to fill the progress bar inside the overlay here

73
00:04:49.059 --> 00:04:52.420
If you look at the top, there is a menu to fill in

74
00:04:52.420 --> 00:04:55.739
Let's fill it out by pressing the two buttons like this

75
00:04:55.739 --> 00:04:58.170
Do overlay like this

76
00:05:03.820 --> 00:05:06.170
I'll make it a little longer

77
00:05:07.700 --> 00:05:09.980
Let's duplicate one more progress bar

78
00:05:09.980 --> 00:05:13.140
By pressing Ctrl-D and overlapping it

79
00:05:13.140 --> 00:05:18.100
And then this is now the progress bar in the front

80
00:05:18.100 --> 00:05:19.739
This one is in the back

81
00:05:19.739 --> 00:05:22.980
Then, the front also has this background image

82
00:05:22.980 --> 00:05:25.619
So, for the one in the front

83
00:05:25.619 --> 00:05:28.540
I'll make the background color transparent

84
00:05:28.540 --> 00:05:33.940
So here, I will subtract the alpha value of this color to 0 like this

85
00:05:33.940 --> 00:05:37.899
And what's behind the background here

86
00:05:37.899 --> 00:05:40.899
Let's change the background color here to a different color

87
00:05:40.899 --> 00:05:43.100
I will make it a bit darker

88
00:05:43.100 --> 00:05:45.380
With a feeling like this

89
00:05:45.380 --> 00:05:49.420
I will process it like this with a dark gray tone

90
00:05:49.420 --> 00:05:54.380
And if you increase the percentage a little more, it looks like this

91
00:05:54.380 --> 00:05:57.779
Right now, the foreground color in front is the same

92
00:05:57.779 --> 00:05:59.779
So I'll try changing this color

93
00:05:59.779 --> 00:06:03.579
The color on the back will be white

94
00:06:03.579 --> 00:06:05.140
This will make it white

95
00:06:05.140 --> 00:06:09.660
As for HP, I will now express HP by making the progress bar in the front

96
00:06:09.660 --> 00:06:14.459
A red color

97
00:06:14.459 --> 00:06:18.140
We will try to express the three three-level colors like this

98
00:06:18.140 --> 00:06:23.820
So, with this white color following this red end line all the way

99
00:06:23.820 --> 00:06:25.779
Let's implement it like this

100
00:06:25.779 --> 00:06:30.100
Now, to process this, we need to do some coding

101
00:06:30.100 --> 00:06:33.579
Since it is a user widget now, let's create our widget

102
00:06:33.579 --> 00:06:38.079
And inherit it from the boom of this Blueprint widget

103
00:06:38.079 --> 00:06:39.619
Then process it

104
00:06:39.619 --> 00:06:43.420
Then the name, this is bar

105
00:06:43.420 --> 00:06:46.779
This is HPBar, this is HPBarBack

106
00:06:46.779 --> 00:06:50.100
Then I'll name this HPBar

107
00:06:50.100 --> 00:06:52.380
I will configure it like this

108
00:06:52.380 --> 00:06:54.700
Compile and save

109
00:06:54.700 --> 00:06:58.380
Then, I'll create a class

110
00:06:58.380 --> 00:07:00.179
I will make a C++ class

111
00:07:00.179 --> 00:07:05.899
Select All Classes, and then inherit

112
00:07:05.899 --> 00:07:10.059
The User Widget like this

113
00:07:10.059 --> 00:07:13.820
This is the player's HP UI

114
00:07:13.820 --> 00:07:16.379
I will configure it like this

115
00:07:25.579 --> 00:07:26.859
Here it is

116
00:07:26.859 --> 00:07:33.660
Make the player's HP UI public

117
00:07:33.660 --> 00:07:35.660
Then what I want to do here is

118
00:07:35.660 --> 00:07:39.140
That progress bar

119
00:07:39.140 --> 00:07:44.179
I want to bind two bars

120
00:07:44.179 --> 00:07:47.819
So, UPROPERTY

121
00:07:52.019 --> 00:07:55.220
EditAnywhere, then meta

122
00:07:55.220 --> 00:07:57.299
After that, make sure to put parentheses

123
00:07:57.299 --> 00:08:01.899
And then write bind widget inside this

124
00:08:01.899 --> 00:08:03.420
Write class

125
00:08:03.420 --> 00:08:06.420
That is UProgressbar

126
00:08:06.420 --> 00:08:10.100
If you look here, the name of that UI is

127
00:08:10.100 --> 00:08:10.980
That widget

128
00:08:10.980 --> 00:08:14.059
The name of the widget is ProgressBar

129
00:08:14.059 --> 00:08:16.739
If you click on this, you can see it more clearly

130
00:08:16.739 --> 00:08:20.380
It is said UProgressBar like this

131
00:08:20.380 --> 00:08:23.779
I'll leave this here and make a declaration

132
00:08:23.779 --> 00:08:28.579
This is how I created one called HPBarBack

133
00:08:28.579 --> 00:08:34.539
After that, I will copy it and call it HPBar

134
00:08:34.539 --> 00:08:37.820
You can make it the same as the name here

135
00:08:37.820 --> 00:08:41.859
Here, we will create two functions

136
00:08:41.859 --> 00:08:46.739
One of which is a tick function

137
00:08:46.739 --> 00:08:49.859
So there has to be one tick

138
00:08:49.859 --> 00:08:55.299
We need to obtain the HP information

139
00:08:55.299 --> 00:08:59.700
And express in this Progress Bar UI

140
00:08:59.700 --> 00:09:05.059
So, to set that information like this

141
00:09:05.059 --> 00:09:07.639
I will configure a function called SetHP

142
00:09:07.639 --> 00:09:14.909
As for the tick, if you look here, you will find something called a virtual void NativeTick()

143
00:09:17.059 --> 00:09:18.419
There is a function like this

144
00:09:18.419 --> 00:09:22.260
When you press the tab here, it is configured like this

145
00:09:22.260 --> 00:09:24.179
If you can't find this

146
00:09:24.179 --> 00:09:28.780
Just press control and click on the user widget here

147
00:09:28.780 --> 00:09:33.140
Then go here and search for the NativeTick

148
00:09:33.140 --> 00:09:35.739
You can duplicate it

149
00:09:35.739 --> 00:09:39.979
Come in, and write it here

150
00:09:39.979 --> 00:09:44.709
You can write it like this and write "override" at the end

151
00:09:46.859 --> 00:09:49.340
And I'll also create a function

152
00:09:49.340 --> 00:09:56.239
The function is SetHP, so we will make a void SetHP function

153
00:09:57.739 --> 00:10:00.739
Which will receive two pieces of information

154
00:10:00.739 --> 00:10:05.580
Here, we will get the current HP as int 32

155
00:10:05.580 --> 00:10:08.859
And MaxHP as int 32

156
00:10:08.859 --> 00:10:11.979
The reason I get two is because I want to create a percentage

157
00:10:11.979 --> 00:10:16.059
This progress bar here requires a percentage

158
00:10:16.059 --> 00:10:21.500
So, if you receive two values, the current value and the maximum value, you can create a percentage

159
00:10:21.500 --> 00:10:25.140
So, I made two functions like this

160
00:10:26.340 --> 00:10:29.579
I will implement it

161
00:10:31.979 --> 00:10:36.940
First, SetHP will set the HP bar

162
00:10:36.940 --> 00:10:43.020
Instead of back, I will set the HP bar to 3% for this

163
00:10:43.020 --> 00:10:50.900
Then, float per is curHP divided by maxHP

164
00:10:50.900 --> 00:10:53.500
But the problem is that these are both integers

165
00:10:53.500 --> 00:10:57.219
So when dividing integers by integers, the decimal point is rounded off

166
00:10:57.219 --> 00:11:01.900
So, for example, 0.5 and 1

167
00:11:01.900 --> 00:11:04.500
Or this is an int

168
00:11:04.500 --> 00:11:07.900
10, this is 5, 10

169
00:11:07.900 --> 00:11:10.059
Then, if you divide 10 by 5, you get 0.5

170
00:11:10.059 --> 00:11:12.900
However, if you divide it by int, it becomes 0

171
00:11:12.900 --> 00:11:17.580
So, if you cast even one of these as a float

172
00:11:17.580 --> 00:11:20.099
The result will come out as a float like this

173
00:11:20.099 --> 00:11:24.659
So, I will configure it like this and add the percentage here

174
00:11:24.659 --> 00:11:27.140
To use this, you need to add a header

175
00:11:27.140 --> 00:11:32.440
Let's add a header called Include ProgressBar like this

176
00:11:32.464 --> 00:11:38.314
Add ProgressBar header

177
00:11:38.340 --> 00:11:39.940
Write it like this

178
00:11:39.940 --> 00:11:44.020
Next, in NativeTick, there is 100 HP

179
00:11:44.020 --> 00:11:46.140
There is a Back with an HP bar

180
00:11:46.140 --> 00:11:47.900
And the color of this Back is white

181
00:11:47.900 --> 00:11:53.099
I want the white color to follow the percentage of the HP bar

182
00:11:53.099 --> 00:11:56.820
To handle this, we need to know another formula

183
00:11:56.820 --> 00:12:01.979
And one of the most commonly used formulas is linear interpolation

184
00:12:01.979 --> 00:12:04.829
What it is is called linear interpolation

185
00:12:07.020 --> 00:12:13.419
It is called linear interpolation but is abbreviated as 'Lerp'

186
00:12:13.419 --> 00:12:16.099
Some of you may have heard of it, some of you may be hearing it for the first time

187
00:12:16.099 --> 00:12:18.749
But to put it simply

188
00:12:18.749 --> 00:12:20.859
It takes three parameters

189
00:12:20.859 --> 00:12:26.609
It is said to be a, b, t, or alpha

190
00:12:26.609 --> 00:12:28.700
And receives three values

191
00:12:28.700 --> 00:12:31.780
You can think of a as the beginning and b as the end

192
00:12:31.780 --> 00:12:35.059
That t takes values ​​from 0 to 1

193
00:12:35.059 --> 00:12:39.219
For example, if we call this a line, there would be a line like this

194
00:12:39.219 --> 00:12:42.179
There is a line like this from here

195
00:12:44.179 --> 00:12:48.659
There is a line that looks like this: and here is A, and here is B

196
00:12:48.659 --> 00:12:51.059
Then, the t at the end is

197
00:12:51.059 --> 00:12:56.539
A float type with a value between 0 and 1

198
00:12:56.539 --> 00:13:01.500
For example, if you call this 0, then t will return a

199
00:13:01.500 --> 00:13:05.820
It returns a itself; if it is 1, it returns b

200
00:13:05.820 --> 00:13:11.700
If it is 0.5, it returns the midpoint between a and b

201
00:13:11.700 --> 00:13:13.979
That's why we interpolate

202
00:13:13.979 --> 00:13:15.979
It's called linear interpolation

203
00:13:15.979 --> 00:13:19.460
Then, there is one way to move it like this

204
00:13:19.460 --> 00:13:22.140
And a way to do it like this is when using Lerp

205
00:13:22.140 --> 00:13:26.900
If you do it like this, you can do it like this

206
00:13:26.900 --> 00:13:30.859
Originally, you would receive this after a and b and write a certain value

207
00:13:30.859 --> 00:13:33.820
But this would be overwritten on again

208
00:13:33.820 --> 00:13:38.219
Instead of adjusting the t value like this, t is not adjusted

209
00:13:38.219 --> 00:13:42.099
And is fixed at 0.1

210
00:13:42.099 --> 00:13:46.020
So what happens is that the Lerp is called once at first

211
00:13:46.020 --> 00:13:50.219
Then, as long as it is 10% of the position of a and b, it will be like this

212
00:13:50.219 --> 00:13:53.140


213
00:13:53.140 --> 00:13:55.340
The position of A moves

214
00:13:55.340 --> 00:13:59.219
Then, if you call it again, it will be 10% from here to here, about 10%

215
00:13:59.219 --> 00:14:00.900
About this much

216
00:14:00.900 --> 00:14:03.219
Place A here

217
00:14:03.219 --> 00:14:05.059
You keep repeating this

218
00:14:05.059 --> 00:14:08.580
Then, we will continue to proceed in this direction

219
00:14:08.580 --> 00:14:10.380
For example, here we are

220
00:14:10.380 --> 00:14:14.940
Then, it will only be about 10% from here to here

221
00:14:14.940 --> 00:14:18.179
At first, the section is large

222
00:14:18.179 --> 00:14:22.979
But as it converges to b, you can think of it becoming much smaller as it gets closer to b

223
00:14:22.979 --> 00:14:28.140
That's why the movement moves slowly and suddenly

224
00:14:28.140 --> 00:14:32.140
We can implement some type of movement that moves big at first

225
00:14:32.140 --> 00:14:35.580
And then moves very small at the destination

226
00:14:35.580 --> 00:14:39.200
By using this once

227
00:14:39.250 --> 00:14:41.350
This is what we're trying to do right now, right?

228
00:14:41.350 --> 00:14:44.739
So it's like this

229
00:14:44.739 --> 00:14:45.820
It's like this

230
00:14:45.820 --> 00:14:47.900
It's coming this way

231
00:14:47.900 --> 00:14:51.399
Then suddenly arrives

232
00:14:51.419 --> 00:14:54.900
I'm trying to create a production like that

233
00:14:54.900 --> 00:14:56.140
I'll give it a try

234
00:14:56.140 --> 00:15:01.219
Then, first of all, we are going to use something called a Lerp

235
00:15:01.219 --> 00:15:04.219
And this is a float type

236
00:15:04.219 --> 00:15:06.380
Since this value is a float

237
00:15:06.380 --> 00:15:13.099
There is Lerp at Fmath

238
00:15:13.099 --> 00:15:14.580
There is a function called Lerp

239
00:15:14.580 --> 00:15:16.219
You can process it using this

240
00:15:16.219 --> 00:15:20.340
Containing a, b, and alpha

241
00:15:20.340 --> 00:15:22.460
Then I said I would fix the alpha

242
00:15:22.460 --> 00:15:25.700
I want to fix it like this at 0.1

243
00:15:25.700 --> 00:15:29.059
But this is also a movement rather than doing it like this

244
00:15:29.059 --> 00:15:31.900
I would like to use this delta time to control it

245
00:15:31.900 --> 00:15:36.140
Then, 0.1 is 1/10

246
00:15:36.140 --> 00:15:36.859
Right?

247
00:15:36.859 --> 00:15:41.609
Since normally, it is 1 in 60

248
00:15:41.609 --> 00:15:42.780
In DeltaTime

249
00:15:42.780 --> 00:15:46.340
So if you multiply 6, it becomes 6 in 60

250
00:15:46.340 --> 00:15:47.979
So this will be 1 in 10

251
00:15:47.979 --> 00:15:53.580
So, if you multiply the delta time by 6

252
00:15:53.580 --> 00:15:55.820
It is approximately 1/10

253
00:15:55.820 --> 00:15:57.940
Do it like this

254
00:15:57.940 --> 00:16:00.260
Next, we need to put A and B

255
00:16:00.260 --> 00:16:04.850
Should A be called float A?

256
00:16:08.500 --> 00:16:11.979
This is the current value

257
00:16:11.979 --> 00:16:13.859
The current value is the value in this Back

258
00:16:13.859 --> 00:16:17.500
So I bring it by getpercent

259
00:16:17.500 --> 00:16:19.739
And the target value is this

260
00:16:19.739 --> 00:16:27.549
The HPBar's float B becomes the HPBar's getpercentage

261
00:16:28.299 --> 00:16:31.920
Then you can just put A and B like this

262
00:16:33.020 --> 00:16:36.570
I'm going to put this back into A

263
00:16:37.820 --> 00:16:41.299
And let's change this A value back

264
00:16:41.299 --> 00:16:45.739
To the percentage value of HB100

265
00:16:45.739 --> 00:16:49.380
Write SetPercent

266
00:16:49.380 --> 00:16:52.059
And add A again

267
00:16:52.059 --> 00:16:54.539
If you do this, you interpolate

268
00:16:54.539 --> 00:16:56.020
Then receive that value

269
00:16:56.020 --> 00:16:58.820
Then reflect this value here

270
00:16:58.820 --> 00:17:03.299
You can do this processing using linear interpolation

271
00:17:03.299 --> 00:17:06.180
Then proceed like this

272
00:17:06.180 --> 00:17:09.900
And this UI should appear on the screen

273
00:17:09.900 --> 00:17:12.140
 So, let's go to the player

274
00:17:12.140 --> 00:17:17.099
And attach the player's UI

275
00:17:17.099 --> 00:17:25.300
Please do UPROPERTY EditAnywhere here

276
00:17:25.300 --> 00:17:28.900
Next, TSubClassOf

277
00:17:28.900 --> 00:17:32.400
class Uuserwidget

278
00:17:35.900 --> 00:17:39.260
And here is player's HpUI

279
00:17:39.260 --> 00:17:42.699
Let's call it HpUI factory

280
00:17:42.699 --> 00:17:45.500
Then you have to make this and keep using it

281
00:17:45.500 --> 00:17:48.660
This is a class

282
00:17:48.660 --> 00:17:52.819
The name of the UI we created is Player HpUI

283
00:17:52.819 --> 00:17:58.500
It will be like UPlayerHpUI

284
00:17:58.500 --> 00:18:02.260
As a pointer here, I'll call it HpUI

285
00:18:02.260 --> 00:18:03.540
Configure it like this

286
00:18:03.540 --> 00:18:06.339
You can just make this, attach it, and keep it

287
00:18:06.339 --> 00:18:09.780
Then go to Player's BeginPlay

288
00:18:09.780 --> 00:18:12.099
And do some work here

289
00:18:12.099 --> 00:18:15.060
First, I will bring the player controller here

290
00:18:15.060 --> 00:18:18.300
And do it below where we processed it

291
00:18:18.300 --> 00:18:21.289
Do Createwidget

292
00:18:25.939 --> 00:18:27.959
Do this

293
00:18:31.459 --> 00:18:35.020
Add an HpUIFactory like this

294
00:18:35.020 --> 00:18:36.819
Then this should receive this

295
00:18:36.819 --> 00:18:39.420
Accept HpUI

296
00:18:39.420 --> 00:18:43.819
I'll cast it and keep it

297
00:18:43.819 --> 00:18:48.660
I'll cast UPlayerHpUI like this and keep it

298
00:18:48.660 --> 00:18:52.579
To have this, you need to add a header like this

299
00:18:52.579 --> 00:18:56.209
Let's add a header like this at the top

300
00:19:02.859 --> 00:19:04.699
And I'll attach the screen first

301
00:19:04.699 --> 00:19:09.579
I'll add it to the AddToViewport like this

302
00:19:09.579 --> 00:19:15.060
And then I'll setHP in the HpUI

303
00:19:15.060 --> 00:19:19.780
And add HP and MaxHP

304
00:19:19.780 --> 00:19:23.900
 While I'm at it, I'll also reset the max

305
00:19:23.900 --> 00:19:27.180
Even with the current Hp here

306
00:19:27.180 --> 00:19:31.099
Let's go to Unreal

307
00:19:31.099 --> 00:19:34.900
And add a HP gauge to the player

308
00:19:34.900 --> 00:19:37.200
After compiling

309
00:19:38.500 --> 00:19:39.500
Then here it is, right?

310
00:19:39.500 --> 00:19:45.500
Here, I will add the WVP player HP like this

311
00:19:45.500 --> 00:19:49.660
Shall we compile and run it?

312
00:19:49.660 --> 00:19:51.739
An error occurred

313
00:19:51.739 --> 00:19:54.020
It occurred at line 85

314
00:19:54.020 --> 00:19:59.579
If it's the player line 85, it's here

315
00:19:59.579 --> 00:20:02.140
And says it wasn't made properly

316
00:20:02.140 --> 00:20:04.699
I'll turn it off again and try again

317
00:20:04.699 --> 00:20:06.819
Let's compile it

318
00:20:09.219 --> 00:20:12.099
And debug it in runtime

319
00:20:12.099 --> 00:20:13.819
Run

320
00:20:13.819 --> 00:20:16.239
I ran it with F5

321
00:20:22.739 --> 00:20:24.420
Let's open the player again

322
00:20:24.420 --> 00:20:28.420
And make sure we're in here correctly

323
00:20:28.420 --> 00:20:32.099
The factory here is well-stocked

324
00:20:32.099 --> 00:20:35.380
Let's rerun it

325
00:20:35.380 --> 00:20:39.180
If you come this way, this place is filled

326
00:20:39.180 --> 00:20:42.540
If you look at it like this, it is null

327
00:20:42.540 --> 00:20:45.099
Then, in this case

328
00:20:45.099 --> 00:20:47.969
The parent of the UI has not been replaced yet

329
00:20:47.969 --> 00:20:49.939
The factory exists

330
00:20:49.939 --> 00:20:52.660
But we can imagine that

331
00:20:52.660 --> 00:20:54.819
Casting like this failed

332
00:20:54.819 --> 00:20:57.939
Then, we will run it again

333
00:21:00.339 --> 00:21:06.699
And replace the parent class of HpUI

334
00:21:06.699 --> 00:21:10.660
HP player, HP did not replace this

335
00:21:10.660 --> 00:21:12.180
Because it is a user widget

336
00:21:12.180 --> 00:21:17.819
Using the Reparent Blueprint like this

337
00:21:17.819 --> 00:21:23.020
Let's replace this with the player HP UI

338
00:21:23.060 --> 00:21:27.060
And if you look at the binding, it's fine

339
00:21:27.060 --> 00:21:28.579
Compile it

340
00:21:28.579 --> 00:21:33.469
If you run it again, you can see that the UI comes out well

341
00:21:38.619 --> 00:21:42.459
And if you look at it, Enemy doesn't attack repeatedly

342
00:21:42.459 --> 00:21:44.020
Only does it once

343
00:21:44.020 --> 00:21:48.699
I think there was something we missed while working on this as well

344
00:21:48.699 --> 00:21:53.660
If you go to Enemy FSM and look here

345
00:21:53.660 --> 00:21:55.140
It looks like this is here

346
00:21:55.140 --> 00:21:57.459
When the attack movement is over

347
00:21:57.459 --> 00:21:59.780
You have to retry the attack

348
00:21:59.780 --> 00:22:03.180
But in this case, you have to do true to attack

349
00:22:03.180 --> 00:22:05.420
When you do False, it means wait and not attack anymore

350
00:22:05.420 --> 00:22:06.699
It means like that

351
00:22:06.699 --> 00:22:08.459
Now I have to attack again

352
00:22:08.459 --> 00:22:11.579
So I think I'll have to change it to true

353
00:22:11.579 --> 00:22:15.310
Then compile it again

354
00:22:22.660 --> 00:22:26.660
Run it, and take a closer look

355
00:22:26.660 --> 00:22:29.140
Now you can see that it's attacking repeatedly

356
00:22:29.140 --> 00:22:33.459
And when it runs away, it chases and attacks again

357
00:22:33.459 --> 00:22:35.819
Now it seems to be behaving normally

358
00:22:35.819 --> 00:22:39.339
Then, the Enemy should attack the player

359
00:22:39.339 --> 00:22:41.859
We need to handle shooting

360
00:22:41.859 --> 00:22:45.300
So, on the main character

361
00:22:45.300 --> 00:22:49.099
We need to create a function that shoots

362
00:22:49.099 --> 00:22:56.579
So, here, I will create a function called void TakeDamage

363
00:22:56.579 --> 00:22:59.500
Yes, like this

364
00:22:59.500 --> 00:23:02.420
Let's say On Take

365
00:23:02.420 --> 00:23:04.939
OnMyTake like this

366
00:23:04.939 --> 00:23:08.459
OnMyTakeDamage

367
00:23:08.459 --> 00:23:11.099
For now, we will only receive 1 point of damage

368
00:23:11.099 --> 00:23:15.560
In this way, the implementation department can be created like this

369
00:23:16.660 --> 00:23:22.099
Now we have to implement it

370
00:23:22.099 --> 00:23:23.819
Come this way

371
00:23:23.819 --> 00:23:31.420
First, I want to decrease my Hp by 1

372
00:23:31.420 --> 00:23:37.219
If health is below 0

373
00:23:37.219 --> 00:23:40.780
I want to call the game over

374
00:23:40.780 --> 00:23:42.180
You have to do it like this

375
00:23:42.180 --> 00:23:45.939
If you reduce this, the UI should also do the same

376
00:23:45.939 --> 00:23:49.619
I want to reflect this in the UI as well

377
00:23:49.619 --> 00:23:51.739
I want to do something like this

378
00:23:51.739 --> 00:23:53.380
I'll try them one by one

379
00:23:53.380 --> 00:23:55.140
Let's reduce Hp first

380
00:23:55.140 --> 00:24:00.500
Stamina decreases by one HP

381
00:24:00.500 --> 00:24:05.140
This is how it is reflected in the UI

382
00:24:05.140 --> 00:24:06.819
HpUI

383
00:24:06.819 --> 00:24:10.180
Here, you can see SetHP

384
00:24:10.180 --> 00:24:14.739
I think it would be a good idea to add HP and maxHP here

385
00:24:14.739 --> 00:24:16.420
And, if

386
00:24:16.420 --> 00:24:21.020
If that HP is below 0

387
00:24:21.020 --> 00:24:25.339
Then I want to process the game over

388
00:24:25.339 --> 00:24:29.140
First of all, the game over-processing will be paused

389
00:24:29.140 --> 00:24:33.859
Then, we will create a UI and display it on the screen

390
00:24:33.859 --> 00:24:36.939
So, to handle this to pause

391
00:24:36.939 --> 00:24:38.939
We need a player controller

392
00:24:38.939 --> 00:24:45.819
So, I will bring auto pc from Getworld

393
00:24:45.819 --> 00:24:53.619
Bring GetFirstPlayerController here

394
00:24:53.619 --> 00:24:56.180
And with the PlayerController

395
00:24:56.180 --> 00:24:59.089
I will do SetPause

396
00:25:03.939 --> 00:25:07.619
We did it briefly when we were shooting

397
00:25:07.619 --> 00:25:09.060
But there is a concept called input mode

398
00:25:09.060 --> 00:25:13.219
You can control the mouse cursor to show or hide

399
00:25:13.219 --> 00:25:15.060
I think we need some of that here, too

400
00:25:15.060 --> 00:25:19.660
In case the game is over, the mouse should look like this

401
00:25:19.660 --> 00:25:23.380
So, shall we handle it here for now?

402
00:25:23.380 --> 00:25:29.219
Set true in SetShowMouseCursor on PlayerController

403
00:25:29.219 --> 00:25:34.780
Next, set the input mode of the PlayerController

404
00:25:34.780 --> 00:25:40.180
SetInputMode

405
00:25:40.180 --> 00:25:48.579
Let's do FInputModeUIOnly

406
00:25:48.579 --> 00:25:51.979
Then, on the contrary, when you first start the game

407
00:25:51.979 --> 00:25:55.900
You should do all of this in reverse

408
00:25:55.900 --> 00:25:57.900
And here it is, game over

409
00:25:57.900 --> 00:26:09.260
Here, I want to create the Game Over UI and display it on the screen

410
00:26:09.260 --> 00:26:11.180
Now, I think we should do this

411
00:26:11.180 --> 00:26:15.939
First, I'll do this in reverse, set it to the current state

412
00:26:15.939 --> 00:26:17.900
Then do additional work

413
00:26:17.900 --> 00:26:21.579
If you come over here, there is a BeginPlay

414
00:26:21.579 --> 00:26:25.020
BeginPlay already imports the PlayerController like this

415
00:26:25.020 --> 00:26:27.900
Let us handle it together here

416
00:26:27.900 --> 00:26:32.060
Then, if you paste it here like this

417
00:26:32.060 --> 00:26:34.500
You don’t have to bring it back

418
00:26:34.500 --> 00:26:36.180
After bringing it in like this

419
00:26:36.180 --> 00:26:38.540
I'm not going to pose

420
00:26:38.540 --> 00:26:41.900
False

421
00:26:41.900 --> 00:26:46.540
After that, I will make cursor invisible

422
00:26:46.540 --> 00:26:50.020
And I'm going to do this as a GameOnly

423
00:26:50.020 --> 00:26:53.380
So, when you first start it, it goes well

424
00:26:53.380 --> 00:26:56.339
But when the game is over, it changes to UI only

425
00:26:56.339 --> 00:27:00.579
And now, if you restart from there, it will be called again

426
00:27:00.579 --> 00:27:05.480
Then, we will set it up again and configure it with that structure

427
00:27:05.527 --> 00:27:09.627
Game Over Processing

428
00:27:10.180 --> 00:27:14.660
We need to configure the GameOver UI before it appears

429
00:27:14.660 --> 00:27:16.619
We need to create a GameOver UI

430
00:27:16.619 --> 00:27:18.380
So, I'll come to the header

431
00:27:18.380 --> 00:27:23.219
And create another Game Over UI in the same format

432
00:27:23.219 --> 00:27:26.500
So, let's call this the GameOverFactory

433
00:27:33.750 --> 00:27:36.819
Let's create a GameOverUIFactory like this

434
00:27:36.819 --> 00:27:40.260
And we'll come and create it here

435
00:27:40.260 --> 00:27:44.619
Add Create Widget here as well

436
00:27:44.619 --> 00:27:47.140
Add Getworld

437
00:27:47.140 --> 00:27:51.380
Then add GameOverUIFactory here

438
00:27:51.380 --> 00:27:54.979
I'll do auto here and handle the UI

439
00:27:54.979 --> 00:27:59.780
First of all, I'm going to try handling buttons in Blueprint this time

440
00:27:59.780 --> 00:28:03.859
After creating the UI like this, you should attach it to the viewport

441
00:28:03.859 --> 00:28:11.579
In the UI, add AddToViewport like this

442
00:28:11.579 --> 00:28:14.660
Then, let's go back here

443
00:28:14.660 --> 00:28:16.500
And create the Game Over UI

444
00:28:16.500 --> 00:28:20.699
At User Interface, choose Widget Blueprint

445
00:28:20.699 --> 00:28:24.819
Let’s call it User Widget

446
00:28:24.819 --> 00:28:29.819
And call it WBP_GameOver

447
00:28:29.819 --> 00:28:32.219
We will configure it like this

448
00:28:32.219 --> 00:28:34.900
Put a Canvas Panel here

449
00:28:34.900 --> 00:28:37.500
And then add some text

450
00:28:37.500 --> 00:28:40.979
So, I'm going to base this on the center as well

451
00:28:40.979 --> 00:28:42.660
Enter some text

452
00:28:42.660 --> 00:28:45.110
I'll say GameOver

453
00:28:49.260 --> 00:28:52.660
And set the font size around 150

454
00:28:52.660 --> 00:28:56.699
Adjust the fit at Size to Content

455
00:28:56.699 --> 00:29:02.020
First, to place this in the center, we will set it to 0.5

456
00:29:02.020 --> 00:29:05.260
Then place it in the center like this

457
00:29:05.260 --> 00:29:08.730
And for this, we will call it 0

458
00:29:11.380 --> 00:29:13.750
Raise it up a little bit

459
00:29:16.900 --> 00:29:19.619
Set the color you want

460
00:29:19.619 --> 00:29:25.219
Since it's game over, I'll use a slightly yellow color

461
00:29:25.219 --> 00:29:27.339
And you can make the button like this

462
00:29:27.339 --> 00:29:31.660
I'm going to put a button here

463
00:29:31.660 --> 00:29:34.660
I'm going to put it a little bit bigger like this

464
00:29:34.660 --> 00:29:37.289
Place this in the center

465
00:29:41.939 --> 00:29:43.140
And also add text

466
00:29:43.140 --> 00:29:46.860
This will now be called a Restart

467
00:29:50.060 --> 00:29:52.380
I'll call this Restart

468
00:29:52.380 --> 00:29:54.900
Restart

469
00:29:58.900 --> 00:30:01.660
I will write it in large letters

470
00:30:01.660 --> 00:30:03.300
Then we'll have to make another one

471
00:30:03.300 --> 00:30:09.660
Press Ctrl D to end this

472
00:30:09.660 --> 00:30:12.439
I'll give it a name like this

473
00:30:19.939 --> 00:30:22.300
Configure it like thi

474
00:30:22.300 --> 00:30:26.500
This is Restart

475
00:30:26.500 --> 00:30:29.339
And this is Quit

476
00:30:29.339 --> 00:30:31.180
I'm also going to install a background

477
00:30:31.180 --> 00:30:33.579
There's something called a blur

478
00:30:33.579 --> 00:30:35.579
It's called Background Blur

479
00:30:35.579 --> 00:30:36.699
It's written like this

480
00:30:36.699 --> 00:30:39.780
After adding the blur like this

481
00:30:39.780 --> 00:30:43.130
I will place it at the top

482
00:30:44.780 --> 00:30:48.459
And set the whole thing

483
00:30:48.459 --> 00:30:53.099
If you set this to 0, it fills up completely

484
00:30:53.099 --> 00:30:55.060
Here is the Blur Strength

485
00:30:55.060 --> 00:30:59.420
If you increase the value like this, the back becomes blurry like this

486
00:30:59.459 --> 00:31:01.780
If you increase it too much, it will become too blurry

487
00:31:01.780 --> 00:31:06.579
So as an appropriate value, I will only add about 5

488
00:31:06.579 --> 00:31:08.819
I think 5 is a bit high too

489
00:31:08.819 --> 00:31:12.739
This blur is an image pixel

490
00:31:12.739 --> 00:31:15.339
If you look at it on a screen

491
00:31:15.339 --> 00:31:16.900
Like a monitor

492
00:31:16.900 --> 00:31:21.900
Each dot is called a pixel

493
00:31:21.900 --> 00:31:25.099
It is a pixel, and this pixel information is calculated

494
00:31:25.099 --> 00:31:27.420
Then, it will be from the top left

495
00:31:27.420 --> 00:31:31.489
The pixels will end up in a square shape like this

496
00:31:33.339 --> 00:31:35.859
I wasn't good at drawing, but I'll draw again

497
00:31:35.859 --> 00:31:37.660
If there are pixels like this

498
00:31:37.660 --> 00:31:42.260
Let's say there are 9 pixels

499
00:31:42.260 --> 00:31:44.660
Currently, this pixel is being calculated

500
00:31:44.660 --> 00:31:45.859
And it goes through the order

501
00:31:45.859 --> 00:31:47.660
If it is currently being calculated

502
00:31:47.660 --> 00:31:50.219
Then how do you calculate it?

503
00:31:50.219 --> 00:31:52.660
There will be colors here

504
00:31:52.660 --> 00:31:55.219
Then, there will be RGB colors

505
00:31:55.260 --> 00:31:56.780
Red, green, blue

506
00:31:56.780 --> 00:31:59.859
Then, add all RGB colors

507
00:31:59.859 --> 00:32:02.660
So, the R colors are added together, and the G

508
00:32:02.660 --> 00:32:04.339
And B colors are added together

509
00:32:04.339 --> 00:32:07.339
Then average this with Average

510
00:32:07.339 --> 00:32:09.420
Express that color here

511
00:32:09.420 --> 00:32:13.099
In fact, rather than being exactly average, there is a concentration

512
00:32:13.099 --> 00:32:15.819
And the concentration becomes Strength

513
00:32:15.819 --> 00:32:21.500
So, it's an algorithm that becomes blurry

514
00:32:21.500 --> 00:32:23.859
So now we do a lot of blur like this

515
00:32:23.859 --> 00:32:28.339
Even in my practice, artists like this blur

516
00:32:28.339 --> 00:32:33.339
So, I remember them asking to add blur to the composition

517
00:32:33.339 --> 00:32:37.780
So, let’s configure the UI like this with blur

518
00:32:37.780 --> 00:32:43.260
And I will make it do this action when the button is pressed

519
00:32:43.260 --> 00:32:44.540
Should I give it some color?

520
00:32:44.540 --> 00:32:50.060
Since this is Restart, I'll make it a little bluish

521
00:32:50.060 --> 00:32:55.459
And do Quit with a slightly reddish color like this

522
00:32:55.459 --> 00:33:00.540
Then, we will process the button when pressed

523
00:33:00.540 --> 00:33:03.459
But if you look at it like this, you cannot insert a button event

524
00:33:03.459 --> 00:33:06.540
 If you want to add an event to this button

525
00:33:06.540 --> 00:33:08.739
You have to check is Variable here

526
00:33:08.739 --> 00:33:14.020
You must check this before you can add an event like this

527
00:33:14.020 --> 00:33:16.180
This is also the same

528
00:33:16.180 --> 00:33:18.660
Then, let me add them one by one

529
00:33:18.660 --> 00:33:20.579
This happens when you click

530
00:33:20.579 --> 00:33:23.699
If you go to design, select quit

531
00:33:23.699 --> 00:33:30.300
On Click, then the event will be arranged like this

532
00:33:30.300 --> 00:33:33.099
So, let's try restarting here first

533
00:33:33.099 --> 00:33:39.979
Restart will open the current level again by doing an open level

534
00:33:39.979 --> 00:33:41.380
Then, you need to enter a name here

535
00:33:41.380 --> 00:33:46.819
And the name, Current Level Name

536
00:33:46.819 --> 00:33:49.739
If you look at it this way, there is a node like this

537
00:33:49.739 --> 00:33:52.859
You can bring Get Current Level Name

538
00:33:52.859 --> 00:33:55.060
If you put this name here

539
00:33:55.060 --> 00:33:57.459
You will get a node that is converted like this

540
00:33:57.459 --> 00:34:01.509
This is FString, and by changing to FName

541
00:34:01.509 --> 00:34:03.380
You can put it like this

542
00:34:03.380 --> 00:34:04.540
Then I'll try to end it

543
00:34:04.540 --> 00:34:09.699
For Quit, when you search quit, there is Quit Game

544
00:34:09.699 --> 00:34:11.500
Click this

545
00:34:11.500 --> 00:34:13.659
You don't have to touch anything here

546
00:34:13.659 --> 00:34:15.260
Because we will quit it

547
00:34:15.260 --> 00:34:17.939
I explained this once last time

548
00:34:17.939 --> 00:34:20.979
So I'll structure it like this

549
00:34:20.979 --> 00:34:26.979
Then, we must arrange it so the entire UI appears on the player side

550
00:34:26.979 --> 00:34:30.579
Compile it like this

551
00:34:36.979 --> 00:34:41.540
I made it like this and attached it while playing the game

552
00:34:41.540 --> 00:34:43.820
In the Player

553
00:34:43.820 --> 00:34:46.780
This is not it, the main character

554
00:34:46.780 --> 00:34:49.780
You can see it at the very bottom of the Player

555
00:34:49.780 --> 00:34:55.330
In addition, we will arrange the Game Over UI like this

556
00:34:58.780 --> 00:35:02.340
Then, if you run it, it will look like this

557
00:35:02.340 --> 00:35:04.659
When Enemy hits the Player

558
00:35:04.659 --> 00:35:08.060
This has to be processed

559
00:35:08.060 --> 00:35:12.939
Then, when the Enemy hits the Player like this

560
00:35:12.939 --> 00:35:17.580
This OnMyTakeDamage function will be called

561
00:35:17.580 --> 00:35:19.780
To handle this

562
00:35:19.780 --> 00:35:22.260
Go to FSM

563
00:35:22.260 --> 00:35:25.020
If you look up from here, there will be a hit

564
00:35:25.020 --> 00:35:26.219
It's right above

565
00:35:26.219 --> 00:35:28.500
We only output logs in Hit

566
00:35:28.500 --> 00:35:30.899
But here we are now the main character target

567
00:35:30.899 --> 00:35:35.459
What is Target's current data usage?

568
00:35:35.459 --> 00:35:38.340
Since I'm an ATPS player, I think I can use it immediately

569
00:35:38.340 --> 00:35:45.739
Here, we will call the OnMyTakeDamage function like this

570
00:35:45.739 --> 00:35:49.670
Save and compile again

571
00:35:55.820 --> 00:35:57.929
Let me give it a try

572
00:36:02.379 --> 00:36:04.899
Then, a lot of Damage is done

573
00:36:04.899 --> 00:36:07.979
And show that the white color follows along

574
00:36:07.979 --> 00:36:11.379
When the game is over, it becomes blurred like this

575
00:36:11.379 --> 00:36:13.419
And the UI appears on the screen

576
00:36:13.419 --> 00:36:16.910
You can restart again by pressing Restart

577
00:36:19.260 --> 00:36:23.139
In the same way

578
00:36:23.139 --> 00:36:25.659
It can also be quitted

579
00:36:25.659 --> 00:36:28.540
Then, the Game Over UI that we just made

580
00:36:28.540 --> 00:36:33.379
We will recreate in C++, process it, and finish it

581
00:36:33.379 --> 00:36:36.580
On Tools

582
00:36:36.580 --> 00:36:43.139
I will inherit the User Widget

583
00:36:43.139 --> 00:36:44.739
Like this

584
00:36:44.739 --> 00:36:46.060
Next

585
00:36:46.060 --> 00:36:52.300
This time, I will call it Game Over UI

586
00:36:59.100 --> 00:37:01.860
It's configured

587
00:37:01.860 --> 00:37:06.860
We'll remove the existing blueprint content

588
00:37:06.860 --> 00:37:10.699
Delete this

589
00:37:10.699 --> 00:37:12.179
Go to Design

590
00:37:12.179 --> 00:37:16.340
And bind the two buttons

591
00:37:16.340 --> 00:37:17.780
Name, and Quit

592
00:37:17.780 --> 00:37:19.500
Change the sector

593
00:37:19.500 --> 00:37:21.100
Return here

594
00:37:21.100 --> 00:37:24.540
Go to the Game Over header

595
00:37:24.540 --> 00:37:25.899
Come here

596
00:37:25.899 --> 00:37:28.479
Let's call it Public

597
00:37:30.379 --> 00:37:32.980
UPROPERTY

598
00:37:38.580 --> 00:37:43.979
And EditAnywhere

599
00:37:43.979 --> 00:37:48.100
Then meta

600
00:37:48.100 --> 00:37:51.370
And do Bindwidget

601
00:37:55.620 --> 00:37:57.459
And that's a button

602
00:37:57.459 --> 00:38:03.260
class UButton*

603
00:38:03.260 --> 00:38:04.540
Then, the names must be the same

604
00:38:04.540 --> 00:38:08.340
ButtonRestart

605
00:38:08.340 --> 00:38:12.139
Make another one just like that

606
00:38:12.139 --> 00:38:15.139
ButtonQuit

607
00:38:15.139 --> 00:38:16.899
Please handle it like this

608
00:38:16.899 --> 00:38:19.820
Then you have to connect this to the button

609
00:38:19.820 --> 00:38:21.780
Then, there should be two functions

610
00:38:21.780 --> 00:38:24.139
So, two functions

611
00:38:24.139 --> 00:38:30.379
void OnClick

612
00:38:30.379 --> 00:38:35.500
OnClickRestart

613
00:38:35.500 --> 00:38:38.620
This always requires UFUNCTION

614
00:38:38.620 --> 00:38:42.139
Because you're going to bind it like this

615
00:38:42.139 --> 00:38:45.580
By doing AddDynamic, at the delegate

616
00:38:45.580 --> 00:38:47.219
I will register this

617
00:38:47.219 --> 00:38:50.899
So, you have to write UFUNCTION macro

618
00:38:50.899 --> 00:38:53.979
If you don't do that, the call won't work properly

619
00:38:53.979 --> 00:38:57.580
Write UFUNCTION as well

620
00:38:57.580 --> 00:39:02.939
void OnclickQuit

621
00:39:02.939 --> 00:39:04.659
I will make it like this

622
00:39:04.659 --> 00:39:07.419
Now that we've created the button and function

623
00:39:07.419 --> 00:39:10.419
There should be a point where we can connect them

624
00:39:10.419 --> 00:39:12.300
So, when this UI was made

625
00:39:12.300 --> 00:39:20.899
At virtual void NativeConstruct override function

626
00:39:20.899 --> 00:39:23.699
Do you remember we handled it?

627
00:39:23.699 --> 00:39:27.580
First, let's give the override keyword

628
00:39:27.580 --> 00:39:29.540
And Alt Enter

629
00:39:29.540 --> 00:39:35.100
To make implementation parts like this

630
00:39:35.100 --> 00:39:36.020
Then

631
00:39:36.020 --> 00:39:39.739
I will come to this function and connect it

632
00:39:39.739 --> 00:39:47.860
Here, we want to connect the button to a function

633
00:39:47.860 --> 00:39:49.410
Button's function

634
00:39:49.410 --> 00:39:53.139
I want to connect the button's function

635
00:39:53.139 --> 00:39:54.620
You should write like this

636
00:39:54.620 --> 00:39:59.340
Then, there is a button restart

637
00:39:59.340 --> 00:40:02.060
And Add Dynamic, oh it's not it

638
00:40:02.060 --> 00:40:03.459
If you look here, there is Onclick

639
00:40:03.459 --> 00:40:09.379
Write Onclicked.AddDynamic

640
00:40:09.379 --> 00:40:12.060
And put this

641
00:40:12.060 --> 00:40:14.260
Then, in the function name part

642
00:40:14.260 --> 00:40:18.219
We just have to put the address of the function we want to call like this

643
00:40:18.219 --> 00:40:21.860
Since it is a Restart, I will connect this function

644
00:40:21.860 --> 00:40:24.540
This is called a Restart

645
00:40:24.540 --> 00:40:28.780
To use this, you must add a header called button

646
00:40:28.780 --> 00:40:32.459
I'll edit this a little bit like this

647
00:40:32.459 --> 00:40:38.060
You can write it like this and do it like this

648
00:40:38.060 --> 00:40:41.060
Then, make the same copy

649
00:40:41.060 --> 00:40:44.199
Connect the Quit in the same way

650
00:40:46.699 --> 00:40:49.860
Connect OnClickQuit like this

651
00:40:49.860 --> 00:40:53.020
Next, there is Restart and Quit

652
00:40:53.020 --> 00:40:57.300
We saw this last time, but we deleted it here

653
00:40:57.300 --> 00:41:02.020
But if you double-click here, it will look like this as a symbol

654
00:41:02.020 --> 00:41:04.939
There is also an Open Level

655
00:41:04.939 --> 00:41:07.219
There's this one too, it's all there

656
00:41:07.219 --> 00:41:09.699
So, I think we can use these functions

657
00:41:09.699 --> 00:41:14.340
In cases such as termination, you may want to use this function

658
00:41:14.340 --> 00:41:16.459
In the Kismet system library

659
00:41:16.459 --> 00:41:18.139
Shall we try this first?

660
00:41:18.139 --> 00:41:24.060
If you put it like this, it will look like this

661
00:41:24.060 --> 00:41:28.739
You also need to add a header like this

662
00:41:28.739 --> 00:41:32.659
You can do it starting with Kismet

663
00:41:32.659 --> 00:41:37.969
And then we're going to put Get world here

664
00:41:45.219 --> 00:41:47.780
And put Getworld

665
00:41:47.780 --> 00:41:52.979
Here, bring GetFirstPlayerController

666
00:41:52.979 --> 00:41:58.220
Then, here

667
00:42:00.720 --> 00:42:05.219
You can put the end of Quit like this

668
00:42:05.219 --> 00:42:11.899
The last factor value will be like this: False

669
00:42:11.899 --> 00:42:14.100
If you do this, you can quit

670
00:42:14.100 --> 00:42:17.219
And I'll also restart it

671
00:42:17.260 --> 00:42:20.419
For Restart, when you look here, Open Level

672
00:42:20.419 --> 00:42:23.659
GamePlayStatics is used

673
00:42:23.659 --> 00:42:27.419
You can come here and use this

674
00:42:27.419 --> 00:42:30.860
To create an OpenLevel

675
00:42:30.860 --> 00:42:32.100
You can put name here

676
00:42:32.100 --> 00:42:34.739
I first wrote world context

677
00:42:34.739 --> 00:42:37.060
Put GetWorld

678
00:42:37.060 --> 00:42:39.699
And then the name

679
00:42:39.699 --> 00:42:42.379
You will also need to add a header for this as well

680
00:42:42.379 --> 00:42:48.100
This is how we add the header

681
00:42:48.100 --> 00:42:51.020
You can do this until here

682
00:42:51.020 --> 00:42:53.860
Then, I'll get the current name

683
00:42:53.860 --> 00:42:59.379
This is how you bring GetCurrentLevelName

684
00:42:59.379 --> 00:43:03.770
Put the world here

685
00:43:08.020 --> 00:43:10.899
This is string and f- name goes in

686
00:43:10.899 --> 00:43:19.300
So bring the name with Fstring like this

687
00:43:19.300 --> 00:43:24.100
Then cast it as an F-name and insert it

688
00:43:24.100 --> 00:43:26.780
Write Fname

689
00:43:26.780 --> 00:43:30.379
If you write it like this, you can enter it

690
00:43:30.379 --> 00:43:35.500
Delete this again

691
00:43:35.500 --> 00:43:36.979
And compile

692
00:43:36.979 --> 00:43:40.429
I'll turn it off and compile again

693
00:43:56.429 --> 00:44:03.060
Then, I'll run it again and see the results

694
00:44:03.060 --> 00:44:06.500
It's working well

695
00:44:06.500 --> 00:44:09.780
Game Over appears fine

696
00:44:09.780 --> 00:44:13.139
But it doesn't work

697
00:44:13.139 --> 00:44:14.500
Let's take a look for a moment

698
00:44:14.500 --> 00:44:17.260
Ah, I don’t think I changed parents again

699
00:44:17.260 --> 00:44:19.300
Here again, the parents have not been changed

700
00:44:19.300 --> 00:44:22.379
Here again, Reparent

701
00:44:22.379 --> 00:44:24.100
This is Game Over

702
00:44:24.100 --> 00:44:27.440
Change the parent with Game Over UI

703
00:44:27.440 --> 00:44:30.620
Then, it connects well

704
00:44:30.739 --> 00:44:35.749
Compile and run it again to see the results

705
00:44:41.699 --> 00:44:44.219
It restarts

706
00:44:44.219 --> 00:44:46.899
And of course, Quit works well too

707
00:44:46.899 --> 00:44:49.119
Still, I have to check

708
00:44:52.119 --> 00:44:54.219
It becomes Game Over

709
00:44:54.219 --> 00:44:58.419
And I confirmed that Quit is well working

710
00:44:58.419 --> 00:45:02.370
Let's summarize what we learned in this unit

711
00:45:02.471 --> 00:45:03.822
Player Health Management and Shooting Event
Creating HP UI

712
00:45:03.822 --> 00:45:04.982
How to implement the player's health function and display the health UI on the screen
Click and drag the Progress Bar at the top left of the camera and adjust the Percent gauge

713
00:45:04.982 --> 00:45:05.698
After overlapping two Progress Bars using Oberlay PANEL, change the names to HPBarBack and HPBar

714
00:45:05.698 --> 00:45:06.332
After declaring class UProgressBar* HPBarBack, the virtual boid NatibeTick() function is implemented

715
00:45:06.332 --> 00:45:06.933
After declaring class UProgressBar* HPBarBack, the void SetHP() function is implemented

716
00:45:06.933 --> 00:45:07.434
Configure a Lerp function to fix the alpha value

717
00:45:07.434 --> 00:45:08.357
Shooting Event

718
00:45:08.357 --> 00:45:10.457
When an enemy attacks the player, their HP is consumed and the game is paused when the HP becomes 0

719
00:45:10.457 --> 00:45:12.575
Implement Void OnMy TakeDamage() function
Reflected in UI with SetHP(HP, MaxHP)

720
00:45:12.575 --> 00:45:13.935
Game Over Process
How to display the GameOver UI widget on the screen when the game is over and have it restart or exit when you press the button

721
00:45:13.935 --> 00:45:15.685
Implement Auto ui=CreateWidget() function, and process button on Blueprint
To add Button Event, check is Variable

722
00:45:15.685 --> 00:45:17.420
Process Restart button by connecting Open Level node
Process Quit button by connecting Quit Game node