WEBVTT 00:00.020 --> 00:00.470 Hello guys. 00:00.470 --> 00:01.430 Welcome to the video. 00:01.430 --> 00:04.550 In this one we're going to set up the settings UI. 00:04.550 --> 00:09.020 We don't have much of a settings in the game, but still I would like to show you how to maybe control 00:09.020 --> 00:11.240 volume of sound effects and background music. 00:11.240 --> 00:14.840 And if you want you can add more settings here later on. 00:14.840 --> 00:18.530 So we already have a setting UI and a back button. 00:18.530 --> 00:19.760 So this is good. 00:19.760 --> 00:20.960 Let me double check. 00:21.320 --> 00:22.760 Does it return to main menu. 00:22.760 --> 00:23.840 Yes okay. 00:23.840 --> 00:25.430 Now we need to. 00:26.390 --> 00:27.950 Make two elements. 00:27.950 --> 00:30.230 This is my reference how it's going to look. 00:30.230 --> 00:31.940 So we're going to make something like this. 00:31.940 --> 00:36.980 This is from my previous project and I think it's a good one. 00:37.250 --> 00:40.760 Let's make UI slider. 00:40.760 --> 00:44.570 And I'm going to give it a parent of empty Game object. 00:44.570 --> 00:47.510 And it's going to be something like BGM volume. 00:49.330 --> 00:49.990 All right. 00:49.990 --> 00:54.460 So the BGM volume itself can be something like. 00:55.230 --> 00:56.430 This may be. 00:57.420 --> 00:58.530 And slider. 00:58.530 --> 01:02.940 I think I want to make it with 1000 height 100. 01:02.940 --> 01:03.750 Very good. 01:03.990 --> 01:05.730 Here is the value of the slider. 01:05.820 --> 01:08.850 And if you want to get parameter from the slider. 01:10.270 --> 01:15.400 You can just get component of the slider and then ask for value and that would work. 01:15.640 --> 01:18.490 Uh, actually slider is working right now. 01:18.490 --> 01:21.490 You can go to play mode and you can drag it here and there. 01:21.490 --> 01:22.720 It works very well. 01:22.720 --> 01:28.060 But before we do anything else, I want to make this slider pretty. 01:28.360 --> 01:31.750 Let's go to Graphics enemies. 01:32.980 --> 01:33.820 Plant. 01:33.820 --> 01:35.560 And over here. 01:37.790 --> 01:40.190 Or the handle in the image. 01:40.190 --> 01:42.050 I want to drag a bullet. 01:42.770 --> 01:44.810 And let's click set native size. 01:45.320 --> 01:47.060 So now it's pretty nice. 01:47.060 --> 01:49.550 And we can see it looks like a bullet. 01:49.550 --> 01:50.510 Isn't it cool. 01:51.230 --> 01:56.420 Now we probably need to go here and do a stretch in the center. 01:56.420 --> 01:56.690 Yeah. 01:56.690 --> 01:57.440 Like that. 01:57.440 --> 02:02.720 This works very well for me and I think of making it a bit bigger. 02:03.800 --> 02:06.200 Or maybe we can make the slider slimmer. 02:06.200 --> 02:07.490 Yeah, that would be better. 02:09.040 --> 02:11.290 Let's take the background and let's. 02:12.370 --> 02:13.720 Make it slimmer. 02:13.720 --> 02:14.980 So maybe. 02:17.120 --> 02:18.080 Well, let me see. 02:20.280 --> 02:22.650 Ten from the top, ten from the bottom. 02:22.650 --> 02:23.280 Yeah. 02:23.640 --> 02:30.210 And fill area itself over here can be slimmer as well. 02:34.030 --> 02:37.420 So then from the top, then from the bottom. 02:37.420 --> 02:37.960 Yeah. 02:37.990 --> 02:38.650 Nice. 02:38.650 --> 02:39.970 This looks good to me. 02:40.000 --> 02:46.300 Now let's, uh, create an image under BGM volume. 02:46.630 --> 02:50.800 Image is going to be plant image. 02:52.300 --> 02:57.070 We're going to go and find the idle sprite and just drag it here like that. 02:57.400 --> 02:58.840 Let's click Set Native Size. 02:58.840 --> 03:00.190 It's going to be a bit bigger. 03:00.520 --> 03:02.140 And I think we can place it here. 03:02.140 --> 03:07.690 And it's going to look like plant is shooting this um handle of a slider. 03:07.690 --> 03:09.790 Yeah, I think it's a cool idea. 03:09.790 --> 03:11.080 I like it pretty much. 03:11.110 --> 03:11.500 Um. 03:13.090 --> 03:14.620 Maybe we can make him smaller. 03:14.620 --> 03:15.400 Let me see. 03:18.510 --> 03:20.610 Yeah, point 75 should be good. 03:21.400 --> 03:25.780 Okay, let's place it like that and we can see it's better to give it some sort of a platform. 03:25.780 --> 03:28.360 So I'm going to go to graphics terrain. 03:28.360 --> 03:29.650 Terrain sliced. 03:31.760 --> 03:33.590 There is this, uh. 03:35.370 --> 03:38.760 Piece of platform somewhere here. 03:41.010 --> 03:41.370 Yeah. 03:41.370 --> 03:42.120 This one. 03:42.120 --> 03:43.680 So we need to make. 03:44.260 --> 03:47.680 An empty object platform. 03:47.830 --> 03:51.010 Then we need to make UI image. 03:52.870 --> 03:55.240 And drag this to this field like that. 03:55.240 --> 03:57.070 I'm going to click Set Native size. 03:57.280 --> 03:59.050 I'm going to duplicate it. 03:59.050 --> 04:01.210 Drag the middle of the platform. 04:01.480 --> 04:05.380 Then I'm going to duplicate it and drag the third part of the platform. 04:05.530 --> 04:06.520 Very well. 04:06.880 --> 04:09.220 Now let's take this image. 04:09.220 --> 04:10.930 Drag it to the left. 04:11.770 --> 04:15.430 And we can see position should be -100 in my case. 04:15.910 --> 04:21.670 This one has position over zero and the third one has position of a hundred and the x. 04:22.270 --> 04:24.280 So this makes a platform. 04:25.120 --> 04:29.170 And now I can take this platform and place it below the flower. 04:29.170 --> 04:29.860 Like that. 04:29.860 --> 04:30.760 Isn't it cool? 04:31.090 --> 04:32.470 I think it's very cool. 04:32.470 --> 04:34.450 Let me see if we should make it smaller. 04:36.820 --> 04:38.620 Maybe 0.75 will work. 04:38.620 --> 04:39.220 Good. 04:39.610 --> 04:42.940 Okay, now let's take care of the handle. 04:43.600 --> 04:45.550 Uh, handle. 04:46.030 --> 04:47.770 No fill area and a background. 04:47.770 --> 04:50.770 So for the field area, we can choose some color. 04:51.370 --> 04:52.570 From the flower. 04:53.650 --> 04:55.960 Um, yeah, there is a color picker. 04:55.960 --> 04:59.200 Just pick it and choose the color. 04:59.770 --> 05:01.960 Okay, I think maybe this is good. 05:02.670 --> 05:04.350 I think it's okay. 05:04.680 --> 05:06.150 Let me try something else. 05:08.880 --> 05:10.020 Yeah, like it like that. 05:10.020 --> 05:11.880 Now I'm going to copy the color. 05:12.420 --> 05:16.710 Go to the background, paste the color in here. 05:16.710 --> 05:19.500 And then I'm going to make it brighter from what we have. 05:20.200 --> 05:21.400 Something like. 05:24.610 --> 05:25.450 This. 05:25.450 --> 05:26.230 Yes. 05:26.230 --> 05:30.820 So now this shows the difference between field area and not field area. 05:30.850 --> 05:31.780 Okay I like it. 05:31.780 --> 05:35.800 The last step would be to add a text here to explain the player what it does. 05:35.800 --> 05:39.220 So I'm going to make UI Text Mesh Pro. 05:40.340 --> 05:41.480 Uh, slider. 05:41.480 --> 05:41.870 Sorry. 05:41.870 --> 05:45.260 This will be background music. 05:46.090 --> 05:48.430 Are we going to change font to Minecraft? 05:49.370 --> 05:53.120 And this one should be stretched, I believe, to something like that. 05:53.880 --> 05:55.110 Yeah, I think it's good. 05:55.200 --> 06:00.840 Let's just, uh, do alignment in the center, and let's take the element and place it over here. 06:01.970 --> 06:02.750 Okay. 06:02.960 --> 06:04.100 Looks good to me. 06:05.530 --> 06:09.040 Now we have a BGM slider and it's very cool. 06:09.370 --> 06:13.330 I'm going to just press Ctrl D to duplicate it. 06:14.350 --> 06:15.550 Move it up. 06:16.400 --> 06:21.770 And then on this one it's going to be suffix, volume or sound effects. 06:22.130 --> 06:23.480 The text will say. 06:24.210 --> 06:26.880 Sound effects. 06:29.600 --> 06:32.360 And the plant over here can be flipped. 06:32.390 --> 06:35.180 So I'm going to do rotation on the Y 180. 06:36.230 --> 06:40.190 I'm going to place him over here on the left. 06:40.930 --> 06:42.700 Nice, nice nice nice. 06:42.700 --> 06:43.990 Maybe we can animate. 06:43.990 --> 06:46.060 These two elements would be cool. 06:46.060 --> 06:47.020 What do you think? 06:47.380 --> 06:48.430 Let's try that. 06:48.430 --> 06:49.960 Let's go to animation. 06:50.320 --> 06:53.020 We have main menu here I'm going to make. 06:54.090 --> 06:58.290 Uh, animator controller settings. 06:58.290 --> 07:00.570 Plant, I don't know, I don't have a better name. 07:03.210 --> 07:05.910 And let's put an underscore here okay. 07:06.000 --> 07:09.090 Now we're going to drag this on the image. 07:10.460 --> 07:15.500 Over here and over here and all. 07:15.500 --> 07:17.930 What we left to do is go to animator. 07:18.320 --> 07:23.030 Let's find animations, enemies, plant idle. 07:23.030 --> 07:24.290 Let's just drag it here. 07:24.290 --> 07:26.270 It will be animation by default. 07:26.270 --> 07:28.670 And now when we go to play mode. 07:29.630 --> 07:33.050 We have pretty settings with oh wait, animation is not lame. 07:33.440 --> 07:34.460 Why not brother? 07:35.250 --> 07:37.560 Come on, play the animation. 07:57.670 --> 08:03.910 Okay, I'm not sure what's up with this one, but what I'll do here is I'll go to I'll go to main menu 08:03.910 --> 08:06.880 and I'll make an animation here for this animator. 08:06.880 --> 08:09.730 Let's select this plant image animation. 08:10.060 --> 08:11.860 Oh, sprites are missing. 08:13.010 --> 08:13.850 Interest in. 08:13.850 --> 08:15.200 Why could that be? 08:16.070 --> 08:18.170 Game object or component is missing. 08:18.840 --> 08:19.560 Okay. 08:19.950 --> 08:26.220 Uh, maybe because we use sprite renderer, and here we have an image, and that's why it's like that. 08:27.790 --> 08:31.000 So what we're going to do here is go to the numerator delete this. 08:31.030 --> 08:34.000 We're going to make a new clip animations. 08:34.000 --> 08:38.950 Main menu I'm going to do a plant plant idle UI. 08:39.850 --> 08:43.030 You're going to go to Graphics of Enemy. 08:43.780 --> 08:44.560 Uh, plant. 08:44.560 --> 08:46.090 Let's take the idle sprites. 08:46.090 --> 08:46.990 Drag them here. 08:46.990 --> 08:48.490 Sample rate 20. 08:49.160 --> 08:50.570 And this should be good now. 08:51.950 --> 08:56.000 Because this one will be by default and it's supposed to work, I believe. 08:56.000 --> 08:56.840 Let's see. 08:58.070 --> 08:58.640 Yeah. 08:58.640 --> 09:00.530 Works very well, I like it. 09:00.890 --> 09:02.390 If you want, you can make it smaller. 09:02.390 --> 09:06.890 If you want, you can trigger the shoot animation when you click on the slider. 09:06.890 --> 09:08.240 But that will be later. 09:08.240 --> 09:10.850 As of now, this is all good. 09:11.000 --> 09:12.530 Uh, the back button works. 09:13.850 --> 09:14.600 Let me see. 09:15.540 --> 09:16.440 Yes. 09:16.440 --> 09:17.280 Okay. 09:17.280 --> 09:18.630 This is very nice. 09:18.630 --> 09:20.910 Now let's disable this. 09:20.910 --> 09:23.580 Let's go to main menu and enable this. 09:23.820 --> 09:25.920 And we're going to duplicate new game. 09:26.760 --> 09:30.570 I'm going to move it down and I'm going to right here. 09:31.020 --> 09:32.160 Settings. 09:32.190 --> 09:33.810 Settings button. 09:33.960 --> 09:35.160 Better be yes. 09:35.160 --> 09:37.500 And this one new game button. 09:37.500 --> 09:40.680 And this is continue button. 09:42.150 --> 09:44.070 And this one will say settings. 09:44.990 --> 09:45.500 Okay. 09:45.500 --> 09:49.700 Also, I feel like it's not in the middle, but I'm going to take care of that later. 09:50.180 --> 09:51.500 This one should be good. 09:51.950 --> 09:55.070 I'm going to take these two buttons, move them down a little bit. 10:09.730 --> 10:10.120 Yeah. 10:10.120 --> 10:10.960 All right. 10:12.960 --> 10:19.680 Now let's move continue above settings below and over here on the settings we want to go to button, 10:19.680 --> 10:22.920 and we want to ask it to switch to settings UI. 10:23.430 --> 10:27.990 All right now let's double check this and we're going to go to next video. 10:28.380 --> 10:30.510 Yeah it works very well I love it. 10:30.810 --> 10:32.310 Okay let's go to the next video. 10:32.310 --> 10:34.710 We're going to do something with the like entire UI. 10:34.710 --> 10:36.150 We're going to make it work properly. 10:36.150 --> 10:39.330 We're going to set relationship between buttons and then check everything. 10:39.330 --> 10:40.140 I'll see you there.