WEBVTT 00:00.050 --> 00:00.530 Hello guys. 00:00.530 --> 00:01.460 Welcome to the video. 00:01.460 --> 00:08.480 In this one I want to show you how to do navigation in the menu with the help of keyboard or gamepad. 00:09.170 --> 00:11.750 To do that, we need to go to the main menu. 00:12.420 --> 00:18.840 And over here we have event system and we need to click replace with the input system UI input module. 00:18.840 --> 00:24.030 So this one basically will use the default input actions that were made by unity. 00:24.030 --> 00:28.890 You can check them by clicking here and then opening them in here. 00:28.890 --> 00:32.550 And you can see it has navigation submit cancel all of that. 00:32.790 --> 00:34.020 So this will be used. 00:34.020 --> 00:34.950 And that is good. 00:34.950 --> 00:37.860 Now we need to talk about navigation itself. 00:38.040 --> 00:40.650 Actually navigation is already working. 00:40.650 --> 00:42.780 It is built in functionality in unity. 00:42.780 --> 00:45.930 But navigation does not know where to start. 00:45.930 --> 00:48.510 You can see it says first selected none. 00:48.510 --> 00:51.330 And if you don't know where to start, you don't know where to go, right? 00:51.330 --> 00:53.130 Because you don't have the first point. 00:53.130 --> 00:59.850 So to make it work properly, we just need to go ahead to the main menu, take one of the buttons and 00:59.850 --> 01:01.350 drag them here to the first. 01:01.350 --> 01:03.390 Select it and it will work. 01:03.660 --> 01:09.390 And the problem now is that our buttons are transparent and we can't really see when it is selected. 01:09.390 --> 01:12.780 So we'll have to go ahead and. 01:13.520 --> 01:18.200 Select all of the buttons and let me rename this to back button. 01:18.230 --> 01:26.480 I'm going to take it and paste it in here and in here also for previous skin and for the next skin. 01:26.480 --> 01:30.500 Just so I know it's a button and for back button over here. 01:30.500 --> 01:32.930 Now I'm going to select all of the buttons. 01:34.280 --> 01:38.630 Uh, we can we can hold Ctrl and just click them like that. 01:43.010 --> 01:44.270 And on level selection. 01:44.270 --> 01:45.440 There is a back button. 01:45.470 --> 01:51.170 Okay, first of all, if you click visualize over here, you can see how buttons are connected. 01:51.350 --> 01:56.180 And now we're going to make it not transparent just like that. 01:56.180 --> 02:03.350 And then I want to go to the button component and find normal color and make it transparent just like 02:03.350 --> 02:03.980 that. 02:04.340 --> 02:08.510 Then we need to find the selected color. 02:08.510 --> 02:11.690 And we're going to change it to something noticeable. 02:11.690 --> 02:13.100 Maybe red is fine. 02:14.010 --> 02:14.520 Okay. 02:14.670 --> 02:17.970 Now when button is normal, it's going to be just like that. 02:18.210 --> 02:23.490 And when it's selected, it's going to be mix of this dark blue and red color. 02:24.000 --> 02:24.660 Okay. 02:25.970 --> 02:26.150 Uh. 02:26.150 --> 02:27.020 Very good. 02:27.620 --> 02:29.300 Uh, let's go ahead and try this. 02:29.300 --> 02:31.730 Just make sure you have this. 02:31.880 --> 02:35.780 Just make sure you have first selected in the event system over here. 02:35.780 --> 02:37.130 Let's go to play mode. 02:38.850 --> 02:45.960 And you can see new game is selected and I can use arrow keys or w s to switch between these buttons. 02:45.960 --> 02:48.420 Also, I can connect my gamepad. 02:48.450 --> 02:49.410 Give me a second. 02:52.590 --> 02:55.140 Yeah, and I can use gamepad as well. 02:56.580 --> 02:57.690 Very nice. 02:57.690 --> 03:04.260 And the problem now is that if we go to another UI, for example, new game, you can see none of the 03:04.260 --> 03:07.500 buttons are selected and we cannot navigate further. 03:07.500 --> 03:10.200 So that's what we need to fix in this video. 03:10.200 --> 03:13.620 And that's basically most of the job we need to do in this video. 03:13.620 --> 03:15.810 So how are we going to do that. 03:15.810 --> 03:17.520 We're going to go to difficulty. 03:17.520 --> 03:20.400 UI is going to be our example. 03:20.400 --> 03:22.380 Let's go to UI difficulty. 03:22.380 --> 03:27.210 Let's make serialized field private GameObject first selected. 03:27.630 --> 03:30.390 Then I want to make on enable. 03:31.400 --> 03:39.080 And inside of on enable we're going to do event system current set selected GameObject first selected. 03:39.110 --> 03:44.330 Now when we enable UI difficulty we're going to assign new first selected. 03:45.170 --> 03:46.430 Let's go and do that. 03:48.750 --> 03:53.310 Uh, we're going to give it normal mode button as a first selected. 03:53.550 --> 03:55.290 And now if I go to play mode. 03:56.960 --> 03:59.540 I can click enter and go here. 03:59.540 --> 04:03.050 And I have easy, normal and hard and I can switch between buttons. 04:03.720 --> 04:04.650 Very nice. 04:04.650 --> 04:07.020 Very, very, very nice, I like it. 04:07.260 --> 04:14.640 Uh, one thing I want to add here before we go further is to enable navigation in cycles. 04:14.700 --> 04:21.000 Uh, at the moment, if we navigate in the menu, I can go all the way up or all the way down, but 04:21.000 --> 04:24.930 I cannot, uh, you know, click down now to switch to continue. 04:24.930 --> 04:26.340 And that's what I want to do. 04:26.340 --> 04:27.720 So this is how I fix it. 04:27.720 --> 04:29.370 We go to continue button. 04:29.730 --> 04:34.050 And over here we have navigation automatic which works perfectly fine. 04:34.050 --> 04:36.750 But also we can go and choose none. 04:36.750 --> 04:43.470 And then explicit and explicit allows us to do manual setup of the UI. 04:43.830 --> 04:49.740 And for the select app I'm going to choose settings or select down. 04:49.740 --> 04:51.870 I'm going to choose New Game button. 04:52.350 --> 04:55.290 And now it will work in cycles as well. 04:55.470 --> 04:57.780 For new game button it works pretty fine. 04:57.780 --> 05:00.360 We don't need to change anything for settings button. 05:00.360 --> 05:08.310 Again, we can choose explicit and drag New Game on up and Continue button on down. 05:09.350 --> 05:09.890 Perfect. 05:09.890 --> 05:15.500 Now, if you go to play mode and try again, you can switch between buttons like that. 05:15.530 --> 05:16.550 Isn't it cool? 05:16.640 --> 05:17.600 I love it, man. 05:17.870 --> 05:19.370 Now let's go ahead. 05:19.970 --> 05:21.320 Disable main menu. 05:23.060 --> 05:24.920 Enable difficulty UI. 05:26.020 --> 05:28.570 And over here I want to do the same. 05:28.570 --> 05:31.420 So I'm going to choose explicit for. 05:32.240 --> 05:34.940 Easy button for the down selection. 05:34.940 --> 05:37.070 Going to be normal mode for up selection. 05:37.070 --> 05:38.690 Going to be back button. 05:39.360 --> 05:41.130 And same goes for back button. 05:41.640 --> 05:42.720 Explicit. 05:44.280 --> 05:49.530 And then, uh, a button, hard down button. 05:49.740 --> 05:50.640 Easy mode. 05:50.760 --> 05:51.390 All right. 05:51.420 --> 05:52.470 Now let's see this. 05:52.470 --> 05:57.300 And there is one more fix we need to apply to the UI so I can cycle between buttons. 05:57.300 --> 05:58.170 Very good. 05:58.170 --> 06:02.640 Now I can go back and you can see none of the buttons are selected. 06:02.730 --> 06:06.330 That happens because well we don't have the functionality for it. 06:06.330 --> 06:07.650 We need to fix it. 06:07.650 --> 06:13.020 Let's go to main menu and you can see the problem is this one does not have any script. 06:13.020 --> 06:19.290 We have scripts over here on all of the elements, but for main menu it is on canvas. 06:19.500 --> 06:23.070 So we need to just make a script. 06:23.070 --> 06:24.450 I'm going to do UI. 06:26.530 --> 06:29.860 Uh, update first selected. 06:29.950 --> 06:30.730 Just like that. 06:30.730 --> 06:31.600 Why not? 06:32.490 --> 06:35.820 Let's go and take these lines of code. 06:35.850 --> 06:38.910 I'm going to copy it and I'm going to go to this UI. 06:38.940 --> 06:39.780 First select it. 06:39.780 --> 06:41.640 Also let's move it to UI folder. 06:42.620 --> 06:43.400 Yes. 06:44.480 --> 06:45.140 It's okay. 06:45.170 --> 06:45.980 Move it. 06:46.310 --> 06:49.640 So we're going to open this script paste it in here. 06:49.640 --> 06:51.800 And I want to remove difficulty manager. 06:51.800 --> 06:53.810 And now it's supposed to be good. 06:54.230 --> 06:55.250 Let's go back. 06:56.520 --> 07:01.350 You could also save last selected if you like, but I think that's too much. 07:01.710 --> 07:04.740 And let's go, let's go, let's go and let's. 07:05.990 --> 07:06.920 Uh, just, uh. 07:09.600 --> 07:10.230 Drug. 07:10.230 --> 07:12.630 Maybe new game to the first selected. 07:12.630 --> 07:14.790 Okay, now let's go and try again. 07:17.360 --> 07:18.620 Works very well. 07:18.620 --> 07:22.370 We go to new game, works very well. 07:22.370 --> 07:24.440 Go back, works very well. 07:24.620 --> 07:26.900 Now there is another issue. 07:26.900 --> 07:29.060 If you click the mouse over here. 07:29.800 --> 07:31.810 None will be selected anymore. 07:31.810 --> 07:37.750 And then you would have to, you know, restart the game because it cannot be controlled with the keyboard 07:37.750 --> 07:38.410 anymore. 07:39.740 --> 07:41.180 How could we fix it? 07:41.540 --> 07:43.040 Actually, it's pretty simple. 07:43.040 --> 07:45.710 We just need to go to event system. 07:47.540 --> 07:51.500 Over here and we need to click deselect on the background. 07:51.500 --> 07:52.400 False. 07:52.700 --> 07:58.490 And now when you, uh, go to play mode, you can switch button with the keyboard. 07:58.490 --> 08:03.710 And if you click it with your mouse it will not be deselected, which is pretty much okay I guess. 08:05.630 --> 08:07.250 By default we have this enabled. 08:07.250 --> 08:12.680 So you have button deselected and there is a way of switching it back. 08:12.680 --> 08:15.950 If you're using the keyboard like it's going to select something again. 08:15.950 --> 08:17.510 And we could do it that way. 08:17.540 --> 08:18.440 There are two options. 08:18.440 --> 08:22.520 One of them would be to select button every time you put your mouse over the object. 08:22.520 --> 08:29.480 Another option is to just select the last selected when you do a navigation with a keyboard again. 08:29.480 --> 08:31.220 So what do we choose? 08:31.220 --> 08:37.430 If you like to disable selection when you use your mouse and then enable selection when you use navigation, 08:37.430 --> 08:43.880 then you would have to make an event and subscribe to navigation of the UI and use it when you use navigation. 08:43.880 --> 08:48.560 Again, actually, maybe let's try that quickly because I'm curious, supposed to work. 08:48.920 --> 08:50.840 Um, so what do we need to do? 08:51.360 --> 08:55.050 We have this default input actions so we can use them. 08:55.050 --> 08:57.750 We're just going to go to UI main menu. 08:58.900 --> 09:03.430 Let's make private default input actions. 09:04.280 --> 09:05.810 Default input. 09:07.710 --> 09:10.980 Then we need to make a method. 09:12.600 --> 09:16.050 I'm going to do private void update selected. 09:16.050 --> 09:18.690 And by the way, maybe there is a better way. 09:18.690 --> 09:20.370 Maybe there is some button I don't know about. 09:20.370 --> 09:21.090 Let me know. 09:21.090 --> 09:21.540 Okay. 09:21.540 --> 09:26.700 Anyway, we're going to check if event system current. 09:29.070 --> 09:32.340 Current selected GameObject is equals to null. 09:32.670 --> 09:40.980 Then we need to do event system current set selected GameObject and we need to know what to select. 09:41.280 --> 09:45.060 I think we're just going to make a public GameObject. 09:45.090 --> 09:46.380 No, no that would be. 09:46.560 --> 09:47.370 Let's not do it. 09:47.370 --> 09:52.320 Let's make it a private GameObject last selected. 09:52.470 --> 09:55.500 And then let's make the. 09:59.010 --> 09:59.160 Uh. 09:59.160 --> 10:00.120 Public void. 10:00.120 --> 10:00.780 Public void. 10:00.780 --> 10:01.500 Update. 10:01.500 --> 10:03.390 Last selected. 10:03.510 --> 10:04.350 Just like that. 10:05.050 --> 10:08.560 And over here we're going to do last select it equals to. 10:08.920 --> 10:12.190 Game object new last selected. 10:12.610 --> 10:14.860 We're going to pass it here new last selected. 10:15.250 --> 10:19.150 And then over here we're going to give it last selected. 10:19.150 --> 10:21.730 Now there is a way to update this. 10:21.730 --> 10:27.730 When object is selected you could basically go to a button um like any button. 10:29.390 --> 10:31.070 An update last selected there. 10:31.070 --> 10:32.570 Let's subscribe to event first. 10:32.570 --> 10:35.300 Then we're going to do it with a script on each button. 10:35.300 --> 10:35.780 Yeah. 10:35.780 --> 10:40.970 So we're going to do default input equals to new default input actions. 10:41.510 --> 10:42.770 By the way I just got this idea. 10:42.770 --> 10:45.680 So I'm not sure it's going to work but I really hope it will. 10:45.920 --> 10:50.780 Then we're going to need on enable default input enable. 10:51.530 --> 11:03.440 Then default input um ui navigation uh performed plus equals context return me update selected. 11:04.350 --> 11:05.280 Just like that. 11:05.280 --> 11:07.410 Let's check it with, uh, on enable. 11:07.410 --> 11:09.720 And then if it works I'm going to do on disable. 11:09.720 --> 11:10.260 Okay. 11:10.260 --> 11:12.270 Now we need to update last selected. 11:12.270 --> 11:16.470 We just need to call this method every time one of the buttons is selected. 11:18.050 --> 11:20.000 And we can go ahead. 11:23.300 --> 11:24.350 Make a script. 11:25.470 --> 11:29.250 UI update last selected. 11:32.500 --> 11:34.060 Update last selected. 11:34.420 --> 11:40.150 Over here we're going to put comma and type I select handler. 11:42.400 --> 11:44.830 Let's implement the interface. 11:44.830 --> 11:49.060 And then inside of this interface we're going to do a very simple thing. 11:49.270 --> 11:51.640 We're going to need component of UI main menu. 11:51.640 --> 12:00.490 So I'm going to do private UI main menu main menu awake main menu equals to get component in parent 12:00.490 --> 12:02.170 because it's somewhere in parent. 12:03.000 --> 12:06.330 And then on select we're going to do main menu update last. 12:06.330 --> 12:09.540 Select it to this game object just like that. 12:09.540 --> 12:14.040 Now we have to put this script on each button that can be selected. 12:14.160 --> 12:18.060 Let me expose the variable just so I'm sure it is working. 12:19.990 --> 12:21.820 Oh, we cannot do it this way. 12:21.820 --> 12:24.550 We need to expose it on the main menu. 12:25.290 --> 12:26.250 I'm so sorry. 12:26.250 --> 12:27.870 Let's do serialize field. 12:30.980 --> 12:33.830 Now in unity I'm going to select back button. 12:33.830 --> 12:34.400 Hard mode. 12:34.400 --> 12:35.060 Normal mode. 12:35.090 --> 12:35.750 Easy mode. 12:35.750 --> 12:37.850 Settings new game and continue. 12:37.850 --> 12:41.480 And let's drag update last selected here. 12:41.480 --> 12:44.780 Now this one is supposed to update this variable over here. 12:44.780 --> 12:49.880 Every time we select the button let's go to play mode I'm going to use my keyboard. 12:49.880 --> 12:51.800 We updating the value here. 12:52.100 --> 12:52.940 This is good. 12:52.940 --> 12:58.160 Now if I use my mouse it was not selected because of this checkbox over here. 12:58.280 --> 12:59.570 Let me try again. 13:01.620 --> 13:04.410 I'm going to click deselect on the background. 13:05.900 --> 13:07.130 And let's go. 13:07.550 --> 13:09.080 So nothing works. 13:09.620 --> 13:11.660 I mean, sorry, everything works. 13:12.200 --> 13:13.580 Now I'm going to click. 13:13.580 --> 13:16.190 My mouse object was deselected. 13:16.220 --> 13:18.350 I can use my mouse for the input. 13:18.350 --> 13:21.590 Then I can click the keyboard again and I can select the button. 13:21.680 --> 13:23.390 Cool I love it. 13:24.820 --> 13:27.670 I guess this is the perfect option, so I'm not going to change it. 13:28.350 --> 13:30.210 I think I like it. 13:31.270 --> 13:32.410 Yes, I like it. 13:32.410 --> 13:33.340 Definitely. 13:33.730 --> 13:36.010 Now, this one was not selected for some reason. 13:36.820 --> 13:37.930 Wai wai. 13:37.930 --> 13:38.710 Wai wai. 13:40.100 --> 13:40.670 Um. 13:42.930 --> 13:46.020 Oh, this one does not have update first selected. 13:46.020 --> 13:46.560 Okay. 13:47.580 --> 13:48.750 Should be fine now. 13:53.140 --> 13:54.100 New game. 13:54.910 --> 13:55.120 Uh. 13:55.120 --> 13:56.020 Go back. 13:56.600 --> 13:57.380 New game. 13:58.970 --> 13:59.780 Go back. 14:02.690 --> 14:03.890 Yes. 14:03.890 --> 14:05.180 Okay. 14:05.180 --> 14:06.590 I love it so much. 14:07.130 --> 14:10.820 Um, you've seen that if you don't click your mouse. 14:10.820 --> 14:13.460 But if you just move it like that. 14:14.350 --> 14:17.020 We do not deselect the object. 14:17.140 --> 14:18.970 So that may be an issue. 14:18.970 --> 14:26.440 And if you like to fix it, you can do that simply by going to this, uh, update last selected. 14:27.890 --> 14:30.200 Let's make pointer enter ie. 14:30.230 --> 14:30.860 Pointer. 14:30.860 --> 14:31.580 Enter. 14:32.420 --> 14:34.340 Let's implement interface. 14:35.770 --> 14:38.650 And then over here we're going to do main menu. 14:39.070 --> 14:40.060 No, sorry. 14:40.090 --> 14:41.710 Event system. 14:41.710 --> 14:42.730 Current. 14:43.510 --> 14:44.770 Uh, current. 14:44.770 --> 14:46.180 Selected game object. 14:46.180 --> 14:47.470 Or actually, let's do set. 14:47.470 --> 14:48.730 Selected game object. 14:48.730 --> 14:49.390 Null. 14:49.690 --> 14:50.680 Just like that. 14:52.760 --> 14:54.110 And this will fix it. 14:54.140 --> 15:00.620 Now you can navigate with mouse and keyboard and this time for testing I'm going to use gamepad. 15:00.650 --> 15:02.390 Let me enable my gamepad. 15:02.870 --> 15:07.130 Enable switch on I mean why so long is my Bluetooth? 15:07.970 --> 15:11.480 I think my Bluetooth switched off okay there is a gamepad. 15:11.510 --> 15:15.620 Now I'm going to go to play mode and we can navigate in the UI. 15:16.220 --> 15:17.060 Very nice. 15:17.060 --> 15:18.470 Now I'm going to use my mouse. 15:18.590 --> 15:20.000 We deselecting the object. 15:20.000 --> 15:25.280 Now we can use the mouse to navigate and I can use gamepad again to switch the object. 15:26.400 --> 15:27.330 Nice. 15:29.190 --> 15:31.140 A it's not working here. 15:31.410 --> 15:31.740 Why? 15:31.740 --> 15:33.090 It's not working here now. 15:33.120 --> 15:34.290 I'm using gamepad. 15:34.290 --> 15:35.370 Let me see. 15:35.370 --> 15:39.450 I guess because last selected is from the previous menu. 15:44.350 --> 15:45.550 Yeah yeah yeah. 15:45.550 --> 15:46.330 That's the. 15:47.080 --> 15:47.860 Okay. 15:48.220 --> 15:49.150 So. 15:50.320 --> 15:51.610 Something to do here. 15:51.610 --> 15:53.470 Let's go to UI difficulty. 15:54.410 --> 16:00.320 And on enable, we're going to use main menu as well just in case you're going to make private main 16:00.320 --> 16:01.130 menu. 16:01.370 --> 16:03.410 Main menu. 16:03.920 --> 16:05.570 Let's open a wake. 16:05.570 --> 16:10.580 Let's do main menu equals to get component in parent of main menu. 16:10.580 --> 16:18.170 And on enable I'm going to do main menu update last selected to first select it just in case. 16:19.440 --> 16:19.950 Wow. 16:19.950 --> 16:22.170 I'm doing like, full mode debug, man. 16:22.290 --> 16:23.580 I kind of like it. 16:23.610 --> 16:25.200 Let's go now. 16:25.740 --> 16:26.520 Let's go. 16:26.520 --> 16:27.300 So. 16:28.540 --> 16:29.320 He's in gamepad. 16:29.350 --> 16:33.370 Then I'm using mouse to go to new game and normal is selected. 16:33.370 --> 16:34.300 Okay. 16:34.660 --> 16:41.170 Go back new game now only mouse and I'm going to try to use navigation and it works. 16:43.040 --> 16:44.120 Yes. 16:44.120 --> 16:44.690 Yes. 16:44.690 --> 16:45.230 Boy. 16:45.230 --> 16:46.160 So cool. 16:46.160 --> 16:48.260 Well, this is just like a full scale game. 16:48.260 --> 16:49.310 I kind of like it. 16:49.310 --> 16:55.640 Uh, well, we still have to set up a couple of UIs like this one, two, three, and also in game UI. 16:55.640 --> 16:58.340 But let's do that in the next video. 16:58.340 --> 17:00.380 I want to break it into two parts. 17:00.380 --> 17:00.770 Okay. 17:00.770 --> 17:01.310 Let's go.