WEBVTT 00:00.040 --> 00:03.440 Let's create the jump button and the attack button to do so. 00:03.480 --> 00:07.040 We're going to move over to our hierarchy tab, then canvas. 00:07.040 --> 00:09.400 And let's go to this UI GameObject. 00:09.920 --> 00:15.640 So inside this UI we have the Apple icon as you can notice and all of the text. 00:15.760 --> 00:17.240 So let's select this UI. 00:17.280 --> 00:18.640 Let's right click on it. 00:18.640 --> 00:21.280 Let's go to UI legacy in the bottom. 00:21.280 --> 00:23.080 And then we're going to choose this button. 00:23.400 --> 00:26.560 And we can call this button to something like jump button. 00:26.560 --> 00:31.640 So let's call it jump button and jump button. 00:31.640 --> 00:39.480 And I want this button uh to the uh to the right side in the bottom to do so, to basically move, uh, 00:39.520 --> 00:46.640 to move this in the right side, we can select that button and we can simply drag it, but in a different 00:46.640 --> 00:49.800 screen it's gonna be different, uh, sizes. 00:49.800 --> 00:55.000 So that's why we need to move over to we need to move over to this rect transform. 00:55.000 --> 00:56.560 Then click over here. 00:56.560 --> 01:00.600 And we're going to hold down Alt and Alt on our keyboard. 01:00.800 --> 01:04.880 And then we're going to choose this, uh, bottom right anchor. 01:05.000 --> 01:08.560 So this button always going to be in the right side. 01:08.560 --> 01:11.080 In the bottom in the bottom right side. 01:11.240 --> 01:14.160 And let's now we're going to select our button. 01:14.160 --> 01:17.000 Let's drag it over here something like that. 01:17.320 --> 01:18.760 And let's scale this button. 01:18.760 --> 01:20.080 So we're going to hold down alt. 01:20.080 --> 01:22.280 So it's going to resize from center. 01:22.600 --> 01:27.640 So we're going to make it something like uh 215in the width. 01:27.760 --> 01:30.880 So let's go to Rick Transform then width. 01:30.960 --> 01:34.680 We're going to choose something like two uh 225. 01:34.720 --> 01:44.440 Sorry not 225 in the x or basically width and in the height we're going to make 2 to 5 basically same. 01:44.480 --> 01:47.840 Or you can simply say in square type like that. 01:48.200 --> 01:52.960 So now what we need to do we need to we're going to drag our square. 01:53.280 --> 01:56.240 We're going to replace this sprite with our square. 01:56.280 --> 02:02.650 To do so I'm going to move over to my project tab, then assets and then a sprites folder, and then 02:02.650 --> 02:05.170 I'm going to head over to my UI folder. 02:05.330 --> 02:11.650 As you can notice, if I scroll down, I have an up arrow, up arrow and a square. 02:11.810 --> 02:16.930 So let's select our jump button first, then go over to Inspector, then Image component. 02:16.930 --> 02:19.650 So we need to drag the sprite right over here. 02:19.650 --> 02:21.210 So I'm going to select my square. 02:21.250 --> 02:22.530 Let's drag it here. 02:22.650 --> 02:26.730 And as soon as we drag it we can see by now it's pretty much fine. 02:26.730 --> 02:32.570 But the problem is that we can see the text inside of this button and we don't want the text. 02:32.570 --> 02:34.730 Instead we want the icon. 02:34.730 --> 02:37.690 So we're going to select our text inside this jump button. 02:37.690 --> 02:40.330 And let's select that and let's delete it. 02:40.370 --> 02:46.850 Instead we're gonna we want a icon basically the up arrow icon. 02:46.850 --> 02:49.690 As you can notice in my UI folder. 02:49.930 --> 02:55.170 And we want that icon inside this square or inside this sprite. 02:55.170 --> 02:57.610 So that's why we're gonna select our jump button. 02:57.610 --> 03:00.330 Or this squares you can simply call it. 03:00.410 --> 03:04.410 then right click on it, then go to UI and then image in the top. 03:04.410 --> 03:08.970 Select it and we're going to replace this image with our up arrow. 03:08.970 --> 03:12.930 But before we do it let's call it icon instead of image. 03:12.930 --> 03:14.890 To do so let's go over to Inspector. 03:15.090 --> 03:17.930 Then we're going to call it icon. 03:17.930 --> 03:19.770 So let's call it icon. 03:20.250 --> 03:24.730 And we want to replace the icon with our this up sprite. 03:24.730 --> 03:26.690 So we're going to select our icon. 03:26.690 --> 03:30.050 Then select this up arrow basically this sprite. 03:30.050 --> 03:32.690 And let's drag it over to the source image field. 03:32.930 --> 03:39.090 And as soon as we drag it we can see by now and make sure you just go over to drag transform. 03:39.090 --> 03:42.330 And then click over here and we're gonna hold down alt. 03:42.330 --> 03:44.890 And we're going to select this bottom right one. 03:44.890 --> 03:49.130 So it's gonna resize as the size of our square square. 03:49.170 --> 03:56.330 Or you can simply say with this button it's gonna resize itself, this icon or this up arrow. 03:56.810 --> 04:03.770 And we want a little bit small this up arrow icon, so we can simply choose the rake tool in the scene 04:03.770 --> 04:06.010 view or rake tool in the scene view. 04:06.010 --> 04:13.130 And we're gonna resize and we can hold down alt on our keyboard to resize it from center like this. 04:13.610 --> 04:18.650 So I'm gonna choose 45 from the left side and from the right side. 04:18.650 --> 04:21.490 I'm going to choose 45 to do so. 04:21.530 --> 04:22.770 Let's select the icon. 04:22.770 --> 04:31.570 Let's go over to Rake Transform and let's do 45 or to the right side sorry left side and 45 to the right 04:31.570 --> 04:32.050 side. 04:32.210 --> 04:34.970 And from the top I'm going to choose 35. 04:35.130 --> 04:38.130 And from the bottom I'm going to choose 35. 04:38.330 --> 04:41.050 As you can notice, this seems pretty much cool. 04:41.490 --> 04:49.330 And make sure you just simply move over to your GUI, game object and UI game object and then go over 04:49.330 --> 04:52.170 to Inspector Overrides and then apply all. 04:52.370 --> 04:56.650 But before I do, I'm gonna simply copy this jump button. 04:56.650 --> 04:59.890 So I'm going to press Ctrl D on my keyboard. 04:59.890 --> 05:03.260 And I'm going to call the duplicate one attack button. 05:03.260 --> 05:04.180 So let's go over to. 05:04.220 --> 05:04.900 Inspector. 05:04.940 --> 05:07.260 Let's rename this to attack button. 05:07.820 --> 05:10.140 So let's call this attack button. 05:10.460 --> 05:14.380 And what we're going to do now we're going to drag it in the up direction. 05:14.380 --> 05:17.180 Something like this as you can notice. 05:17.340 --> 05:22.020 And we're going to replace the icon with our attack icon or the sword. 05:22.060 --> 05:25.900 As you can notice I have inside my folder. 05:25.900 --> 05:29.180 So you will find all of these in the resources. 05:29.180 --> 05:32.660 So you make you basically have to download them. 05:33.140 --> 05:37.940 And now I'm going to select the icon inside this attack button. 05:37.940 --> 05:39.260 So let's choose that. 05:39.260 --> 05:41.700 Let's go over to Inspector Image Component. 05:41.900 --> 05:44.060 And we're going to select this sword. 05:44.060 --> 05:46.900 And let's drag it over to this source image field. 05:47.140 --> 05:50.220 And as soon as we drag it we can see by now. 05:50.220 --> 05:53.380 But the problem is that it's kind of bit weird. 05:53.420 --> 06:00.140 Basically, if I select this sword, a UI, basically the sprite, and then click on this arrow, we 06:00.140 --> 06:01.980 can see individual parts. 06:01.980 --> 06:04.620 So since this is a single sprite. 06:04.620 --> 06:08.420 So what we basically need to do we need to select that sprite. 06:08.460 --> 06:14.180 Then go over to Inspector Sprite mode to choose single because this is the single sprite we have. 06:14.180 --> 06:15.060 So that's why. 06:15.540 --> 06:20.820 And after doing that, make sure you scroll down to the bottom and then click on this apply button. 06:21.060 --> 06:25.540 And as soon as we click on apply it's kind of it gets weird. 06:25.540 --> 06:29.980 So basically we need to choose the icon inside this attack button one more time. 06:30.180 --> 06:37.740 And now you can select your sort a sprite and then drag it over to this source image in the uh in the 06:37.780 --> 06:40.380 inside this slot as you can notice. 06:40.540 --> 06:45.220 So as soon as we drag it by now, by now we can notice it seems pretty much cool. 06:45.700 --> 06:49.980 But it's kind of it's, it's stretched or basically rectangular type. 06:50.140 --> 06:55.500 And this source sprite is not rectangular type, it's basically square type. 06:55.500 --> 07:02.420 So basically what we need to do from the top we're going to do 45 and from the bottom we're going to 07:02.420 --> 07:03.500 do 45. 07:03.540 --> 07:09.580 Basically, make sure you just make that one and make that one square type. 07:09.580 --> 07:13.580 Or you can simply select your icon, then go over to your scene view. 07:13.620 --> 07:18.340 Select this break tool and you can hold down alt and you can just resize it. 07:18.340 --> 07:21.660 So since this is square uh sprite. 07:21.660 --> 07:28.220 So that's why from the bottom from the right, from the top, we just uh, all of them, we have chosen 07:28.220 --> 07:30.540 45 as you can notice. 07:30.540 --> 07:32.540 So this seems pretty much cool by now. 07:32.700 --> 07:39.100 And now what we can do, we can simply move over to parent game object and then Inspector then overrides. 07:39.100 --> 07:41.900 And then we're going to click on this apply all button. 07:41.900 --> 07:49.060 So the changes we made inside this UI just gonna be saved into this UI GameObject prefab as well. 07:49.460 --> 07:55.820 And if we just go ahead and then click on this play button and try to click this jump button and this 07:55.860 --> 07:59.100 attack button, you will see nothing just gonna happen. 07:59.100 --> 07:59.500 Why? 07:59.830 --> 08:04.750 Because we need to hook this button with some certain function in order to do something. 08:04.750 --> 08:05.230 So just. 08:05.910 --> 08:08.790 So let me show you first, and you're gonna. 08:09.510 --> 08:11.030 You're gonna understand. 08:11.350 --> 08:17.750 So now if we just go ahead and then click on this attack button, as you can notice, this attack button 08:17.750 --> 08:18.590 doing nothing. 08:18.630 --> 08:25.630 And also this, uh, basically it's playing the attack animation clip because we do know that if we 08:25.670 --> 08:32.590 click the left mouse button, we just triggering that attack parameter which is playing the attack animation. 08:32.590 --> 08:35.390 So if I just go ahead, click on this jump button. 08:35.390 --> 08:38.390 We're not able to see our player to jump. 08:38.390 --> 08:42.990 So we need to hook this button with some certain function in order to do something. 08:43.190 --> 08:47.310 So basically once we're gonna click on this jump sorry jump button. 08:47.310 --> 08:49.910 We want our player game object to jump. 08:49.950 --> 08:55.270 Basically we need to call the jump function as we have done inside our player skip. 08:55.270 --> 08:56.990 So I hope you get the idea. 08:57.190 --> 09:00.310 But the problem is that we can see the buttons are.