WEBVTT 1 00:00:06.252 --> 00:00:09.757 Game Advanced Alpha version 3 2 00:00:27.429 --> 00:00:28.968 Hello, everyone? 3 00:00:28.968 --> 00:00:32.409 This is Kim Hyunjin of FPS game development 4 00:00:32.409 --> 00:00:35.133 In this lecture, we will 5 00:00:35.133 --> 00:00:37.527 change the exterior of the player using Asset Store 6 00:00:37.527 --> 00:00:40.789 and apply the animation 7 00:00:40.789 --> 00:00:44.178 Also, develop the enemy physical strength UI 8 00:00:44.178 --> 00:00:47.409 Implement so that it can be represented according to the physical strength 9 00:00:47.409 --> 00:00:49.902 The damage UI for when the player is damaged 10 00:00:49.902 --> 00:00:52.909 will be developed and applied 11 00:00:53.683 --> 00:00:57.574 Application of Player Model and Animation 12 00:00:57.574 --> 00:00:59.134 Application of player model 13 00:00:59.134 --> 00:01:01.726 This time, the model of the player 14 00:01:01.726 --> 00:01:03.195 will be applied 15 00:01:06.040 --> 00:01:09.145 I will go into the Asset Store 16 00:01:09.145 --> 00:01:13.389 Select Window menu from the upper editor menu 17 00:01:13.389 --> 00:01:15.109 Choose Asset Store 18 00:01:15.109 --> 00:01:18.968 Press the search online button 19 00:01:18.968 --> 00:01:20.396 then Asset Store will open up 20 00:01:22.479 --> 00:01:26.156 Search for soldier in the search engine 21 00:01:34.139 --> 00:01:39.618 Then, filter the price into Free 22 00:01:39.618 --> 00:01:40.676 Then, the first thing that pops up is 23 00:01:40.676 --> 00:01:45.318 Low Poly Soldiers Demo asset 24 00:01:45.318 --> 00:01:48.909 Select the asset 25 00:01:48.909 --> 00:01:51.948 And press the 'add to my asset' button 26 00:01:51.948 --> 00:01:54.748 Press confirm 27 00:01:54.748 --> 00:01:57.287 Select 'open from unity' 28 00:01:57.287 --> 00:01:59.778 Select 'open from unity editor' 29 00:02:02.150 --> 00:02:03.790 In the package manager 30 00:02:03.790 --> 00:02:06.997 If Low Poly Soldiers Demo has been selected 31 00:02:06.997 --> 00:02:09.618 Please download it 32 00:02:09.618 --> 00:02:12.483 Then press the import button 33 00:02:12.483 --> 00:02:15.760 When the window pops up, press the import button in the bottom 34 00:02:15.760 --> 00:02:18.529 Add it 35 00:02:18.529 --> 00:02:23.065 If it has been added, close the package manager window 36 00:02:23.065 --> 00:02:26.720 Activate the scene window 37 00:02:26.720 --> 00:02:28.112 Below the asset folder 38 00:02:28.112 --> 00:02:30.745 A folder called Low Poly Soldiers Demo 39 00:02:30.745 --> 00:02:31.919 has been created 40 00:02:31.919 --> 00:02:36.528 If you go into the Models folder 41 00:02:36.528 --> 00:02:41.009 There is a file called Soldiers Demo 42 00:02:41.009 --> 00:02:43.549 This file should be 43 00:02:43.549 --> 00:02:46.219 dragged and dropped into the player 44 00:02:48.299 --> 00:02:52.978 For this asset, the material needs to be modified 45 00:02:52.978 --> 00:02:57.321 Looking into the folder, there is a Materials folder 46 00:02:57.321 --> 00:03:00.344 Double click on the material folder 47 00:03:00.344 --> 00:03:02.409 to go in and 48 00:03:02.409 --> 00:03:04.720 The files with blue icon 49 00:03:04.720 --> 00:03:09.329 The two files need to be selected 50 00:03:09.329 --> 00:03:13.458 In the upper left menu, Edit menu 51 00:03:13.458 --> 00:03:15.548 And then at the bottom, Rendering 52 00:03:15.548 --> 00:03:18.412 Next, Materials 53 00:03:18.412 --> 00:03:22.014 Covert Selected Built in Materials to URP 54 00:03:22.014 --> 00:03:24.178 Please select this menu 55 00:03:24.178 --> 00:03:26.587 And click on the Proceed button 56 00:03:29.040 --> 00:03:32.972 Now, I will eliminate the capsule 57 00:03:32.972 --> 00:03:35.439 After selecting player game object 58 00:03:35.439 --> 00:03:40.919 Deactivate the Mesh Renderer component from the Inspector 59 00:03:40.919 --> 00:03:43.312 Then to show that it is the front side 60 00:03:43.312 --> 00:03:46.276 I have made the eye with a cube 61 00:03:46.276 --> 00:03:50.229 But I will erase the eye 62 00:03:50.229 --> 00:03:51.992 And this soldier model 63 00:03:51.992 --> 00:03:54.322 is slightly up in the air 64 00:03:54.322 --> 00:03:56.514 After selecting soldier game object 65 00:03:56.514 --> 00:03:59.139 In the Inspector 66 00:03:59.139 --> 00:04:03.480 I will set the y value of the position into -1 67 00:04:03.480 --> 00:04:06.522 Compared to the zombie, the size 68 00:04:06.522 --> 00:04:08.292 feels a little bigger 69 00:04:08.292 --> 00:04:15.199 The scale value will be modified into 70 00:04:15.199 --> 00:04:17.964 about 0.7 71 00:04:17.964 --> 00:04:23.758 Like the Enemy zombie, the player 72 00:04:23.758 --> 00:04:26.599 has been modified into a 73 00:04:26.599 --> 00:04:28.085 human exterior instead of a capsule 74 00:04:30.312 --> 00:04:32.589 Player animation 75 00:04:32.589 --> 00:04:35.362 Now, the animation of the player 76 00:04:35.362 --> 00:04:37.005 will be applied 77 00:04:39.717 --> 00:04:41.719 In the Low Poly Soldiers Demo 78 00:04:41.719 --> 00:04:43.344 There is an animation folder 79 00:04:43.344 --> 00:04:47.465 Over here, there are 3 animations 80 00:04:47.465 --> 00:04:50.040 which are called Idle, Run, and Shoot 81 00:04:50.040 --> 00:04:52.686 I will try to apply these animations 82 00:04:55.010 --> 00:04:59.160 After selecting the Animations folder in the Assets folder 83 00:04:59.160 --> 00:05:03.399 I will create an Animator Controller 84 00:05:03.399 --> 00:05:05.816 after pressing the + button in the project 85 00:05:05.816 --> 00:05:11.539 I will select the Animator Controller menu in the middle 86 00:05:11.539 --> 00:05:18.416 I will name this as SoldiersAnim 87 00:05:18.416 --> 00:05:21.758 At first, the basic action 88 00:05:21.758 --> 00:05:24.400 demo_combat_idle animation 89 00:05:24.400 --> 00:05:27.608 will be added by dragging 90 00:05:27.608 --> 00:05:31.407 It is automatically connected in the Entry 91 00:05:31.407 --> 00:05:35.826 Then the SoldiersAnim file that has just been created 92 00:05:35.826 --> 00:05:38.341 that has been added below the player 93 00:05:38.341 --> 00:05:41.538 and attached to the soldier demo game object 94 00:05:41.538 --> 00:05:44.117 which is the Animator component 95 00:05:44.117 --> 00:05:48.420 I will put it into the Controller attribute 96 00:05:48.420 --> 00:05:51.389 Drag and then drop 97 00:05:51.389 --> 00:05:54.759 And then when moving with wasd key 98 00:05:54.759 --> 00:05:56.657 walking animation 99 00:05:56.657 --> 00:05:58.277 running animation should be operated, right? 100 00:06:00.640 --> 00:06:03.436 Below the Low Poly Soldiers Demo folder 101 00:06:03.436 --> 00:06:05.614 below the animation folder 102 00:06:05.614 --> 00:06:09.439 demo combat run animation 103 00:06:09.439 --> 00:06:12.656 should be put on to the Animator to be proceeded 104 00:06:12.656 --> 00:06:16.502 But this time, we will use Blend tree 105 00:06:16.502 --> 00:06:21.915 to apply the idle and run animation 106 00:06:21.915 --> 00:06:24.003 The animations that has been put on 107 00:06:24.003 --> 00:06:25.752 Please erase everything 108 00:06:25.752 --> 00:06:28.959 Press the right button of the mouse on to an empty space 109 00:06:28.959 --> 00:06:31.758 In the Create State menu 110 00:06:31.758 --> 00:06:33.860 bring over the mouse 111 00:06:33.860 --> 00:06:38.706 select thee From new Blend tree menu 112 00:06:38.706 --> 00:06:41.798 Let's name it Locomotion 113 00:06:45.480 --> 00:06:49.671 I will double click on the Blend tree that has been added 114 00:06:49.671 --> 00:06:54.248 Then there is a node like so 115 00:06:54.248 --> 00:06:57.596 And a Parameter has been made 116 00:06:59.913 --> 00:07:01.977 I will select this Blend tree node 117 00:07:01.977 --> 00:07:03.833 If I look at the Inspector 118 00:07:03.833 --> 00:07:06.989 there is a button to add a motion 119 00:07:06.989 --> 00:07:13.549 I will press on the + to select Add Motion Field 120 00:07:13.549 --> 00:07:15.123 Also, I will add another one 121 00:07:15.123 --> 00:07:19.488 + Add Motion Field 122 00:07:19.488 --> 00:07:24.145 For the first motion, I will put in the demo combat idle 123 00:07:24.145 --> 00:07:26.709 If I expand the file 124 00:07:26.709 --> 00:07:30.148 There is a triangle shaped file, right? 125 00:07:30.148 --> 00:07:34.457 Drag the file to put it in 126 00:07:37.389 --> 00:07:43.517 For the second motion, expand the demo combat run 127 00:07:43.517 --> 00:07:45.902 The triangle shaped file will be 128 00:07:45.902 --> 00:07:50.220 dragged and put into 129 00:07:50.220 --> 00:07:53.868 Then it will naturally become connected 130 00:07:53.868 --> 00:07:58.340 This Blend tree, according to the parameter value 131 00:07:58.340 --> 00:08:01.338 plays the role of deciding whether to do Idle animation 132 00:08:01.338 --> 00:08:06.458 of the Run animation 133 00:08:06.458 --> 00:08:08.939 For now, if this Parameter called Blend 134 00:08:08.939 --> 00:08:11.640 is close to 0, then it will be Idle 135 00:08:11.640 --> 00:08:14.195 If it is close to 1, it will be Run 136 00:08:14.195 --> 00:08:16.005 That is how it is set 137 00:08:16.005 --> 00:08:18.281 Select the Blend tree 138 00:08:18.281 --> 00:08:21.641 and in the area on the right where we added the motion 139 00:08:21.641 --> 00:08:26.021 The value is set with Treeshold 140 00:08:26.021 --> 00:08:28.660 0 for Idle and 1 for Run 141 00:08:28.660 --> 00:08:31.946 Then let's take a look with the preview 142 00:08:31.946 --> 00:08:33.574 If you look at the bottom of the Inspector 143 00:08:33.574 --> 00:08:36.639 this soldier is maintaining the basic steps 144 00:08:36.639 --> 00:08:40.019 Then there is a play button over here 145 00:08:40.019 --> 00:08:43.225 For those who can't see the screen 146 00:08:43.225 --> 00:08:44.800 it will be covered like so 147 00:08:44.800 --> 00:08:46.636 It's over here in the bottom 148 00:08:46.636 --> 00:08:48.195 you can either click on this 149 00:08:48.195 --> 00:08:49.638 or drag it up 150 00:08:49.638 --> 00:08:52.439 If you click it, this is how it's turned out 151 00:08:52.439 --> 00:08:54.324 If we play it 152 00:08:54.324 --> 00:08:59.379 It is staying still as if breathing 153 00:08:59.379 --> 00:09:01.043 In the Animator window on the left 154 00:09:01.043 --> 00:09:03.125 this Blend Parameter value 155 00:09:03.125 --> 00:09:04.504 will be dragged and modified 156 00:09:04.504 --> 00:09:07.698 Then what happens when it gets closer to 1? 157 00:09:07.698 --> 00:09:08.721 It shows the action of running, right? 158 00:09:08.721 --> 00:09:11.769 What if we bring it over to the middle? 159 00:09:11.769 --> 00:09:13.753 It shows the walking animation 160 00:09:13.753 --> 00:09:16.509 This is because 161 00:09:16.509 --> 00:09:18.856 Idle animation and Run animation is 162 00:09:18.856 --> 00:09:21.914 mixed half and half 163 00:09:21.914 --> 00:09:23.333 So using these functions 164 00:09:23.333 --> 00:09:26.747 we can make the model take the action of walking 165 00:09:26.747 --> 00:09:29.236 So when it is staying still 166 00:09:29.236 --> 00:09:31.158 we will set the 0 value over here 167 00:09:31.158 --> 00:09:32.238 to make sure it doesn't move 168 00:09:32.238 --> 00:09:33.769 once it starts to move 169 00:09:33.769 --> 00:09:36.203 Change this value to 1 170 00:09:36.203 --> 00:09:37.450 to modify it into take moving actions 171 00:09:37.450 --> 00:09:41.786 Change it to a running model 172 00:09:41.786 --> 00:09:44.735 Instead of choosing the Parameter value as Blend 173 00:09:44.735 --> 00:09:46.857 I will change it to another one 174 00:09:46.857 --> 00:09:48.602 If I click it slightly once more 175 00:09:48.602 --> 00:09:51.509 I can change the name of it 176 00:09:51.509 --> 00:09:56.200 I will say it is MoveMotion 177 00:09:56.200 --> 00:10:00.261 Then automatically, the name below the Blend tree changes 178 00:10:00.261 --> 00:10:07.015 The Parameter name on the Inspector will change as well 179 00:10:07.015 --> 00:10:09.503 Now, based on how it is moving 180 00:10:09.503 --> 00:10:11.266 the MoveMotion Parameter value 181 00:10:11.266 --> 00:10:13.599 will be modified 182 00:10:13.599 --> 00:10:17.494 Open PlayerMove script 183 00:10:17.494 --> 00:10:22.389 I will receive the Animator as a global variable 184 00:10:22.389 --> 00:10:24.128 Animator variable 185 00:10:28.069 --> 00:10:32.394 Declare the Animator which is a data type 186 00:10:32.394 --> 00:10:36.046 I will name it anim 187 00:10:36.046 --> 00:10:41.449 When starting, bring the animation component 188 00:10:45.960 --> 00:10:47.836 Hey anim, I will insert the value over here 189 00:10:47.836 --> 00:10:53.870 We have to use GetComponentinChildren 190 00:10:53.870 --> 00:10:56.400 The component we will bring is 191 00:10:56.400 --> 00:11:01.731 We will bring the Animator component 192 00:11:01.731 --> 00:11:05.729 Let's move over to Update function 193 00:11:05.729 --> 00:11:09.727 whether it is moving or not 194 00:11:09.727 --> 00:11:11.389 they way to tell this apart is 195 00:11:11.389 --> 00:11:15.936 through this dir 196 00:11:15.936 --> 00:11:19.139 If we don't press the wasd key 197 00:11:19.139 --> 00:11:21.772 the h and v value is 0 198 00:11:21.772 --> 00:11:27.059 So at first, the dir value will be 0,0,0 199 00:11:27.059 --> 00:11:30.101 That means the length of the dir is 0, right? 200 00:11:30.101 --> 00:11:33.639 It means that it is not moving 201 00:11:33.639 --> 00:11:35.765 The h has become a 1 202 00:11:35.765 --> 00:11:38.455 Then the length is not 0 anymore 203 00:11:38.455 --> 00:11:40.409 That is why we can define that 204 00:11:40.409 --> 00:11:43.418 it is moving 205 00:11:43.418 --> 00:11:50.133 Through the length of dir 206 00:11:50.133 --> 00:11:56.946 let's modify the MoveMotion value 207 00:11:56.946 --> 00:11:59.252 Hey anim, out of the functions you have 208 00:11:59.252 --> 00:12:02.719 there is a function called SetFloat 209 00:12:02.719 --> 00:12:06.680 The reason why we are using float this time is 210 00:12:06.680 --> 00:12:09.140 When we create Blend tree 211 00:12:09.140 --> 00:12:11.914 This Parameter value has been made 212 00:12:11.914 --> 00:12:15.678 This Parameter value is equal to 213 00:12:15.678 --> 00:12:19.548 what is created from Float, by pressing the + button 214 00:12:19.548 --> 00:12:21.736 So in order for this MoveMotion to be modified 215 00:12:21.736 --> 00:12:25.450 which is a Parameter value 216 00:12:25.450 --> 00:12:27.658 We have to utilize what the Animator has 217 00:12:27.658 --> 00:12:31.719 which is a function called SetFloat 218 00:12:31.719 --> 00:12:34.293 Open up brackets and the first argument value 219 00:12:34.293 --> 00:12:36.508 can use the Parameter name 220 00:12:36.508 --> 00:12:37.798 MoveMotion 221 00:12:41.840 --> 00:12:43.987 And the second argument value 222 00:12:43.987 --> 00:12:46.885 The Float value can be written 223 00:12:46.885 --> 00:12:49.519 which is named as the particular Parameter 224 00:12:49.519 --> 00:12:52.125 Now, we can insert the length of the dir 225 00:12:52.125 --> 00:12:56.128 Hey dir, out of what you have 226 00:12:56.128 --> 00:12:59.075 a value called Magnitude 227 00:12:59.075 --> 00:13:03.330 has the length of the dir 228 00:13:03.330 --> 00:13:07.592 Save it and come back to the editor 229 00:13:07.592 --> 00:13:10.328 and we will play it 230 00:13:10.328 --> 00:13:12.298 It is standing still 231 00:13:12.298 --> 00:13:14.099 It is doing the Idle animation 232 00:13:14.099 --> 00:13:18.289 I will press w to move forward 233 00:13:18.289 --> 00:13:24.081 Then we can see it doing the jumping animation 234 00:13:24.081 --> 00:13:28.211 I will explain a new function 235 00:13:28.211 --> 00:13:31.351 When we want to place this gam object 236 00:13:31.351 --> 00:13:34.509 in the middle of the scene window 237 00:13:34.509 --> 00:13:38.641 We utilized a function called Object Focusing 238 00:13:38.641 --> 00:13:43.149 If we double click in the Hierarchy window, it moves forward 239 00:13:43.149 --> 00:13:45.642 But if we move at this moment 240 00:13:45.642 --> 00:13:48.719 then it disappears 241 00:13:48.719 --> 00:13:53.417 This time, after selecting the player game object 242 00:13:53.417 --> 00:13:56.983 When we press on f while pressing the shift key 243 00:13:56.983 --> 00:13:57.758 I will try to move around 244 00:13:57.758 --> 00:14:03.743 then the scene window will place the player in the center 245 00:14:03.743 --> 00:14:07.344 and move along as well 246 00:14:07.344 --> 00:14:11.128 So if I press the wasd key 247 00:14:11.128 --> 00:14:13.900 The running animation will operate 248 00:14:13.900 --> 00:14:17.743 If I let go of the key, you can see that 249 00:14:17.743 --> 00:14:20.834 the Idle animation will be operated 250 00:14:20.834 --> 00:14:24.693 Now, I will try to adjust the location of the camera 251 00:14:24.693 --> 00:14:27.593 The CamPosition is on top of the head 252 00:14:27.593 --> 00:14:30.359 so the camera will move to the location 253 00:14:30.359 --> 00:14:33.004 and follow the player around 254 00:14:33.004 --> 00:14:37.478 After selecting the CamPosition game object 255 00:14:37.478 --> 00:14:43.372 I will try to place it in front of the eye 256 00:14:43.372 --> 00:14:45.874 Now I will play it 257 00:14:45.874 --> 00:14:48.880 You can see the gun when standing still, right? 258 00:14:48.880 --> 00:14:50.890 I will tilt the head down 259 00:14:50.890 --> 00:14:54.614 I tried to tilt down to see more of the gun 260 00:14:54.614 --> 00:14:59.159 The close part of the gun looks like a knife 261 00:14:59.159 --> 00:15:00.608 as if it has been cut 262 00:15:03.000 --> 00:15:08.840 When the camera is selected 263 00:15:08.840 --> 00:15:11.421 the area where the camera can see is marked 264 00:15:11.421 --> 00:15:14.466 with this white line 265 00:15:25.719 --> 00:15:27.509 This is called a truncated cone 266 00:15:27.509 --> 00:15:29.438 You have to be inside this area 267 00:15:29.438 --> 00:15:31.368 in order to see it 268 00:15:31.368 --> 00:15:35.330 But in this location of the camera 269 00:15:35.330 --> 00:15:40.618 This area, to the direction of the blue axis is empty 270 00:15:40.618 --> 00:15:44.854 If an object comes into this area 271 00:15:44.854 --> 00:15:46.289 it can't be seen 272 00:15:46.289 --> 00:15:50.019 So that is why this part 273 00:15:50.019 --> 00:15:53.890 looks as if it has been cut with a knife 274 00:15:53.890 --> 00:15:56.403 Therefore, from the location of the camera 275 00:15:56.403 --> 00:16:01.658 I will make sure that the area that is seen will be close 276 00:16:01.658 --> 00:16:06.554 For this option, it is below the 277 00:16:06.554 --> 00:16:08.648 camera component of the camera game object 278 00:16:08.648 --> 00:16:11.193 Below the Projection option 279 00:16:11.193 --> 00:16:14.686 Over here on the bottom, the Clipping Plane's 280 00:16:14.686 --> 00:16:17.699 value called Near should be minimized 281 00:16:20.640 --> 00:16:23.770 If I put the mouse on the Near 282 00:16:23.770 --> 00:16:26.960 In the left and right of the mouse point 283 00:16:26.960 --> 00:16:29.587 You can see the triangle shaped icon, right? 284 00:16:29.587 --> 00:16:31.785 Click the left of the mouse while in the same condition 285 00:16:31.785 --> 00:16:35.649 The value will change when it is pulled to the left 286 00:16:35.649 --> 00:16:40.202 0.01 is the minimum value 287 00:16:40.202 --> 00:16:43.697 How did it turn out once I modified it? 288 00:16:43.697 --> 00:16:48.953 The part where it looked like it was cut off 289 00:16:48.953 --> 00:16:51.529 looks normal 290 00:16:51.529 --> 00:16:54.221 from what we see 291 00:16:54.221 --> 00:16:57.514 Currently, we changed to play mode so 292 00:16:57.514 --> 00:17:01.359 We have to stop and modify the value again 293 00:17:01.359 --> 00:17:06.088 Stop and the Clipping Plane's 294 00:17:06.088 --> 00:17:08.877 Near value should be altered to 0.01 295 00:17:11.680 --> 00:17:14.272 Now the gun shooting animation 296 00:17:14.272 --> 00:17:17.399 will be applied 297 00:17:17.399 --> 00:17:19.612 Open up the Animator window 298 00:17:19.612 --> 00:17:24.649 If you can see the Locomotion Blend tree screen 299 00:17:24.649 --> 00:17:28.322 Select the Base Layer part 300 00:17:28.322 --> 00:17:33.283 and come over to the upper layer 301 00:17:33.283 --> 00:17:35.679 Over here, from what we have downloaded 302 00:17:35.679 --> 00:17:38.736 Below the Low Poly Soldiers Demo folder 303 00:17:38.736 --> 00:17:41.430 under the animation folder 304 00:17:41.430 --> 00:17:43.634 The demo combat shoot 305 00:17:43.634 --> 00:17:46.670 should be dragged and pulled upwards 306 00:17:46.670 --> 00:17:49.112 The name of the animation 307 00:17:49.112 --> 00:17:52.238 will be Attack 308 00:17:52.239 --> 00:17:54.073 and this animation 309 00:17:54.073 --> 00:17:56.344 will be connected from Any State 310 00:17:56.344 --> 00:17:59.613 Press the right mouse button in Any State 311 00:17:59.613 --> 00:18:01.371 Operate Make Transition 312 00:18:01.371 --> 00:18:05.215 and connect to Attack 313 00:18:05.215 --> 00:18:07.553 Then in order for the Attack animation 314 00:18:07.553 --> 00:18:09.373 to be executed 315 00:18:09.373 --> 00:18:13.725 I will add a trigger Parameter 316 00:18:13.725 --> 00:18:17.315 Press the + button to select the trigger 317 00:18:17.315 --> 00:18:19.019 and I will name it Attack 318 00:18:22.000 --> 00:18:24.492 Next, to get to the Attack animation 319 00:18:24.492 --> 00:18:26.724 I will select a transition and 320 00:18:26.724 --> 00:18:33.208 Press the Condition + button from the Inspector 321 00:18:33.208 --> 00:18:36.846 and modify it to Attack 322 00:18:36.846 --> 00:18:40.098 And once this Attack is over 323 00:18:40.098 --> 00:18:41.748 automatically Locomotion 324 00:18:41.748 --> 00:18:45.838 to be able to operate Idle and Run animation 325 00:18:45.838 --> 00:18:49.690 It will be connected to Blend tree 326 00:18:49.690 --> 00:18:52.643 Press the right mouse button in Attack 327 00:18:52.643 --> 00:18:54.254 Operate Make Transition 328 00:18:54.254 --> 00:18:58.129 and connect to Locomotion 329 00:18:58.129 --> 00:19:00.936 this transition does not need Condition 330 00:19:00.936 --> 00:19:03.448 It will pass over once it is finished 331 00:19:06.032 --> 00:19:09.717 And open up PlayerFire script 332 00:19:09.717 --> 00:19:14.509 Animator component is needed in this case as well 333 00:19:14.509 --> 00:19:16.424 So the variable to hold the Animator 334 00:19:16.424 --> 00:19:17.697 Animator variable 335 00:19:22.880 --> 00:19:27.148 The data type called Animator 336 00:19:27.148 --> 00:19:29.090 We could receive the anim once it is started, right? 337 00:19:29.090 --> 00:19:35.398 We receive it through anim=GetComponentinChildren function 338 00:19:35.398 --> 00:19:37.913 What component? 339 00:19:37.913 --> 00:19:39.488 The Animator component 340 00:19:42.479 --> 00:19:44.712 and coming down to the bottom 341 00:19:44.712 --> 00:19:48.715 come to FireRay function and 342 00:19:48.715 --> 00:19:51.471 press on the left mouse button 343 00:19:51.471 --> 00:19:55.459 to operate the gun shooting animation 344 00:19:55.459 --> 00:19:57.758 Only in situations where we have bumped into something 345 00:19:57.758 --> 00:20:01.075 should we operate the gun shooting animation? 346 00:20:01.075 --> 00:20:01.792 Not at all 347 00:20:01.792 --> 00:20:03.752 Although the gun might not shoot an object 348 00:20:03.752 --> 00:20:05.879 Even though it might shoot in the air 349 00:20:05.879 --> 00:20:09.027 the bullets will be fired 350 00:20:09.027 --> 00:20:13.889 So when pressing the left mouse button 351 00:20:13.889 --> 00:20:15.571 Let's check 352 00:20:15.571 --> 00:20:21.495 If the MoveMotion value is 353 00:20:24.851 --> 00:20:31.198 bigger than 0, let's exit from the function 354 00:20:33.594 --> 00:20:34.955 What does this mean? 355 00:20:34.955 --> 00:20:37.932 We will set it so that it cannot shoot when moving 356 00:20:37.932 --> 00:20:42.558 It will be set so that it can only shoot when paused 357 00:20:42.560 --> 00:20:46.223 If the MoveMotion is 0 358 00:20:46.223 --> 00:20:48.610 It will continue with the bottom 359 00:20:48.610 --> 00:20:52.164 If it does not move on 360 00:20:52.164 --> 00:20:58.389 Let's operate the Attack trigger 361 00:21:00.800 --> 00:21:03.697 if hey anim 362 00:21:05.621 --> 00:21:08.127 There is a function called GetFloat 363 00:21:10.600 --> 00:21:13.056 When we set the value of the Parameter 364 00:21:13.056 --> 00:21:14.956 We used SetFloat, right? 365 00:21:14.956 --> 00:21:18.869 In order to know what the value is 366 00:21:18.869 --> 00:21:21.699 We can utilize GetFloat 367 00:21:21.699 --> 00:21:24.508 Open the brackets and over here 368 00:21:24.508 --> 00:21:26.853 Write down the name of the Parameter 369 00:21:26.853 --> 00:21:28.228 MoveMotion 370 00:21:31.574 --> 00:21:36.359 If that value is bigger than 0 371 00:21:36.359 --> 00:21:40.530 Exit the function, return 372 00:21:40.530 --> 00:21:42.651 If this condition is not satisfied 373 00:21:42.651 --> 00:21:44.359 then it will execute the bottom part 374 00:21:44.359 --> 00:21:46.849 Let's operate the Attack trigger 375 00:21:46.849 --> 00:21:49.021 Hey anim, out of what you have 376 00:21:49.021 --> 00:21:51.820 Using the SetTrigger function 377 00:21:51.820 --> 00:21:53.391 Let's operate the trigger 378 00:21:53.391 --> 00:21:55.115 What trigger? 379 00:21:55.115 --> 00:21:56.929 The trigger called Attack 380 00:21:59.560 --> 00:22:03.343 Save it and come back to the editor 381 00:22:03.343 --> 00:22:05.829 and play it 382 00:22:05.829 --> 00:22:09.379 Let's shoot it, bang 383 00:22:09.379 --> 00:22:11.148 The gun shooting animation is being operated 384 00:22:14.040 --> 00:22:17.502 Like so, in the play 385 00:22:17.502 --> 00:22:21.616 we have applied the animation 386 00:22:21.616 --> 00:22:25.214 Let's quickly go over one more 387 00:22:25.214 --> 00:22:28.458 What we expressed with a red dot 388 00:22:28.458 --> 00:22:32.841 the Crosshair, by downloading the image 389 00:22:32.841 --> 00:22:35.760 we will change the shape of it 390 00:22:35.760 --> 00:22:41.079 If you access the URL on the sceen 391 00:22:41.079 --> 00:22:42.446 It will go to this page 392 00:22:44.485 --> 00:22:49.001 Over here, the Crosshair.png file 393 00:22:49.001 --> 00:22:52.599 download by pressing the right key 394 00:22:52.599 --> 00:22:55.916 and there is the White.png file 395 00:22:55.916 --> 00:22:59.285 Clicking on the right key, this file can also 396 00:22:59.285 --> 00:23:02.570 be downloaded 397 00:23:02.570 --> 00:23:05.933 If the download has been finished 398 00:23:05.933 --> 00:23:09.869 In the Materials folder of the Assets folder 399 00:23:09.869 --> 00:23:15.045 I will add two files by dragging 400 00:23:15.045 --> 00:23:18.055 Select the files that have been downloaded 401 00:23:18.055 --> 00:23:21.259 Drag and drop on to it 402 00:23:21.259 --> 00:23:24.817 You can see that it is being added like so 403 00:23:26.877 --> 00:23:30.446 Over here, the Crosshair file 404 00:23:30.446 --> 00:23:33.551 In the Hierarchy window below the Canvas 405 00:23:33.551 --> 00:23:37.760 attached to a game object called Crosshair 406 00:23:37.760 --> 00:23:39.622 in the image component 407 00:23:39.622 --> 00:23:42.831 I will add to the source image 408 00:23:42.831 --> 00:23:46.272 But if we try to insert by dragging it 409 00:23:46.272 --> 00:23:47.880 It won't be inserted 410 00:23:47.880 --> 00:23:53.346 We need to convert the file into Sprite form 411 00:23:53.346 --> 00:23:56.360 Select the Crosshair file 412 00:23:56.360 --> 00:23:59.347 In the Inspector, the texture type is 413 00:23:59.347 --> 00:24:02.705 currently set to default 414 00:24:02.705 --> 00:24:04.828 Click this part 415 00:24:04.828 --> 00:24:06.719 and open up the menu 416 00:24:06.719 --> 00:24:10.897 Over here, select Sprite 2D and UI 417 00:24:10.897 --> 00:24:13.044 as an option 418 00:24:13.044 --> 00:24:17.213 and if you scroll down over here 419 00:24:17.213 --> 00:24:20.335 There is an Apply button at the bottom right corner 420 00:24:20.335 --> 00:24:24.048 You have to click on the button 421 00:24:24.048 --> 00:24:26.648 And then below the Canvas 422 00:24:26.648 --> 00:24:31.249 Select the Crosshair game object once again 423 00:24:31.249 --> 00:24:34.336 Drag the Crosshair file that 424 00:24:34.336 --> 00:24:36.863 we have converted into a Sprite form 425 00:24:36.863 --> 00:24:39.146 If we insert it 426 00:24:39.146 --> 00:24:41.534 We can see that it fits perfectly 427 00:24:41.534 --> 00:24:45.540 But this screen is difficult to see 428 00:24:45.540 --> 00:24:48.004 It is because of its small size 429 00:24:48.004 --> 00:24:53.059 If you look below the image component 430 00:24:53.059 --> 00:24:55.309 There is the Set Negative Size 431 00:24:55.309 --> 00:24:58.127 If you click that button 432 00:24:58.127 --> 00:25:00.698 The size of the image will be set to its original size 433 00:25:02.920 --> 00:25:04.443 As you can see from here 434 00:25:04.443 --> 00:25:06.731 It doesn't show up in green 435 00:25:06.731 --> 00:25:08.285 but it is in a darker color 436 00:25:08.285 --> 00:25:12.599 That is because the image and the color value below 437 00:25:12.599 --> 00:25:14.748 has been combined 438 00:25:14.748 --> 00:25:17.707 So this red color 439 00:25:17.707 --> 00:25:20.698 has to be selected and converted to white 440 00:25:21.738 --> 00:25:25.323 Physical strength UI and Damage UI Development 441 00:25:25.323 --> 00:25:26.966 Physical strength UI development 442 00:25:26.966 --> 00:25:30.136 This time, the enemy physical strength UI 443 00:25:30.136 --> 00:25:33.885 will be developed 444 00:25:33.885 --> 00:25:38.436 The enemy physical strength will be on top of the zombie's head 445 00:25:41.439 --> 00:25:43.335 It will be represented with an image 446 00:25:43.335 --> 00:25:47.120 that is colored in red 447 00:25:47.120 --> 00:25:50.378 So depending on the physical strength, the red gauge 448 00:25:50.378 --> 00:25:56.359 will be developed to decrease 449 00:25:56.359 --> 00:25:59.598 This physical strength UI 450 00:25:59.598 --> 00:26:04.520 shouldn't be developed into a UI that is attached to the screen 451 00:26:04.520 --> 00:26:07.652 But should be made into a UI that is 452 00:26:07.652 --> 00:26:09.169 able to be located in the 3D space 453 00:26:11.599 --> 00:26:15.408 So I will create a Canvas 454 00:26:15.408 --> 00:26:18.959 Press the + button from the Hierarchy 455 00:26:18.959 --> 00:26:22.287 and select the Canvas of the UI 456 00:26:24.640 --> 00:26:26.817 The added Canvas will be 457 00:26:26.817 --> 00:26:32.628 named as EnemyHPBar 458 00:26:34.640 --> 00:26:38.221 And there will be a Canvas component in the Inspector 459 00:26:38.221 --> 00:26:42.060 There is a Render Mode option 460 00:26:42.060 --> 00:26:45.866 It is set in the option called screen space overlay 461 00:26:45.866 --> 00:26:48.119 Like the Crosshair, it is an option that 462 00:26:48.119 --> 00:26:51.020 allows the UI of the screen 463 00:26:51.020 --> 00:26:53.951 to be shown 464 00:26:53.951 --> 00:26:56.661 But I mentioned that it will be changed so that 465 00:26:56.661 --> 00:26:59.279 it can be shown as a 3D space, right? 466 00:26:59.279 --> 00:27:01.525 So click the menu 467 00:27:01.525 --> 00:27:07.079 and change the option to World Space 468 00:27:07.079 --> 00:27:08.852 Then, this Canvas and 469 00:27:08.852 --> 00:27:11.271 the UIs that are attached below this Canvas 470 00:27:11.271 --> 00:27:13.388 will be able to be located in the world space 471 00:27:15.479 --> 00:27:20.061 I will attach one more image over here 472 00:27:20.061 --> 00:27:25.009 Press the + button and select an image for the UI 473 00:27:25.009 --> 00:27:26.839 I will name it as Back 474 00:27:28.839 --> 00:27:31.008 And the Rect Transform's 475 00:27:31.008 --> 00:27:35.386 Pos x and Pos y value will be 0 476 00:27:37.620 --> 00:27:41.625 Now this EnemyHPBar will be 477 00:27:41.625 --> 00:27:44.412 dragged to the Enemy game object 478 00:27:44.412 --> 00:27:48.720 and made into a child like so 479 00:27:48.720 --> 00:27:53.637 Then in the EnemyHPBar Rect Transform 480 00:27:53.637 --> 00:27:56.174 position x,y,z will all be 481 00:27:56.174 --> 00:28:00.089 set to 0,0,0 482 00:28:00.089 --> 00:28:03.163 The image will be this large 483 00:28:03.163 --> 00:28:06.083 and shown in the location of the Enemy 484 00:28:06.083 --> 00:28:07.347 This is because it is too big 485 00:28:09.040 --> 00:28:11.509 Below the EnemyHPBar 486 00:28:11.509 --> 00:28:13.698 select the Back game project 487 00:28:13.698 --> 00:28:17.780 The width and height of the Rect Transform 488 00:28:17.780 --> 00:28:20.654 set the Width to 1 489 00:28:20.654 --> 00:28:24.499 The Height will be 0.3 490 00:28:24.499 --> 00:28:27.160 Then this will be the size 491 00:28:27.160 --> 00:28:30.138 This UI will need to be moved up a little higher 492 00:28:30.138 --> 00:28:33.041 Select the EnemyHPBar 493 00:28:33.041 --> 00:28:34.707 and lift it up 494 00:28:36.830 --> 00:28:39.021 Select the Back game object 495 00:28:39.021 --> 00:28:43.508 Copy it by pressing Ctrl+D 496 00:28:43.508 --> 00:28:47.063 It will be created 497 00:28:47.063 --> 00:28:49.064 in the same size and same location 498 00:28:49.064 --> 00:28:51.650 I will change the name of it 499 00:28:51.650 --> 00:28:56.581 Let's name it as HPBar 500 00:28:56.581 --> 00:28:59.008 Over here, in the source image 501 00:28:59.008 --> 00:29:02.140 this White will be inserted 502 00:29:02.140 --> 00:29:05.419 In the source image option that is in image component 503 00:29:05.419 --> 00:29:09.085 in order to insert the image 504 00:29:09.085 --> 00:29:12.029 I have mentioned that the image will need to be converted 505 00:29:12.029 --> 00:29:13.492 into a type called Sprite, right? 506 00:29:13.492 --> 00:29:17.739 So after selecting the White file 507 00:29:17.739 --> 00:29:22.154 From the Inspector, the texture type will be 508 00:29:22.154 --> 00:29:25.550 converted to Sprite 509 00:29:25.550 --> 00:29:27.657 And in the bottom 510 00:29:27.657 --> 00:29:31.210 Pressing the Apply button is a necessity 511 00:29:31.210 --> 00:29:31.868 Apply 512 00:29:33.839 --> 00:29:39.760 And then select the HPBar game object again 513 00:29:39.760 --> 00:29:41.485 Below the image component 514 00:29:41.485 --> 00:29:46.159 I will drag the source image and attach it 515 00:29:46.159 --> 00:29:49.663 When the source image is inserted 516 00:29:49.663 --> 00:29:53.960 An option called image type will be created 517 00:29:53.960 --> 00:29:56.262 Currently, it is set as simple 518 00:29:56.262 --> 00:29:59.197 We will click this and 519 00:29:59.197 --> 00:30:03.138 change it into a Fill option 520 00:30:03.138 --> 00:30:06.918 Then options like Fill Method, Fill Origin 521 00:30:06.918 --> 00:30:12.640 Fill amounts etc will be created 522 00:30:12.640 --> 00:30:15.994 Let's take a look at the basic setting 523 00:30:15.994 --> 00:30:19.110 It is set to Radial 360 524 00:30:19.110 --> 00:30:22.825 And the Origin is set as Bottom 525 00:30:22.825 --> 00:30:25.560 The Fill Amount is set to 1 526 00:30:25.560 --> 00:30:29.781 Looking at it from the back side 527 00:30:29.781 --> 00:30:32.199 I will try to reduce the Fill Amount 528 00:30:32.199 --> 00:30:34.432 Nothing looks like it has been changed 529 00:30:34.432 --> 00:30:37.910 It is because the Back and the HPBar 530 00:30:37.910 --> 00:30:39.160 is in the same color 531 00:30:39.160 --> 00:30:40.931 So after selecting HPBar 532 00:30:40.931 --> 00:30:44.839 We need to change the color value to red 533 00:30:44.839 --> 00:30:48.767 Then I will reduce the Fill Amount once again 534 00:30:48.767 --> 00:30:53.806 Then 360 degrees from the bottom 535 00:30:56.199 --> 00:30:57.388 The red has been eliminate, right? 536 00:30:59.289 --> 00:31:02.829 If it is set as 1, more and more 537 00:31:02.829 --> 00:31:04.639 we can see that it gets filled up 538 00:31:06.959 --> 00:31:12.988 I will change the Radial 360 into Vertical 539 00:31:12.988 --> 00:31:15.826 And then if I control the Fill Amount once more 540 00:31:15.826 --> 00:31:17.868 It will reduce from the top to the bottom 541 00:31:17.868 --> 00:31:22.330 and gets filled up from the bottom to the top 542 00:31:22.330 --> 00:31:24.445 Now, what would happen if this set as Bottom 543 00:31:24.445 --> 00:31:25.738 is changed to Top 544 00:31:27.959 --> 00:31:30.598 It reduces from the bottom to the top 545 00:31:30.598 --> 00:31:35.168 and gets filled up from the top to the bottom 546 00:31:35.168 --> 00:31:38.381 We will operate with these actions left and right 547 00:31:38.381 --> 00:31:42.130 That's why the Fill Method 548 00:31:42.130 --> 00:31:43.800 needs to be set to Horizontal 549 00:31:43.800 --> 00:31:46.353 so that it would be filled up from the left to the right 550 00:31:46.353 --> 00:31:49.489 and be reduced from the right to the left 551 00:31:49.489 --> 00:31:51.622 The Fill Origin will still be set as Left 552 00:31:51.622 --> 00:31:53.427 So it will reduce like so 553 00:31:53.427 --> 00:31:56.498 and also be filled up like so 554 00:31:58.280 --> 00:32:00.914 Now, if the player 555 00:32:00.914 --> 00:32:06.269 has hit the zombie with the left button of the mouse 556 00:32:06.269 --> 00:32:09.640 Using this image component 557 00:32:09.640 --> 00:32:12.510 that the HPBar game object has 558 00:32:12.510 --> 00:32:17.349 By reducing the Fill Amount value that image component has 559 00:32:17.349 --> 00:32:21.827 the Hp reduces 560 00:32:21.827 --> 00:32:23.930 can be expressed visually 561 00:32:26.880 --> 00:32:28.949 The PlayerFire script 562 00:32:28.949 --> 00:32:32.750 Double click to open it up again 563 00:32:32.750 --> 00:32:35.452 When the left button of the mouse is pressed 564 00:32:35.452 --> 00:32:38.599 and it hit the enemy 565 00:32:38.599 --> 00:32:43.485 bring the EnemyFSM component and 566 00:32:43.485 --> 00:32:46.109 Out of what FSM component has 567 00:32:46.109 --> 00:32:51.560 operate the function called HitEnemy 568 00:32:51.560 --> 00:32:54.929 and it passes over the damage value 569 00:32:54.929 --> 00:32:57.431 So looking at the HitEnemy function 570 00:32:57.431 --> 00:33:00.278 of the EnemyFSM 571 00:33:00.278 --> 00:33:04.741 It is reducing the current HP value 572 00:33:04.741 --> 00:33:07.660 Using this value 573 00:33:07.660 --> 00:33:11.095 the UI that has just been created 574 00:33:11.095 --> 00:33:17.649 the Fill Amount value in the image will be altered 575 00:33:17.649 --> 00:33:20.506 The current HP value 576 00:33:22.959 --> 00:33:31.198 will be altered to a value in between 0 and 1 577 00:33:35.778 --> 00:33:42.077 The altered value is set as 578 00:33:44.420 --> 00:33:51.669 the Fill Amount of HP UI 579 00:33:55.233 --> 00:33:58.333 In order to set the value of the UI 580 00:33:58.333 --> 00:34:00.820 we need an image component 581 00:34:00.820 --> 00:34:04.035 So we will create a global variable on the top 582 00:34:06.959 --> 00:34:10.934 HPBar Image 583 00:34:12.468 --> 00:34:15.471 The Public data type should be the image 584 00:34:15.471 --> 00:34:18.959 There are three names with the word image 585 00:34:18.959 --> 00:34:22.909 For this case, the image that is in 586 00:34:22.909 --> 00:34:24.959 UnityEngine.UI should be utilized 587 00:34:24.959 --> 00:34:26.980 It should be added like so 588 00:34:26.980 --> 00:34:29.408 Then automatically on the top 589 00:34:29.408 --> 00:34:33.280 you can see that UnityEngine.UI has been added 590 00:34:33.280 --> 00:34:38.446 The code should be added 591 00:34:38.446 --> 00:34:42.856 And we will name it as hpbar 592 00:34:42.856 --> 00:34:45.312 After finishing the code 593 00:34:45.312 --> 00:34:49.120 we will drag and drop to the variable in order to add 594 00:34:49.120 --> 00:34:51.402 Coming back to the bottom 595 00:34:51.402 --> 00:34:54.259 We arrive at the HitEnemy function 596 00:34:56.120 --> 00:34:59.478 The value that is currently in CurrHP value 597 00:34:59.478 --> 00:35:04.610 will be altered to a value in between 0 and 1 598 00:35:04.610 --> 00:35:08.337 The maximum value of the current CurrHP will be 100 599 00:35:08.337 --> 00:35:15.570 We have inserted 100 after creating a variable called MaxHP 600 00:35:15.570 --> 00:35:19.006 When starting, in the CurrHP value 601 00:35:19.006 --> 00:35:21.729 we have inserted this value 602 00:35:21.729 --> 00:35:26.739 That is why the minimum value of the CurrHP is 0 603 00:35:26.749 --> 00:35:29.879 And the maximum value will be 100 604 00:35:29.879 --> 00:35:35.288 We should make the minimum value into 0 605 00:35:35.288 --> 00:35:38.520 and the maximum value into 1 606 00:35:38.520 --> 00:35:39.928 So what should we do with this value? 607 00:35:39.928 --> 00:35:42.959 It needs to be inserted in Fill Amount 608 00:35:42.959 --> 00:35:46.569 Let's say the CurrHP has been set as 50 609 00:35:46.569 --> 00:35:52.153 Then, to make the value in between 0 and 1 610 00:35:52.153 --> 00:35:56.399 The value should be 0.5 611 00:35:56.399 --> 00:35:59.646 In order to do this calculation 612 00:35:59.646 --> 00:36:04.986 CurrHP should be divided by 613 00:36:04.986 --> 00:36:10.350 the MaxHP value 614 00:36:10.350 --> 00:36:13.570 Since MaxHP is 100 615 00:36:13.570 --> 00:36:16.388 If the current HP is 50 616 00:36:16.388 --> 00:36:17.180 What happens? 617 00:36:17.180 --> 00:36:18.879 A value called 0.5 will come up 618 00:36:21.150 --> 00:36:24.042 What if this value is 0? 619 00:36:24.042 --> 00:36:25.722 0 comes up 620 00:36:25.722 --> 00:36:29.399 and what happens if this value is 100? 621 00:36:29.399 --> 00:36:30.088 Then it will be 1 622 00:36:32.320 --> 00:36:36.121 So with the divided value 623 00:36:36.121 --> 00:36:40.546 We will change the value to in between 0 and 1 624 00:36:42.439 --> 00:36:53.139 float Ratio is CurrHP divided by MaxHP 625 00:36:53.139 --> 00:36:56.639 This value is HPBar 626 00:36:56.639 --> 00:37:00.487 It means the Fill Amount value that you have 627 00:37:00.487 --> 00:37:04.000 will be set as Ratio 628 00:37:04.000 --> 00:37:06.347 Save it and come back to the editor 629 00:37:08.760 --> 00:37:11.503 Select Enemy game object and 630 00:37:11.503 --> 00:37:16.790 in the HPBar option of EnemyFSM 631 00:37:16.790 --> 00:37:22.347 The HPBar game object that we have added 632 00:37:22.347 --> 00:37:25.498 should be dragged and inserted 633 00:37:25.498 --> 00:37:26.894 then we will play it 634 00:37:34.191 --> 00:37:38.455 As you can see, if we shoot 635 00:37:38.455 --> 00:37:41.609 you can see the HPBar decreasing 636 00:37:43.879 --> 00:37:46.829 But there is one odd part 637 00:37:46.829 --> 00:37:47.966 I will play and 638 00:37:50.807 --> 00:37:54.383 stand next to the zombie 639 00:37:54.383 --> 00:37:58.939 Then you can't see the HPBar clearly 640 00:37:58.939 --> 00:38:02.554 If I shoot, the HPBar reduces 641 00:38:02.554 --> 00:38:05.409 but you can't see it clearly in the game window 642 00:38:05.409 --> 00:38:08.170 So, UI like this 643 00:38:08.170 --> 00:38:11.621 It should look in the direction that 644 00:38:11.621 --> 00:38:15.199 the player is currently looking into 645 00:38:15.199 --> 00:38:18.879 I will try to change it manually 646 00:38:18.879 --> 00:38:21.733 Select EnemyHPBar and 647 00:38:21.733 --> 00:38:23.379 I will try to rotate it 648 00:38:26.320 --> 00:38:27.577 It will turn out to be in this shape 649 00:38:31.280 --> 00:38:34.310 And if the player moves like so 650 00:38:34.310 --> 00:38:35.469 What should we do again? 651 00:38:38.600 --> 00:38:43.949 EnemyHPBar should rotate like so 652 00:38:47.226 --> 00:38:51.770 In order to make the EnemyHPBar move like so 653 00:38:51.770 --> 00:38:55.199 The direction that the camera is currently looking into, must be this way 654 00:38:57.199 --> 00:39:01.248 If this direction and the EnemyHPBar's 655 00:39:01.248 --> 00:39:04.959 front direction is identical 656 00:39:04.959 --> 00:39:09.784 The HPBar will maintain to be seen in the 657 00:39:09.784 --> 00:39:15.698 direction that the player is looking at 658 00:39:15.698 --> 00:39:20.238 This operating function is called Billboard 659 00:39:27.520 --> 00:39:31.292 I will make a script and apply it 660 00:39:31.292 --> 00:39:33.817 Select the script folder and 661 00:39:33.817 --> 00:39:37.439 Press the + button to create C#Script 662 00:39:37.439 --> 00:39:39.067 I will name it as Billboard 663 00:39:44.538 --> 00:39:49.137 I will insert into the EnemyHPBar by drag and drop 664 00:39:52.959 --> 00:39:55.218 Make sure to check that it has been assembled 665 00:39:55.218 --> 00:39:59.360 Then open up the Billboard script 666 00:39:59.360 --> 00:40:02.341 For this case, just set my front direction 667 00:40:02.341 --> 00:40:05.558 as the front direction of the camera 668 00:40:07.608 --> 00:40:09.048 My front camera 669 00:40:11.280 --> 00:40:17.728 will be set as the front direction of the camera 670 00:40:20.760 --> 00:40:24.435 Hey transform, the Forward value that you have 671 00:40:24.435 --> 00:40:25.189 What should it be set to? 672 00:40:28.199 --> 00:40:29.344 Hey maincamera 673 00:40:29.344 --> 00:40:33.490 It will be set as the forward value of your transform 674 00:40:33.490 --> 00:40:36.919 This one line will finish everything 675 00:40:36.919 --> 00:40:38.355 I will play it again 676 00:40:40.270 --> 00:40:44.799 then depending on the movement of the player 677 00:40:44.799 --> 00:40:46.990 The viewpoint of the camera will change 678 00:40:46.990 --> 00:40:49.434 So the HPBar above the enemy 679 00:40:49.434 --> 00:40:50.985 can be seen rotating 680 00:40:50.985 --> 00:40:56.709 So, the HPBar will be seen clearly in any situation 681 00:40:56.709 --> 00:41:00.857 Now when the player has been 682 00:41:00.857 --> 00:41:03.397 attacked by the enemy 683 00:41:03.397 --> 00:41:06.013 I will develop a damage UI 684 00:41:06.013 --> 00:41:08.741 that makes the screen flicker in red 685 00:41:11.681 --> 00:41:15.689 Select Canvas game object 686 00:41:15.689 --> 00:41:18.494 Press the + button in the Hierarchy 687 00:41:18.494 --> 00:41:22.330 I will add an image in the UI 688 00:41:22.330 --> 00:41:26.312 I will name it Hit 689 00:41:26.312 --> 00:41:28.600 and this image 690 00:41:28.600 --> 00:41:32.529 will be covered by the whole screen 691 00:41:32.529 --> 00:41:36.379 In the Inspector window, below the Rect Transform 692 00:41:36.379 --> 00:41:41.406 If you click on the icon that is shown with Center and Middle 693 00:41:41.406 --> 00:41:45.679 An Anchor Presets window will pop up like so 694 00:41:45.679 --> 00:41:49.120 While pressing the Alt key 695 00:41:49.120 --> 00:41:54.669 If you select the icon on the bottom right side 696 00:41:54.669 --> 00:41:57.066 It will change to an image 697 00:41:57.066 --> 00:42:01.236 that will fit the whole screen 698 00:42:01.239 --> 00:42:05.033 So the color value of the image component 699 00:42:05.033 --> 00:42:07.639 will be set to red 700 00:42:07.639 --> 00:42:15.412 And out of the RGBA color attribute, A 701 00:42:15.412 --> 00:42:17.919 alpha value, transparency 702 00:42:17.919 --> 00:42:21.786 The transparency will be changed to 100 703 00:42:24.479 --> 00:42:27.075 So this UI will be turned off at first 704 00:42:27.075 --> 00:42:30.879 When the Enemy has attacked the player 705 00:42:30.879 --> 00:42:33.641 it will turn on and off 706 00:42:33.641 --> 00:42:36.479 Again, turned on and off 707 00:42:36.479 --> 00:42:39.088 It will take actions like this 708 00:42:42.560 --> 00:42:46.818 After you have opened up PlayerMove script 709 00:42:46.818 --> 00:42:50.800 I will create a function at the bottom 710 00:42:50.800 --> 00:42:54.490 When the Enemy has attacked the Player 711 00:42:54.490 --> 00:42:56.219 the function that is invoked will be created 712 00:42:56.219 --> 00:43:00.748 public void Damage Action 713 00:43:04.959 --> 00:43:08.538 In this function, the Coroutine function will be executed 714 00:43:08.538 --> 00:43:12.000 And below, the Coroutine function will be created 715 00:43:12.000 --> 00:43:15.706 For Coroutine value, the return value has to be 716 00:43:15.706 --> 00:43:20.651 IEnumerator 717 00:43:20.651 --> 00:43:24.530 And you can write the name of the function 718 00:43:24.530 --> 00:43:28.198 PlayHitEffect 719 00:43:32.911 --> 00:43:38.830 First, activate damage UI 720 00:43:41.170 --> 00:43:45.699 and then wait for 0.3 seconds 721 00:43:47.919 --> 00:43:53.518 And then deactivate damage UI again 722 00:43:56.479 --> 00:43:59.204 In order to activate this damage UI 723 00:43:59.204 --> 00:44:02.840 We need a variable that has the damage UI 724 00:44:02.840 --> 00:44:05.331 I will create it on the top 725 00:44:05.331 --> 00:44:08.117 Damage UI variable 726 00:44:11.207 --> 00:44:17.028 Public Game Object HitEffect 727 00:44:19.800 --> 00:44:23.087 I will finish the code and move over to Edit 728 00:44:23.087 --> 00:44:24.046 to do the setting 729 00:44:26.159 --> 00:44:29.198 Hey HitEffect, out of the function you have 730 00:44:29.198 --> 00:44:34.030 SetActive function can be used to activate 731 00:44:34.030 --> 00:44:37.298 In the brackets, if you insert true 732 00:44:37.298 --> 00:44:38.327 It will be activated 733 00:44:41.040 --> 00:44:43.891 And then wait for 0.3 seconds 734 00:44:43.891 --> 00:44:52.919 Over here, use values like yield return new waitforseconds 735 00:44:52.919 --> 00:44:57.444 Open up brackets and insert 0.3 736 00:44:57.444 --> 00:45:00.879 And if you use yield return 737 00:45:00.879 --> 00:45:02.038 General process 738 00:45:02.038 --> 00:45:04.262 It will yield to the general system 739 00:45:04.262 --> 00:45:07.170 So it will wait for this amount of time 740 00:45:07.170 --> 00:45:09.825 Then after 0.3 seconds have passed from the general settings 741 00:45:09.825 --> 00:45:13.689 Come back to the Coroutine function 742 00:45:13.689 --> 00:45:16.317 and proceed with the next step 743 00:45:16.317 --> 00:45:19.309 So the function that HitEffect has 744 00:45:19.309 --> 00:45:21.263 Through SetActive function 745 00:45:21.263 --> 00:45:23.637 insert false 746 00:45:25.719 --> 00:45:27.815 In Coroutine function 747 00:45:27.815 --> 00:45:31.830 we need at least one yield return 748 00:45:31.830 --> 00:45:33.297 We must have it at least once 749 00:45:36.159 --> 00:45:38.620 So in DamageAction function 750 00:45:38.620 --> 00:45:41.495 this Coroutine function will be operated 751 00:45:41.495 --> 00:45:43.424 Just like operating general function 752 00:45:43.424 --> 00:45:47.280 PlayHitEffect and 753 00:45:47.280 --> 00:45:51.192 semicolon isn't how you operate it 754 00:45:51.192 --> 00:45:53.401 The Coroutine function must 755 00:45:53.401 --> 00:45:57.520 be activated through 756 00:45:57.520 --> 00:45:59.404 a function called StartCoroutine 757 00:45:59.404 --> 00:46:02.555 So write StartCoroutine and open up brackets 758 00:46:02.555 --> 00:46:07.994 And then PlayHitEffect function 759 00:46:07.994 --> 00:46:11.040 must be operated and inserted 760 00:46:11.040 --> 00:46:13.036 You must follow this progess 761 00:46:13.036 --> 00:46:16.308 for the Coroutine function to operate normally 762 00:46:19.120 --> 00:46:23.521 When the Enemy has attacked 763 00:46:23.521 --> 00:46:26.436 the DamageAction function must be operated 764 00:46:28.479 --> 00:46:30.724 Come to EnemyFSM 765 00:46:30.724 --> 00:46:35.959 If you look at the end, there is AttackAction 766 00:46:35.959 --> 00:46:41.209 Erase the attack written in Korean 767 00:46:41.209 --> 00:46:46.818 Let's bring PlayerMove component 768 00:46:49.000 --> 00:46:51.136 From the component that has been brought 769 00:46:53.896 --> 00:46:57.820 Execute DamageAction function 770 00:47:00.057 --> 00:47:02.421 The PlayerMove component 771 00:47:02.421 --> 00:47:05.519 can be brought over using the player transform 772 00:47:05.519 --> 00:47:07.804 Hey player, out of the functions you have 773 00:47:07.804 --> 00:47:10.623 utilize GetComponent function 774 00:47:10.623 --> 00:47:13.358 to bring PlayerMove 775 00:47:15.679 --> 00:47:18.209 GetComponent will find the PlayerMove 776 00:47:18.209 --> 00:47:19.390 and throw it to the front 777 00:47:19.390 --> 00:47:22.800 So let's create a variable that will receive it 778 00:47:22.800 --> 00:47:26.418 Using the data type called PlayerMove 779 00:47:26.418 --> 00:47:27.619 I will name it as pm 780 00:47:31.040 --> 00:47:33.993 So hey pm, out of the functions you have 781 00:47:33.993 --> 00:47:37.689 Please execute the function called DamageAction 782 00:47:40.936 --> 00:47:43.356 Save it 783 00:47:43.356 --> 00:47:45.879 and come back to the editor 784 00:47:45.879 --> 00:47:48.776 Select the Player game object 785 00:47:48.776 --> 00:47:53.080 In the HitEffect of PlayerMove 786 00:47:53.080 --> 00:47:55.336 Below the canvas that we have added 787 00:47:55.336 --> 00:47:57.958 Drag the Hit game object 788 00:47:57.958 --> 00:47:58.979 and insert it 789 00:48:01.439 --> 00:48:03.075 Then we will play it 790 00:48:06.778 --> 00:48:10.571 If you approach close and get attacked 791 00:48:10.571 --> 00:48:15.000 The red UI will flicker on and off like so 792 00:48:15.000 --> 00:48:17.837 You can see that it is flickering on and off 793 00:48:20.969 --> 00:48:23.060 For the next lecture 794 00:48:23.060 --> 00:48:27.449 I will modify the name that is set as sample scene 795 00:48:27.449 --> 00:48:29.129 Below the Assets folder 796 00:48:29.129 --> 00:48:31.811 Select the scenes folder 797 00:48:31.811 --> 00:48:34.113 There will be a SampleScene file 798 00:48:34.113 --> 00:48:36.850 Press the F2 key 799 00:48:36.850 --> 00:48:39.013 set into name changing mode 800 00:48:39.013 --> 00:48:42.887 I will name it as MainScene 801 00:48:45.560 --> 00:48:48.792 Then after selecting Env game object 802 00:48:48.792 --> 00:48:50.399 Please press Bake 803 00:48:53.159 --> 00:48:55.682 Then below the scene folder 804 00:48:55.682 --> 00:48:57.374 a main scene folder will appear 805 00:48:57.374 --> 00:49:04.409 A navigation data will be created in this folder 806 00:49:04.409 --> 00:49:07.649 So erase the SampleScene folder that existed originally 807 00:49:11.360 --> 00:49:14.976 Now, we will do an overview of this lecture 808 00:49:15.592 --> 00:49:16.486 Overview Player model and animation application Player model Window Asset Store Search online Deactivate the Mesh Renderer component of the Player 809 00:49:16.486 --> 00:49:17.290 Hide the basic shapes, adjust the transform position and scale value Player Idle, Move animation Blend tree that decides the animation condition based on the parameter 810 00:49:17.290 --> 00:49:18.095 Click the right button of the mouse in the empty area of the Animator Click on Create State From new Blend tree to create new node 811 00:49:18.095 --> 00:49:18.973 Add two motions, demo combat idle file for the first motion Drag and drop demo combat run file in the second motion 812 00:49:18.973 --> 00:49:19.784 Modify the Blend parameter value to MoveMotion and write code to express delay,move, run Bring over Animator component 813 00:49:19.784 --> 00:49:20.592 anim= GetComponentInChildren Animater; Use dir length to alter MoveMotion value anim.SetFloat MoveMotion,dir 814 00:49:20.592 --> 00:49:23.092 Player model and animation application Player Shoot animation Click and drag demo combat shoot file in the Animator window to create Attack node 815 00:49:23.092 --> 00:49:25.592 Connect to Any State Node since it is operated regardless of Enemy's condition Write trigger operating code based on the transition connecting situation from Attack node to LocoMotion node 816 00:49:25.592 --> 00:49:26.589 Physical strength UI and Damage UI Development Physical strength UI Red gauge of the UI decreases depending on the Enemy's physical strength Locate in World Space for it to be in a 3D space 817 00:49:26.589 --> 00:49:27.367 Select Hierarchy + UI Canvas to create EnemyHPBar game object and transfer to Enemy object's child 818 00:49:27.367 --> 00:49:28.176 Select Hierarchy + UI Image to create Back game object Copy Back game object as well as drag and drop to HPBar object source image 819 00:49:28.176 --> 00:49:28.944 Modify Image Type to Field and adjust the attribute of Fill Amount, Fill Method, Fill Origin Alter the current HP value to in between 0 and 1 820 00:49:28.944 --> 00:49:29.792 float retio=currHP maxHP; The modified value is set to HP UI's fillAmount value hpBar.fillAmount = ratio; 821 00:49:29.792 --> 00:49:30.602 Billboard The sight direction of the camera and the front direction of HP Bar needs to be synchronized transform.forward=Camera.main.transform.forward; 822 00:49:30.602 --> 00:49:31.604 Physical strength UI and Damage UI development Damage UI UI that is showed when the player is attacked by the Enemy Select Canvas object and choose Hierarchy + UI image 823 00:49:31.604 --> 00:49:32.650 adjust to full screen size in Anchor Presets option Write code so that it will flicker on and off when the player is being attacked 824 00:49:32.650 --> 00:49:33.547 Damage UI Variable public GameObject hitEffect; Coroutine function with a return value called Enumerator Ienumerator PlayHitEffect 825 00:49:33.547 --> 00:49:34.540 Activate damage UI hitEffect.SetActive true; Waits for 0.3 seconds yield return new WaitForSeconds 0.3f; 826 00:49:34.540 --> 00:49:35.524 Damage UI Deactivation hitEffect.SetActive false; Execute EamageAction function when the Enemy has attacked