WEBVTT 00:00.020 --> 00:00.500 Hello guys. 00:00.500 --> 00:01.490 Welcome to the video. 00:01.490 --> 00:06.350 So in this one we're going to implement uh mobile controls for this game. 00:06.350 --> 00:10.460 And for that I'm going to need a project from section 11. 00:10.460 --> 00:11.750 That's what I'm going to get. 00:11.750 --> 00:19.070 Because this new input system and things that we implemented in the co-op version of the game, they 00:19.070 --> 00:24.260 are basically useless and they only make it difficult to implement touch controls. 00:24.260 --> 00:25.430 So we don't need them. 00:25.430 --> 00:26.180 Uh, Flynn. 00:26.180 --> 00:27.050 Enemies. 00:27.290 --> 00:29.120 This is an optional content. 00:29.120 --> 00:32.210 If you want to have Flynn enemies, you can add them later on. 00:32.210 --> 00:36.230 Or just maybe drag a prefab to a new project. 00:36.230 --> 00:37.460 It's supposed to work. 00:37.460 --> 00:41.330 Okay, so I'm going to open this project now that I had in the section 11. 00:41.330 --> 00:43.370 And we're going to implement touch controls. 00:43.370 --> 00:44.000 Okay. 00:44.000 --> 00:47.120 I've got the project from the end of section 11. 00:47.120 --> 00:49.910 This does not have any new input system. 00:49.910 --> 00:52.370 It has the project as it was there. 00:52.370 --> 00:55.220 And now we're going to implement touch controls. 00:55.220 --> 00:55.850 Okay. 00:56.120 --> 00:59.960 Uh, first of all, let me go to one of the scenes so I can see the game. 00:59.960 --> 01:02.150 Um, level one is okay. 01:02.150 --> 01:06.050 And now we need to get this asset from the asset store. 01:06.470 --> 01:07.850 I'm going to show it to you here. 01:07.850 --> 01:09.740 It is called joystick pack. 01:09.770 --> 01:13.430 You can just search it, uh, by typing joystick. 01:14.330 --> 01:15.860 And it should be the first one. 01:15.860 --> 01:18.650 And I'm going to touch link to this video as well. 01:18.650 --> 01:19.280 Okay. 01:19.280 --> 01:22.670 So you get this asset pack I already have it in unity. 01:22.670 --> 01:24.170 So I'm going to jump back. 01:25.630 --> 01:31.360 I'm going to go to Windows Package Manager, my assets and I'm going to look for joystick. 01:34.070 --> 01:36.110 And there it is. 01:36.140 --> 01:36.830 Joystick. 01:37.670 --> 01:39.860 So I'm going to just import it. 01:39.950 --> 01:41.660 I'm going to import everything. 01:50.220 --> 01:52.380 And now first let's make it work. 01:52.380 --> 01:54.930 Then I'm going to talk about this joystick a little bit. 01:55.860 --> 01:59.160 Or we need to go to asset joystick pack prefabs. 01:59.160 --> 02:06.990 And over here I'm going to go to UI in game and drag this variable joystick over here. 02:09.190 --> 02:13.150 And because of the way prefab is set, let's go to normal mode. 02:13.150 --> 02:16.480 It's going to be attached to the bottom left corner, so it's fine. 02:17.920 --> 02:20.200 Uh, we also need a jump button for the future. 02:20.200 --> 02:22.960 So I'm going to make UI. 02:23.660 --> 02:24.560 Button. 02:25.990 --> 02:27.640 Let's focus on this button. 02:27.850 --> 02:30.850 We're going to name it as um jump. 02:32.020 --> 02:33.430 But on UI. 02:35.060 --> 02:39.170 And I think I want to make it, uh, bigger. 02:39.170 --> 02:40.640 Something like. 02:41.330 --> 02:42.890 Something like this. 02:46.620 --> 02:49.770 Uh, let's attach it to the right side. 02:49.770 --> 02:51.120 Make it wider. 02:51.120 --> 02:53.190 So it should take half of the screen. 02:53.190 --> 02:55.050 Yeah, something like this will work. 02:55.050 --> 02:57.660 And then let's reduce a little bit from the top. 02:58.390 --> 03:02.500 Because on the top, we're gonna place a menu button with a UI. 03:02.530 --> 03:03.100 Okay. 03:04.230 --> 03:05.070 Nice. 03:05.100 --> 03:10.680 Now let's go to the image and make it transparent so we cannot see this button. 03:10.680 --> 03:15.930 Maybe for testing you want to make it visible, but after you're done, you're going to make it completely 03:15.930 --> 03:16.740 invisible. 03:16.740 --> 03:17.340 Okay. 03:17.900 --> 03:20.300 And we want to remove text from here. 03:20.600 --> 03:22.940 Now we need a component on this jump button. 03:24.830 --> 03:27.230 So we can easily recognize this button. 03:27.440 --> 03:31.700 I think we can go to scripts UI and we're going to make. 03:33.830 --> 03:36.320 UI jump button. 03:37.590 --> 03:38.610 Very nice. 03:38.610 --> 03:41.460 Now let's put this on the game object. 03:44.050 --> 03:46.720 And this will do the job for us later on. 03:46.720 --> 03:48.400 Or maybe let's start with this one. 03:48.400 --> 03:49.000 Why not? 03:49.000 --> 03:52.690 Let's go to jump button over here. 03:52.690 --> 03:54.940 First of all, we need a method. 03:55.750 --> 04:00.130 So we can update players reference because we're going to call jump method from here. 04:00.160 --> 04:00.850 Okay. 04:00.970 --> 04:02.170 I'm going to do um. 04:04.100 --> 04:05.540 Private player. 04:06.170 --> 04:06.890 Player. 04:06.920 --> 04:11.180 Then we need public void update players. 04:11.180 --> 04:12.200 Ref. 04:12.380 --> 04:13.310 And we're going to do. 04:13.310 --> 04:14.330 Player. 04:14.480 --> 04:15.980 New player. 04:16.340 --> 04:18.680 And we're going to do player equals to new player. 04:18.680 --> 04:22.340 We need this because every time player dies we would lose the reference. 04:22.340 --> 04:27.320 And we can call this method every time we respawn the player to update the reference. 04:28.890 --> 04:33.300 Now we need to get the interface I pointer. 04:34.110 --> 04:35.340 Pointer down. 04:37.420 --> 04:39.700 And we need to click Alt Enter. 04:40.400 --> 04:42.500 Or you can just use your mouse. 04:42.680 --> 04:45.590 Quick actions implement interface. 04:45.980 --> 04:54.050 Now whatever we write inside of this method will be called every time pointer down on the jump button 04:54.050 --> 04:54.800 we have. 04:56.280 --> 05:03.510 In the pointer is usually mouse, but if you use your phone, then pointer becomes your finger and every 05:03.510 --> 05:08.670 time you touch the button with your finger, it's going to call on pointer down method. 05:08.880 --> 05:11.370 That is basically the perfect solution for us. 05:11.610 --> 05:15.450 So now we just need to call a jump method from a player script. 05:16.160 --> 05:18.080 Now let's go to player script. 05:20.820 --> 05:23.010 And we already have. 05:24.640 --> 05:25.600 This. 05:26.880 --> 05:27.690 Wait a second. 05:27.690 --> 05:28.830 Let's find it. 05:29.650 --> 05:30.460 Yeah, yeah. 05:30.460 --> 05:32.260 We have this jump button method. 05:32.260 --> 05:33.310 How could we name it? 05:33.310 --> 05:35.500 So it's not confusing for us. 05:36.540 --> 05:39.900 Let's name it as we're going to rename this to jump. 05:40.630 --> 05:41.680 Attempt. 05:41.680 --> 05:43.420 So it's going to attempt the jump. 05:43.840 --> 05:46.180 And then we're going to need a new method. 05:47.340 --> 05:48.600 It's going to be public. 05:49.030 --> 05:51.550 Void jump button. 05:53.270 --> 05:58.940 And this jump button will do the same thing as these two lines of code. 05:58.940 --> 06:06.290 So basically we can cut this out, paste it in here and then call jump button over here if we need to. 06:07.360 --> 06:08.440 Very nice. 06:08.620 --> 06:09.400 Yeah. 06:09.400 --> 06:14.170 So we kind of took these two lines of code into a method, and we changed the name of the method over 06:14.170 --> 06:14.770 here. 06:14.800 --> 06:17.440 Now we can go back to UI jump button. 06:19.360 --> 06:23.110 And over here we're going to do player jump button. 06:23.110 --> 06:28.420 So every time we touch the jump button it's going to call jump button from a player and make it jump. 06:28.420 --> 06:29.410 Simple as that. 06:29.410 --> 06:34.660 Now we need to, uh, call this method every time player is respond. 06:34.690 --> 06:37.090 I think we can do it in the wake of the player. 06:37.090 --> 06:38.650 That would be pretty easy. 06:38.860 --> 06:42.190 So we're going to go to the awake. 06:43.410 --> 06:43.980 Yeah. 06:43.980 --> 06:45.000 Why not here. 06:45.000 --> 06:48.060 And we're going to do something like this. 06:48.060 --> 06:52.710 Find first object by type of UI jump button. 06:52.710 --> 06:55.230 And I'm assuming we're going to have only one jump button. 06:55.230 --> 06:57.390 So this should be pretty much okay. 06:57.570 --> 07:00.540 And we're going to call update layers reference. 07:00.540 --> 07:02.460 And over here we need to pass the player. 07:02.460 --> 07:05.670 And to do that we can easily type this. 07:06.150 --> 07:07.230 Simple as that. 07:08.530 --> 07:11.140 All right, so this will do the job. 07:14.240 --> 07:15.740 Let's go and try this. 07:17.140 --> 07:17.740 Yeah. 07:17.890 --> 07:19.060 Let's go and try. 07:23.370 --> 07:24.840 We're going to go to play mode. 07:26.840 --> 07:30.980 And now when I'm pressing this button, character is jumping. 07:31.340 --> 07:32.210 No delay. 07:32.210 --> 07:33.140 Nothing. 07:33.170 --> 07:34.100 Very good. 07:34.100 --> 07:39.200 And it will work with your fingers as well when we make a mobile build. 07:39.230 --> 07:39.830 Okay. 07:41.370 --> 07:42.000 Very good. 07:42.000 --> 07:43.080 Now we know it works. 07:43.080 --> 07:45.900 We can just make this button transparent. 07:50.520 --> 07:51.990 Let's do it like so. 07:53.780 --> 07:55.730 And let's work on a joystick. 07:56.150 --> 07:58.790 Same as a jump button over here. 07:58.790 --> 08:00.710 This joystick has a script. 08:00.710 --> 08:05.540 This one says Variable joystick and it inherits from a joystick script. 08:05.540 --> 08:10.310 We can check that by going to edit script over here. 08:12.530 --> 08:20.630 We can see it inherits from a joystick, and this joystick has values of horizontal and vertical input. 08:20.660 --> 08:23.270 The code here might seem complicated. 08:23.270 --> 08:24.320 You just ignore it. 08:24.320 --> 08:26.300 We don't really need to know how it works. 08:26.300 --> 08:28.910 It's just the same as we used input. 08:28.910 --> 08:31.370 Get access row, but from a joystick. 08:31.400 --> 08:31.940 Yeah. 08:32.090 --> 08:32.960 Very good. 08:32.960 --> 08:37.670 So we just need to get this variable and then we need to get these values from here. 08:38.810 --> 08:40.040 This is how we can do it. 08:40.040 --> 08:43.310 We can go to player and find, um. 08:45.310 --> 08:46.870 This place over here. 08:46.930 --> 08:49.060 And we can make private joystick. 08:50.230 --> 08:52.540 Joystick variable. 08:52.960 --> 09:00.400 Then in the awake we can do something like joystick equals to find first object by type. 09:00.400 --> 09:03.520 And again I'm assuming we're going to have only one joystick on the screen. 09:03.520 --> 09:05.260 So it's fine to do it this way. 09:06.440 --> 09:06.980 Nice. 09:06.980 --> 09:12.860 Now we have a reference to the joystick and we can go to the handle input. 09:14.350 --> 09:20.020 Over here and replace these two with a with the input from a joystick. 09:20.380 --> 09:21.490 Uh, let's do it. 09:21.490 --> 09:25.210 Let's just comment out these two because we might need them later. 09:26.270 --> 09:29.750 Uh, I'm going to do x input equals to joystick. 09:31.440 --> 09:33.780 Uh, horizontal and y input. 09:34.580 --> 09:36.590 Equals to joystick vertical. 09:36.590 --> 09:41.510 And as you understand, if you want to test it on the computer, then you would have to uncomment these 09:41.510 --> 09:42.590 two lines of code. 09:42.590 --> 09:48.080 And I mean if you want to have control with the keyboard again, but we need this for mobile. 09:48.080 --> 09:49.670 So we're going to keep these two. 09:49.670 --> 09:50.360 Okay. 09:50.570 --> 09:52.640 Uh let's go back to unity. 09:54.770 --> 10:00.590 And now we're supposed to go to play mode, and character should be controlled with the joystick. 10:01.220 --> 10:02.090 Yes. 10:02.090 --> 10:03.170 Very nice. 10:03.200 --> 10:11.000 Now, this is working very well and we only need to discuss the joystick itself. 10:11.000 --> 10:14.330 This is the asset that was made by someone. 10:14.330 --> 10:14.930 It's a shame. 10:14.930 --> 10:15.560 I don't know who. 10:15.560 --> 10:16.490 So let me check. 10:16.490 --> 10:19.400 It was made by Phoenix Studio. 10:20.010 --> 10:21.120 Thank you guys. 10:21.120 --> 10:21.690 Yeah. 10:22.440 --> 10:23.280 And so. 10:24.140 --> 10:25.550 It's pretty simple. 10:25.550 --> 10:27.260 Uh, it has joystick type. 10:27.260 --> 10:32.870 And you probably remember we had different prefabs over here for the joystick. 10:34.260 --> 10:41.430 So what you should know is just these three prefabs is a single joystick with a single type and variable 10:41.430 --> 10:45.900 joystick is a joystick that contains all three of them together. 10:45.900 --> 10:49.800 So if you want to have just one, you can drag one like that. 10:49.800 --> 10:54.630 But there is no point because you can have variable joystick and switch between the one you want. 10:54.630 --> 10:58.140 Okay, now let's go to play mode and see the difference between them. 10:59.580 --> 11:02.010 Uh, fixed joystick is placed in the corner. 11:02.010 --> 11:03.000 It's always there. 11:03.000 --> 11:04.350 It does not disappear. 11:04.350 --> 11:12.270 If you go to joystick type and choose floating, then your joystick is going to follow your finger. 11:12.890 --> 11:14.810 Sorry I died. 11:15.320 --> 11:16.430 Was not supposed to. 11:25.760 --> 11:32.600 So as I was saying, the floating type will follow your finger a little bit so you can touch at any 11:32.600 --> 11:39.080 place on the screen as long as it's within the joystick area over here on the top over here you can 11:39.080 --> 11:39.530 see. 11:41.650 --> 11:42.610 There's going to be like that. 11:42.610 --> 11:43.420 I kind of like it. 11:43.420 --> 11:44.740 I think it works very well. 11:44.740 --> 11:46.330 So we can use this one. 11:46.330 --> 11:48.520 And last option is dynamic. 11:48.520 --> 11:55.000 This one will not only appear at the place where you touch screen with your finger, but also it's going 11:55.000 --> 11:56.590 to follow your finger like that. 11:56.590 --> 11:58.480 And if you like it, you can keep it. 11:58.480 --> 11:59.080 Why not? 11:59.080 --> 12:00.460 Seems pretty. 12:00.460 --> 12:01.000 Yeah. 12:01.540 --> 12:04.030 And also something else here. 12:04.030 --> 12:10.960 You can see if I touch my joystick really slow, like by a little bit, my character barely moves. 12:11.990 --> 12:13.190 This is how it works. 12:13.190 --> 12:19.700 It's happening because we have a float value from a joystick, and if you want to have it like it was 12:19.700 --> 12:24.680 before, we need to switch over here snap x and snap y. 12:24.680 --> 12:29.960 And now it's going to be snappy and responsive just like it was before. 12:31.130 --> 12:33.410 Okay, that's the idea. 12:33.920 --> 12:35.870 So very good. 12:35.870 --> 12:37.520 Let me go out of the play mode. 12:37.520 --> 12:43.520 And I think I want to increase the joystick area to something like this. 12:43.850 --> 12:47.480 And let's change it to floating snap snap. 12:47.940 --> 12:52.770 And now we need to take UI in-game and apply overrides. 12:52.770 --> 12:57.120 So these changes will be applied to all of the levels we have in the game. 12:57.840 --> 12:58.620 Very good. 12:58.620 --> 13:01.620 Now I can go to scene level two. 13:02.380 --> 13:03.400 Let me save it. 13:03.520 --> 13:10.360 And I have joystick here and I control and I can control character in this version as well. 13:11.600 --> 13:12.200 Yeah. 13:13.440 --> 13:14.100 Very good. 13:14.130 --> 13:22.410 Now lastly, we need to add some sort of a pause button because we cannot press escape button in here. 13:22.410 --> 13:23.040 Right. 13:23.900 --> 13:25.610 Or do we not have escape? 13:26.520 --> 13:29.310 Do we not have pause functionality at all? 13:30.650 --> 13:32.900 So I'm sure I made it. 13:33.290 --> 13:34.400 There is a post UI. 13:34.430 --> 13:35.330 Let me check. 13:35.630 --> 13:37.100 Oh, I'm using PKI. 13:37.130 --> 13:37.940 Okay. 13:41.360 --> 13:43.130 Let's go and make pose button. 13:44.290 --> 13:46.030 I'm going to go to. 13:46.270 --> 13:46.840 Wait a second. 13:46.840 --> 13:49.180 We need to go here and we need to make. 13:50.730 --> 13:54.030 UI button is going to be. 13:56.680 --> 13:57.460 How's. 13:58.360 --> 13:59.710 Buttons on the UI. 14:01.710 --> 14:05.160 And we're going to touch it to the top right corner. 14:05.910 --> 14:09.120 And maybe move it to the left and in the middle. 14:09.120 --> 14:09.840 Wait a second. 14:09.840 --> 14:11.070 I want it to be. 14:13.060 --> 14:14.230 I know what we're going to do. 14:17.160 --> 14:18.660 We're going to make it dark. 14:19.190 --> 14:21.890 And a bit transparent like that. 14:21.890 --> 14:24.320 You're going to change font on this. 14:25.520 --> 14:27.140 And I'm just gonna. 14:27.980 --> 14:29.000 I'm here. 14:29.180 --> 14:30.080 How's. 14:31.020 --> 14:34.020 And let's increase the size of a button itself. 14:35.430 --> 14:36.810 Something like that. 14:38.190 --> 14:41.760 I think it's better if it's white so we can see it. 14:42.580 --> 14:45.490 And font size a bit bigger. 14:46.280 --> 14:49.730 Yeah, it's kind of clunky, but I don't have any icon. 14:49.730 --> 14:52.850 If you have an icon, you can replace it and make it pretty. 14:53.630 --> 14:56.540 So far for me, I think I'm going to accept it. 14:56.750 --> 15:00.110 Maybe I will take the timer. 15:01.090 --> 15:02.410 Move it to the left. 15:06.100 --> 15:06.910 Like that. 15:06.910 --> 15:08.590 Or maybe in the middle. 15:10.870 --> 15:12.850 Like that, I don't know. 15:13.570 --> 15:17.650 Well, it's not as important right now, I guess, how we place the buttons. 15:17.740 --> 15:20.020 Yeah, let's just make the functionality. 15:20.020 --> 15:21.580 So pause button. 15:23.570 --> 15:24.830 Should work just fine. 15:26.510 --> 15:28.790 Like that font size 46. 15:28.880 --> 15:30.890 I think I like it now. 15:30.890 --> 15:32.360 You know what we need to do, right? 15:32.390 --> 15:41.270 We need to, uh, add on, click over here, drag UI in game and find pose button method. 15:42.250 --> 15:43.090 Very nice. 15:43.270 --> 15:48.520 Now this one will work if you click it with the mouse or with your finger on your phone. 15:50.030 --> 15:51.410 This one is not working. 15:55.630 --> 15:57.010 What happened there? 15:58.790 --> 16:00.500 I hate when this happens. 16:00.770 --> 16:02.120 Um, let me see. 16:04.390 --> 16:04.660 Mm. 16:04.690 --> 16:10.270 I think the variable is covering these two buttons as well as a jump button. 16:10.570 --> 16:15.790 So let's let's put pose UI over the variable joystick. 16:15.790 --> 16:16.630 Let's see. 16:18.160 --> 16:18.670 Okay. 16:18.670 --> 16:19.360 Sorry. 16:19.360 --> 16:22.630 We need to put this below John Button like that. 16:23.430 --> 16:24.510 Oh, now it's fine. 16:24.510 --> 16:27.150 Okay, let's fix it out of the play mode. 16:27.150 --> 16:32.850 So we're going to take pose UI and drag it below jump button. 16:36.320 --> 16:38.300 Okay, let's do it inside the prefab. 16:39.400 --> 16:40.870 Um AWS UI. 16:43.180 --> 16:43.930 No, wait. 16:43.930 --> 16:45.070 I'm so confused. 16:45.100 --> 16:46.030 Give me a second. 16:46.940 --> 16:47.420 Um. 16:48.540 --> 16:51.720 We need to make these changes in a smart way. 16:51.750 --> 16:53.700 I'm going to apply overrides. 16:53.700 --> 16:57.000 So now we have pause button UI in the prefab. 16:57.000 --> 16:59.580 And then we're going to just drag it here. 16:59.610 --> 17:02.670 It will show us menu that will allow us to open prefab. 17:02.670 --> 17:03.870 Let's click it. 17:03.870 --> 17:07.620 And then let's drag this UI below the jump button. 17:07.620 --> 17:11.220 So it will not cover those buttons inside of the pause UI. 17:11.250 --> 17:12.630 Now we can go back. 17:12.630 --> 17:13.410 Save it. 17:13.440 --> 17:15.090 We don't need to apply overrides. 17:15.090 --> 17:18.120 It's going to be fine and we can go to play mode. 17:19.960 --> 17:26.950 Click, pause, resume, pause, resume, jump, run around and all of it will work on the phone as 17:26.950 --> 17:27.220 well. 17:27.220 --> 17:28.960 And I'm going to show you that very soon. 17:28.960 --> 17:29.590 Okay. 17:30.100 --> 17:35.440 Uh, as for controls, this is pretty much everything we need to do was very simple and fast. 17:35.440 --> 17:36.430 I hope you like it. 17:36.430 --> 17:37.930 And let's go to the next video.