WEBVTT 00:00.020 --> 00:00.440 Hello guys. 00:00.440 --> 00:01.370 Welcome to the video. 00:01.370 --> 00:04.580 In this one I'm going to show you how to set up rest of the UI. 00:04.610 --> 00:06.290 We have a skin selection. 00:06.290 --> 00:07.430 We have level selection. 00:07.430 --> 00:08.870 And also we have settings. 00:08.870 --> 00:10.910 And we need to set up all of that. 00:10.910 --> 00:14.210 There are some special features that we're going to implement. 00:14.210 --> 00:18.800 So I hope you like it really because I did spend some time to make it work. 00:18.800 --> 00:20.390 Let me switch off main menu. 00:20.390 --> 00:24.140 Let me switch on skin selection and let me tell you what I want to do. 00:24.140 --> 00:27.080 So over here we have select button and back button. 00:27.080 --> 00:33.020 What I want to do is to make navigation between these two buttons only when you're using up and down, 00:33.020 --> 00:37.910 but when you press on left or right, I just want to switch skin left or right. 00:37.910 --> 00:43.100 I don't want to force player to select the button with a gamepad, and then click submit button again 00:43.100 --> 00:45.110 just to switch to next skin. 00:45.110 --> 00:47.390 Yeah, it's going to be not that difficult to do. 00:47.390 --> 00:48.950 So let's begin. 00:48.950 --> 00:55.250 First of all, we want to find the first selected for this object over here. 00:55.250 --> 00:57.950 We could do it just like we did with the UI difficulty. 00:57.950 --> 01:01.910 Or we could do it by just dragging script over here. 01:01.910 --> 01:04.040 Update update first selected. 01:04.610 --> 01:07.790 And let's go inside of the script and let's do it there. 01:08.510 --> 01:11.210 Okay, let's go all the way above. 01:11.240 --> 01:14.240 Let's make serialize field private. 01:14.510 --> 01:14.840 Uh. 01:14.840 --> 01:16.850 First selected. 01:17.430 --> 01:19.350 Sorry, this should be GameObject. 01:20.130 --> 01:20.880 GameObject. 01:20.880 --> 01:22.650 First selected. 01:25.040 --> 01:25.760 Nice. 01:25.790 --> 01:28.340 Now we need an enable method. 01:28.790 --> 01:34.430 I'm going to make it here on enable and on enable over here we're just going to do the very same thing 01:34.430 --> 01:36.230 that we did on difficulty manager. 01:36.230 --> 01:38.420 So I'm going to go to difficulty manager. 01:38.420 --> 01:39.470 And I'm going to take. 01:41.070 --> 01:41.730 Sorry. 01:41.730 --> 01:42.390 Not difficulty. 01:42.390 --> 01:45.270 Manager UI difficulty. 01:45.270 --> 01:45.900 Okay. 01:46.780 --> 01:48.250 I'm going to take these two. 01:48.520 --> 01:53.770 I'm going to copy it, and I'm going to go back to UI skin selection and paste it in here. 01:54.310 --> 01:57.220 And over here we have main menu UI. 01:58.600 --> 02:06.520 So we can just use main menu UI variable, but on enable is called before start. 02:06.520 --> 02:09.520 It's usually awake on enable start. 02:10.250 --> 02:12.470 So we're going to change this to awake. 02:12.470 --> 02:16.010 And in this way we'll have access to component when we use it. 02:16.340 --> 02:17.030 Nice. 02:17.060 --> 02:22.040 Now the next step would be to use navigation for switching those skins. 02:25.250 --> 02:27.560 Uh, on default input. 02:28.840 --> 02:31.060 And we have a vector tool. 02:31.300 --> 02:33.580 Let me go to default input actions. 02:36.200 --> 02:38.150 And over here we have navigation. 02:38.150 --> 02:41.480 And this one returns vector two so we can use it. 02:41.720 --> 02:42.710 Let's go back. 02:44.030 --> 02:45.380 Now let's make. 02:45.940 --> 02:52.030 Let's do a space here and then let's do private default input actions. 02:52.060 --> 02:53.680 Default input. 02:56.910 --> 03:04.230 And then I'm going to go ahead to on enable over here I'm going to do default input enable. 03:07.450 --> 03:08.260 Enable. 03:08.380 --> 03:09.280 Very nice. 03:09.280 --> 03:11.230 And now I can use this default input. 03:11.230 --> 03:14.800 And on the next line we can just do default input. 03:16.110 --> 03:16.950 Uh, UI. 03:17.740 --> 03:24.370 Navigation performed and we're going to do classical ctex lambda expression. 03:24.370 --> 03:31.630 And over here, instead of a method, we can open curly brackets and write functionality inside of curly 03:31.630 --> 03:32.170 brackets. 03:32.170 --> 03:37.600 And every time navigation is performed, it's basically going to do anything that is in curly brackets, 03:37.600 --> 03:40.930 very similar to using a method, but just without the method itself. 03:40.930 --> 03:47.080 So what we're going to do here, we're going to check if context uh read value vector two. 03:47.970 --> 03:48.780 Is. 03:49.420 --> 03:55.660 Less or equals to minus one, then we use an left key and we can. 03:56.420 --> 04:02.150 Call previous skin method if context read value of vector two. 04:02.960 --> 04:08.630 On the x is bigger or equals to one, then next scheme. 04:08.870 --> 04:09.830 Just like that. 04:09.830 --> 04:11.120 And it's going to work. 04:11.570 --> 04:13.340 And let's save this. 04:14.350 --> 04:18.580 I'm going to close all by this, and we're going to go ahead and test it. 04:18.580 --> 04:23.680 And I should let you know that they're going to be a couple of bugs, but we're going to easily fix 04:23.680 --> 04:24.160 them. 04:24.670 --> 04:28.120 Now let me assign first selected to select button. 04:28.120 --> 04:34.630 And I want to try to navigate to Skin Selection from main menu with gamepad, just to check if everything 04:34.630 --> 04:35.410 is working. 04:36.300 --> 04:37.530 So a new game. 04:37.530 --> 04:39.690 Normal mode skin selection. 04:39.900 --> 04:41.850 I see some error in the console. 04:41.850 --> 04:42.870 Let me check. 04:44.420 --> 04:46.670 Default input cannot be enabled. 04:46.940 --> 04:49.820 Um, not set to an instance of an object. 04:49.820 --> 04:50.270 Okay. 04:50.270 --> 04:54.680 It means we have a variable, but we did not assign it and it's empty. 04:54.680 --> 04:58.700 Let's go to awake and let's make a new instance of this. 04:58.700 --> 05:00.560 And I'm doing this for a reason. 05:00.560 --> 05:06.350 Uh, we do a new instance of default input action because we want it to work only inside of skin selection 05:06.350 --> 05:06.890 UI. 05:07.190 --> 05:13.250 We could theoretically take the default input from the main menu over here, but it's better to have 05:13.250 --> 05:17.870 a new instance for this, because in that way it can be used only inside of this script. 05:17.870 --> 05:23.630 And also we can disable it here without affecting input of the main menu, which is really convenient 05:23.630 --> 05:24.350 for us. 05:24.680 --> 05:25.340 Okay. 05:26.150 --> 05:28.730 So let's go again and let's try this. 05:34.830 --> 05:39.630 All right, new game, normal mode and skin selection is selected. 05:39.630 --> 05:44.280 And I can go left right and choose the skin. 05:44.880 --> 05:45.840 Very nice. 05:45.840 --> 05:49.830 The issue there is that you can use it with a keyboard. 05:49.830 --> 05:51.810 You can use it with buttons on a gamepad. 05:51.810 --> 05:57.630 But if you use an analog stick, the left stick, it goes wild like that. 05:58.560 --> 06:00.030 So that's the problem. 06:00.030 --> 06:01.620 It's very easy to fix. 06:01.740 --> 06:02.910 Let's just do it now. 06:05.730 --> 06:06.240 Oh, sorry. 06:06.240 --> 06:08.130 There is one more bug that I need to show you. 06:08.910 --> 06:14.190 And also the reason why we did, uh, new instance of default input. 06:15.680 --> 06:20.720 You can select the skin, but when you go to next UI, you can still switch them. 06:20.720 --> 06:25.430 So we need to disable input from skin selection to avoid that. 06:25.970 --> 06:27.500 Let's go to the script. 06:28.130 --> 06:29.300 Let's make. 06:29.970 --> 06:30.960 On disable. 06:31.890 --> 06:35.280 And we're going to do default input disable. 06:36.730 --> 06:38.590 So that's gonna fix it. 06:38.590 --> 06:39.550 Very nice. 06:39.580 --> 06:44.470 Now let's go and make cool down for the input so we cannot switch them so fast. 06:45.400 --> 06:46.030 Hmm. 06:46.600 --> 06:47.260 Possibly. 06:47.260 --> 06:53.770 Here I'm going to do space and then I'm going to do serialized field, private float input. 06:53.770 --> 06:54.820 Cool down. 06:54.820 --> 06:57.100 I'm going to make it 0.1 F by default. 06:57.280 --> 07:01.090 And also I'm going to do private float last time input. 07:01.970 --> 07:03.050 Very cool. 07:03.050 --> 07:07.220 Let's go inside of previous skin method. 07:11.730 --> 07:16.380 Inside of this method we're going to do last time input equals to time dot time. 07:16.380 --> 07:18.420 And we need to duplicate this. 07:18.420 --> 07:19.380 Cut it out. 07:19.380 --> 07:22.140 Go to Next skin and paste it in here as well. 07:22.970 --> 07:25.700 All right, now we can go back. 07:28.790 --> 07:30.080 To on enable. 07:30.080 --> 07:37.550 And over here we're going to check if time dot time minus last input time is less than input cooldown 07:37.550 --> 07:41.270 then return and this one will not allow us to update the skin. 07:41.270 --> 07:42.860 If we are still on cooldown. 07:43.130 --> 07:46.550 Because of that, it's going to switch it much slower. 07:47.980 --> 07:48.490 Yeah. 07:49.430 --> 07:51.290 Now let's go there. 07:54.390 --> 07:55.050 A new game. 07:55.050 --> 07:55.800 Normal. 07:56.130 --> 07:58.560 I can go left and right to switch the skin. 07:59.620 --> 08:03.130 And it's working okay, and I can accept the speed. 08:03.160 --> 08:05.260 I think it's pretty much okay, I like it. 08:06.880 --> 08:10.330 You can do it slowly as well just by using stick only once. 08:11.550 --> 08:12.240 Good. 08:12.240 --> 08:13.740 Now next issue. 08:13.770 --> 08:15.660 Here you can see I'm using stick. 08:15.660 --> 08:17.670 And you can see I'm selecting those buttons. 08:17.670 --> 08:25.200 If I use stick twice or three times then I'm not even selecting anything and we don't know what is selected. 08:26.710 --> 08:30.580 Uh, we need to disable main menu and enable skin selection. 08:34.310 --> 08:37.190 And over here we have skin price and food bank. 08:37.190 --> 08:42.080 And for some reason these two have an A button component which we really don't need here. 08:42.080 --> 08:43.370 So I'm going to remove it. 08:44.560 --> 08:49.360 Now, these two does not participate in the navigation system. 08:49.360 --> 08:53.740 And also we need to take this next skin and previous skin. 08:53.890 --> 08:55.480 Choose navigation. 08:56.460 --> 08:57.210 None. 08:57.210 --> 09:03.900 So now this cannot be part of navigation and these two cannot be selected, which is just what we need. 09:03.930 --> 09:06.180 The select button and back button. 09:07.230 --> 09:13.350 Should be explicit because I want to do the cycle selection as well. 09:13.350 --> 09:15.300 So for the select button. 09:16.250 --> 09:20.000 The back button going to be up and back button going to be down or back button. 09:20.000 --> 09:21.560 Select button going to be up. 09:22.170 --> 09:22.890 And select. 09:22.890 --> 09:24.000 But I'm going to be down. 09:26.990 --> 09:33.050 Okay, so this should work, I think I like it now let's switch it off. 09:33.050 --> 09:36.230 Let's go to main menu and let's double check everything. 09:36.560 --> 09:40.400 And I think we're going to wrap this up and level selection we're going to do in the next video. 09:40.670 --> 09:44.240 So I can go to new game normal mode I'm using gamepad right now. 09:44.240 --> 09:45.590 I can switch skins. 09:46.680 --> 09:49.740 I don't have a price above this one because I bought it before. 09:51.400 --> 09:58.240 And I can select or I can go back and I'm going to do select and I'm in the level selection and I cannot 09:58.240 --> 09:59.860 switch anything here. 10:00.130 --> 10:01.120 Okay. 10:01.390 --> 10:02.410 Perfect. 10:02.890 --> 10:04.900 Should we do other UIs now. 10:05.230 --> 10:05.710 Okay. 10:05.710 --> 10:06.790 Let's do it now. 10:06.820 --> 10:10.960 Let's go and enable level selection. 10:11.910 --> 10:15.750 And over here we really have only back button and level buttons. 10:15.750 --> 10:18.660 First of all, let's delete this level button from the content. 10:18.660 --> 10:23.310 It's disabled, so we don't really need it and we have it as a prefab. 10:24.270 --> 10:26.430 We need to overwrite, do we need to overwrite it? 10:27.570 --> 10:28.710 I'm not sure. 10:31.780 --> 10:32.800 Let me double check. 10:35.090 --> 10:37.070 UI level button. 10:37.770 --> 10:38.970 What is the difference? 10:40.900 --> 10:41.770 Maybe color. 10:41.770 --> 10:43.330 Maybe I did change the color. 10:43.330 --> 10:44.590 So I'm going to do apply it. 10:44.590 --> 10:45.190 It's okay. 10:45.190 --> 10:48.370 And let me delete it okay good. 10:49.720 --> 10:53.320 Now what we're going to do is go to UI level selection. 10:54.070 --> 10:56.290 Uh, we're going to make on enable method. 10:57.840 --> 10:58.590 On enable. 10:58.590 --> 11:01.830 And inside of this method we're going to enable first selected. 11:01.830 --> 11:04.560 So I'm going to do serialized field private GameObject. 11:05.340 --> 11:06.960 First selected. 11:08.000 --> 11:11.510 And I feel a bit lazy, so I'm going to go to skin selection. 11:13.500 --> 11:18.630 And I'm going to copy these two from here and go to Level selection. 11:18.900 --> 11:25.110 Also, now I start to think that it's better to have just one method update last selected and call it 11:25.110 --> 11:25.710 every time. 11:25.710 --> 11:28.560 And this would be just inside of this method. 11:28.890 --> 11:29.370 Yeah. 11:31.120 --> 11:31.990 Could be cleaner. 11:31.990 --> 11:33.640 Maybe I'll do it on the clean up video. 11:33.640 --> 11:37.210 Let's not worry about that right now so we can see we need main menu. 11:37.210 --> 11:40.960 But it happens that we need this main menu only once. 11:42.040 --> 11:44.680 In uh, on enable method. 11:46.340 --> 11:47.600 So we have two options. 11:47.600 --> 11:50.360 One of them is just to get component here on enable. 11:50.390 --> 11:52.940 Another option is to turn start into awake. 11:52.940 --> 11:56.780 And I think I'm going to do that because we need to do something else in the awake later on. 11:56.780 --> 12:00.890 So now we have awake on enable. 12:00.890 --> 12:08.300 And I'm going to make a variable private main menu main menu UI. 12:10.240 --> 12:11.260 This is working. 12:11.260 --> 12:16.810 And actually I don't want to have first selected button as back button. 12:16.810 --> 12:19.390 I want to have it selected just in case. 12:19.390 --> 12:26.590 But if no, I'm going to select the first level button that we have in that content window. 12:27.370 --> 12:31.360 So let's do GameObject first. 12:32.010 --> 12:37.440 First level button and it's going to be equal to buttons parent. 12:38.620 --> 12:44.500 Get child with a zero index, which basically gets the first child dot. 12:47.270 --> 12:48.260 Game object. 12:48.410 --> 12:49.490 Just like that. 12:50.010 --> 12:58.170 And then if first level button not equals to null, then event system current set selected GameObject 12:58.170 --> 12:59.580 to first level button. 12:59.610 --> 13:03.510 Else select the first selected. 13:04.170 --> 13:09.630 And here we can see a reason why we did not move this line of code inside of this method. 13:09.660 --> 13:10.410 Okay. 13:11.650 --> 13:12.970 This supposed to work? 13:12.970 --> 13:15.430 I like it, and let's save this. 13:15.430 --> 13:17.470 Let's go to UI settings. 13:17.470 --> 13:20.560 Oh before we go to UI settings, let's, uh. 13:21.940 --> 13:23.740 Let's duplicate this two. 13:25.050 --> 13:26.670 Let's go to UI settings. 13:27.800 --> 13:30.590 And let's go to honorable method over here. 13:31.420 --> 13:32.950 Let's place it here. 13:34.940 --> 13:37.700 And we need first selected GameObject. 13:39.680 --> 13:41.870 I'm going to do a sterilized field. 13:42.080 --> 13:43.580 Private first. 13:45.280 --> 13:48.100 About GameObject first selected. 13:48.930 --> 13:51.000 Then we need to go. 13:51.870 --> 13:52.950 Over here. 13:53.920 --> 13:55.690 We need to get component of the main menu. 13:55.690 --> 13:57.820 But here we can do just. 13:58.990 --> 14:03.130 Yet component in parent of UI Maine. 14:03.130 --> 14:03.700 Menu. 14:05.170 --> 14:06.250 Just like that. 14:07.030 --> 14:07.780 All righty. 14:07.780 --> 14:08.980 That's what we need. 14:11.520 --> 14:13.980 Now let's close it. 14:15.130 --> 14:19.120 Let's go ahead and assign first selected as a back button. 14:20.190 --> 14:23.520 And we're going to go ahead and try to go to level selection. 14:23.520 --> 14:25.650 Now none of the menus are enabled. 14:25.650 --> 14:26.730 That is my mistake. 14:26.730 --> 14:28.860 Let's enable main menu and let's go. 14:31.480 --> 14:32.470 A new game. 14:32.470 --> 14:33.280 Normal. 14:34.530 --> 14:35.520 Select. 14:35.910 --> 14:36.840 There is no buttons. 14:36.840 --> 14:37.350 Why? 14:37.350 --> 14:38.610 There is no buttons. 14:40.290 --> 14:41.550 There is a. 14:41.550 --> 14:43.860 Okay, I forgot to get component. 14:46.150 --> 14:49.870 Main menu UI equals two getcomponent in parent. 14:52.500 --> 14:53.460 Okey dokey. 14:53.460 --> 14:54.840 Let's save this. 14:55.710 --> 14:56.730 And let's go. 15:11.710 --> 15:13.210 New game normal. 15:13.210 --> 15:14.260 Select. 15:15.650 --> 15:17.480 Why buttons are disabled. 15:17.480 --> 15:17.990 Man. 15:17.990 --> 15:18.560 What is. 15:18.560 --> 15:20.030 Oh my God, I'm so sorry. 15:20.030 --> 15:23.210 Because I did disable it on the prefab. 15:24.080 --> 15:27.050 UI level button enable. 15:27.870 --> 15:32.550 Okay, let's save this and let's try again for the fifth time. 15:33.090 --> 15:39.120 New game Normal Select, and there is a level buttons that you can select with a gamepad. 15:39.960 --> 15:44.280 Uh, you can select level two and you can play the game and you can go to pose. 15:44.280 --> 15:46.140 And this is what we need to fix right now. 15:46.170 --> 15:47.850 This should be pretty easy. 15:48.330 --> 15:51.090 We need to go to event system and replace it. 15:51.540 --> 15:53.610 So we need to update the input system. 15:53.640 --> 15:58.440 Now we need to go to um UI in game. 16:00.400 --> 16:04.630 We need to make a variable for first selected private GameObject. 16:04.720 --> 16:06.430 First selected. 16:07.160 --> 16:11.510 And then let's go to the place where we pose in the game. 16:13.750 --> 16:14.560 Pause the game. 16:14.560 --> 16:17.470 We're going to do, uh, event system. 16:18.960 --> 16:23.730 Current set selected GameObject to first select it. 16:24.240 --> 16:26.310 All right, I'm gonna save this. 16:26.310 --> 16:27.750 Now let's go back. 16:32.370 --> 16:35.190 We have event system should be working. 16:35.190 --> 16:38.400 Also, we could just assign it here by default. 16:39.620 --> 16:40.880 I guess it would work. 16:41.120 --> 16:43.160 Uh, let's go to play mode. 16:46.320 --> 16:47.550 Going to click pause. 16:49.300 --> 16:53.650 And I think it is selected, but, um, we cannot see it. 16:53.650 --> 16:54.850 Let's fix it. 16:56.410 --> 16:58.090 Let's take these two buttons. 16:58.120 --> 17:01.480 Let's find selected and let's make it red. 17:02.110 --> 17:06.670 Also, let's make it not transparent by default, but transparent when it is normal. 17:07.240 --> 17:08.890 Okay, let's go now. 17:12.720 --> 17:13.410 An. 17:14.610 --> 17:15.390 Is it selected? 17:15.390 --> 17:17.010 I don't know, let me try to confirm. 17:19.500 --> 17:21.090 I feel like it's not selected. 17:23.390 --> 17:24.080 Why not? 17:25.340 --> 17:27.710 Oh, because I did not assign resume. 17:28.530 --> 17:28.920 Okay. 17:28.920 --> 17:29.670 Let's go. 17:32.900 --> 17:34.940 Can I click escape or select it? 17:34.940 --> 17:35.660 Okay. 17:36.320 --> 17:37.370 Works now. 17:38.630 --> 17:41.600 Finally, uh, let's go ahead to these two buttons. 17:41.600 --> 17:43.670 I'm going to enable pose UI. 17:45.700 --> 17:48.370 Can I choose explicit navigation? 17:49.520 --> 17:52.340 And let's drag resume button up. 17:52.340 --> 17:55.400 Sorry menu button up and menu button down. 17:55.400 --> 17:58.610 And for this one, resume button up and resume button down. 17:58.610 --> 18:01.070 So now we can switch them in cycle. 18:01.520 --> 18:02.420 I love it man. 18:02.420 --> 18:07.130 Now we need to disable pose UI and we need to apply overrides. 18:09.180 --> 18:10.320 Very good. 18:14.030 --> 18:20.360 Now we need to go to other scenes and update the event system. 18:23.670 --> 18:26.520 And UI in game will be updated through the prefab. 18:28.330 --> 18:31.570 Event system replace and level for. 18:32.590 --> 18:35.260 Event system replace okay. 18:35.260 --> 18:37.600 Now let's go to main menu. 18:38.140 --> 18:45.070 By the way this should be working on the on here as well because we have one giant button if you remember. 18:45.070 --> 18:46.300 Let's replace it. 18:46.300 --> 18:49.150 And let's just make button as a first selected. 18:49.150 --> 18:50.740 We don't need any scripts here. 18:51.070 --> 18:54.700 Now let's go to main menu and let's check how settings are working. 18:54.700 --> 18:57.130 And we're done with the navigation okay. 18:58.230 --> 18:59.310 Settings. 18:59.810 --> 19:02.030 Nothing is selected for some reason. 19:02.330 --> 19:04.340 Canvas settings. 19:04.370 --> 19:07.700 Let's drag back button as the first selected. 19:08.220 --> 19:09.300 And let's go. 19:12.350 --> 19:17.480 Settings, and you can switch settings over here if you want. 19:19.720 --> 19:21.190 And you can go back. 19:21.430 --> 19:24.310 The only problem we cannot see when they are selected. 19:24.310 --> 19:25.870 So let's go and fix it. 19:27.660 --> 19:29.160 Or the sliders. 19:31.330 --> 19:36.010 Let's do selected again something reddish, so it's really noticeable. 19:39.840 --> 19:40.800 Settings. 19:41.970 --> 19:42.810 Yay! 19:44.200 --> 19:44.860 Okay. 19:47.750 --> 19:48.710 I like it. 19:50.380 --> 19:51.460 And this is so good. 19:51.460 --> 19:52.810 It's like a real game. 19:53.920 --> 19:54.820 Man. 19:54.970 --> 19:56.170 Dude. 19:56.680 --> 19:57.430 Okay. 19:58.400 --> 20:02.120 I'm sorry it took so long, but you see, just lots of tedious work. 20:02.120 --> 20:07.010 But now we know how it's working, and we have lots of good examples on how to set up different UIs. 20:07.460 --> 20:10.580 Thank you so much for paying attention, and I'll see you in the next video.