WEBVTT 00:00.020 --> 00:00.500 Hello guys. 00:00.500 --> 00:01.460 Welcome to the video. 00:01.460 --> 00:05.720 So now that we know how camera works, I want to use it for main menu. 00:05.720 --> 00:12.290 To make it a bit more interactive, let's go to the scene of the main menu over here. 00:12.290 --> 00:17.060 And I want to take the tile palette and increase the level. 00:17.790 --> 00:20.670 I want to make it longer like that. 00:21.820 --> 00:24.130 And we need another background. 00:24.130 --> 00:25.990 So I'm going to just duplicate it. 00:27.470 --> 00:28.010 And let me see. 00:28.040 --> 00:28.940 Transform. 00:30.510 --> 00:31.410 So this one. 00:32.200 --> 00:34.720 So this 13.5 and scale is 40. 00:34.720 --> 00:38.050 So for this one should be 43.5. 00:39.890 --> 00:43.070 Okay, so what I want to do is something simple. 00:43.070 --> 00:48.920 I want character to walk here when we choose the skin, just that. 00:48.920 --> 00:53.720 And if you want, you can then apply this technique to other UI elements. 00:53.720 --> 00:56.990 So first we need to add a cinemachine. 00:58.090 --> 01:02.680 Let's do Cinemachine target camera 2D camera. 01:03.630 --> 01:07.620 And sorry, I forgot what the lens was here. 01:07.950 --> 01:10.260 So I'm going to press Ctrl Z. 01:11.770 --> 01:13.660 Check the lens size eight. 01:13.660 --> 01:15.040 It was eight. 01:15.040 --> 01:18.190 Okay, let's do cinemachine. 01:18.910 --> 01:19.390 2D. 01:22.000 --> 01:29.500 And lens will be eight and position should be zero zero and Z can be minus ten. 01:29.920 --> 01:32.770 Okay, this is how it was right now. 01:32.770 --> 01:34.270 Uh, something to do here. 01:34.270 --> 01:36.760 We want to make an empty object. 01:37.650 --> 01:39.990 I'm going to do as camera. 01:42.500 --> 01:44.630 Camera target. 01:44.630 --> 01:50.960 I'm going to call it main menu, and we want to place it at 000. 01:50.960 --> 01:54.650 And then on the Cinemachine camera we want to assign it over here. 01:55.280 --> 01:56.000 Like that. 01:56.000 --> 01:58.820 So now when we go to play mode, nothing changes. 01:58.820 --> 02:00.410 It is same as before. 02:00.560 --> 02:01.640 This is good. 02:01.730 --> 02:05.030 Now I want to go to. 02:06.530 --> 02:08.930 Uh, somewhere where we can go. 02:09.320 --> 02:11.420 How can we trigger this camera? 02:12.850 --> 02:14.470 Let's do it from the main menu. 02:15.920 --> 02:18.980 So I'm going to do a header here. 02:19.580 --> 02:22.640 Header interactive camera. 02:22.670 --> 02:25.850 We're going to need serialized field private transform. 02:26.650 --> 02:28.090 Main menu. 02:28.090 --> 02:30.160 Point and sterilize field. 02:30.160 --> 02:31.420 Private transform. 02:31.420 --> 02:35.200 Let's do skin selection point. 02:35.230 --> 02:35.920 Okay. 02:38.470 --> 02:40.780 Um no no no no no. 02:40.780 --> 02:42.010 How can we do this? 02:43.690 --> 02:43.840 Oh. 02:43.840 --> 02:45.640 We're also going to need reference to the camera. 02:45.640 --> 02:46.540 Serialize field. 02:46.540 --> 02:48.340 Private Cinemachine camera. 02:50.390 --> 02:52.070 Senior machine. 02:52.310 --> 02:53.150 Just that. 02:53.150 --> 02:54.260 Very cool. 02:54.260 --> 02:55.970 I'm going to make two methods. 02:57.430 --> 02:58.570 A very simple one. 02:59.110 --> 02:59.950 Can I do? 03:00.520 --> 03:01.060 Uh. 03:01.660 --> 03:02.710 Public void. 03:03.460 --> 03:07.150 Move camera to main menu. 03:07.480 --> 03:11.110 This is a bit lazy approach, but I don't need a big system here. 03:11.110 --> 03:13.180 I just want to move camera once. 03:13.180 --> 03:18.490 If you want to have more points where your camera would move to different places in the menu, then 03:18.490 --> 03:23.170 you could do it very simply, very easily, especially after all the things we've done. 03:23.170 --> 03:24.310 So let's do. 03:26.000 --> 03:27.110 Uh cinemachine. 03:27.650 --> 03:30.410 Follow equals to main menu point. 03:30.410 --> 03:37.040 Then we're going to need one more public void move camera to skin menu. 03:37.040 --> 03:42.440 And over here I'm going to do Cinemachine follow equals to skin selection point. 03:42.950 --> 03:43.610 Just that. 03:43.610 --> 03:44.720 Just these two. 03:45.080 --> 03:47.270 Now let's go back to unity. 03:55.530 --> 04:00.240 Uh, we need to give it, um, camera, target, main menu. 04:00.240 --> 04:05.970 And I want to duplicate this and move it to the right over here somewhere. 04:05.970 --> 04:07.830 And I'm going to name it as. 04:09.510 --> 04:11.280 Skin menu. 04:12.650 --> 04:15.590 And we're going to go to canvas and assign it like that. 04:15.830 --> 04:17.780 And of course we need cinemachine itself. 04:17.780 --> 04:19.430 So let's drag it over here. 04:19.970 --> 04:20.960 Very cool. 04:20.990 --> 04:25.130 Now we're going to go and find a place we open in skin Selection UI. 04:27.190 --> 04:30.250 That happens from the difficulty menu. 04:31.300 --> 04:32.110 Yes. 04:32.110 --> 04:35.410 Over here you're going to select these three buttons. 04:35.410 --> 04:37.060 You're going to add event. 04:37.450 --> 04:39.670 You're going to drag uh sorry. 04:39.670 --> 04:41.290 We need to drag canvas. 04:41.560 --> 04:46.360 We're going to drag canvas to for for all of the three buttons here. 04:46.360 --> 04:48.010 And then we're going to choose. 04:51.000 --> 04:51.630 Um. 04:52.080 --> 04:53.220 Where is it moved? 04:53.250 --> 04:55.140 Move camera to skin menu. 04:55.230 --> 04:56.130 All right. 04:56.160 --> 04:58.560 Now we have here a back button. 04:59.370 --> 05:00.150 Do we? 05:00.150 --> 05:01.050 We don't. 05:02.550 --> 05:04.410 There is no back button for difficulty. 05:05.470 --> 05:05.980 Really. 05:11.250 --> 05:11.910 Okay. 05:14.100 --> 05:15.570 This is interesting. 05:15.840 --> 05:19.530 I'm going to take the back button then from somewhere. 05:19.650 --> 05:20.730 There is a back button. 05:20.730 --> 05:22.650 Let me just place it into difficulty. 05:22.680 --> 05:25.560 UI remove the number one. 05:27.450 --> 05:28.800 Yeah, this should be good. 05:28.800 --> 05:35.010 On a back button we have go to main menu and we need to add one more canvas UI. 05:35.830 --> 05:38.350 Move camera to main menu. 05:39.160 --> 05:40.210 Very nice. 05:40.210 --> 05:43.480 So now camera is supposed to move from one point to another. 05:43.480 --> 05:45.700 Once we selected the difficulty. 05:45.700 --> 05:47.170 Let's go and try that. 05:49.910 --> 05:52.940 Uh, new game normal and camera. 05:52.940 --> 05:54.080 Move to the right. 05:54.080 --> 05:54.590 Perfect. 05:54.590 --> 05:56.240 That's what we need now. 05:56.240 --> 05:57.380 Actually, I was mistaken. 05:57.380 --> 05:58.610 We need to, um. 06:00.850 --> 06:01.180 Yeah. 06:01.180 --> 06:01.780 Yeah, yeah. 06:02.110 --> 06:05.980 We need to move camera back from a skin selection over here. 06:06.100 --> 06:07.720 So I'm going to add. 06:08.370 --> 06:11.010 Canvas UI. 06:11.040 --> 06:13.140 Move camera to main menu. 06:13.650 --> 06:15.300 So this is how it's going to be now. 06:16.840 --> 06:21.790 You start the game, you go to normal mode, camera moves to the right, you can go back, camera goes 06:21.790 --> 06:22.510 to the left. 06:22.510 --> 06:29.380 Now what we need to do is to make this character walk into the area, and that will be very fun thing 06:29.410 --> 06:29.740 to do. 06:29.740 --> 06:30.370 I mean, it will. 06:30.370 --> 06:31.360 It's going to look very nice. 06:31.360 --> 06:33.820 I tried, uh, how can we do this? 06:33.820 --> 06:35.770 We have menu character over here. 06:35.770 --> 06:37.420 We can just give it a script. 06:38.570 --> 06:39.020 Um. 06:39.020 --> 06:40.010 Menu. 06:43.450 --> 06:45.790 It's a shame we don't have any script on this yet. 06:49.340 --> 06:52.490 And this one is supposed to move to the right in a very simple way. 06:52.490 --> 06:55.760 So I think we can use move towards. 06:58.870 --> 07:01.990 Let's do serialize field vector three. 07:02.020 --> 07:03.760 Now let's use transform. 07:03.970 --> 07:05.290 Private transform. 07:06.730 --> 07:07.570 Menu. 07:07.570 --> 07:10.600 Point and release field. 07:10.600 --> 07:12.820 Private transform. 07:13.210 --> 07:15.340 Skin selection. 07:16.050 --> 07:16.710 Point. 07:18.050 --> 07:20.930 Then we're going to need a method that would make it work. 07:20.930 --> 07:23.690 Just want to have a boolean that says if we are moving. 07:23.690 --> 07:30.320 So he is moving here and then update if is moving. 07:31.340 --> 07:33.470 Then we're going to move to target destination. 07:33.470 --> 07:37.490 I'm going to do private Vector3 destination. 07:38.710 --> 07:40.480 And over here we're going to do vector. 07:40.480 --> 07:44.170 Sorry transform.position equals to vector two. 07:44.170 --> 07:51.820 Move towards from transform.position to the destination with the time the delta time multiplied by speed. 07:52.960 --> 07:53.200 Through. 07:53.200 --> 07:53.800 Nice field. 07:53.800 --> 07:55.720 Private float speed. 07:57.150 --> 07:57.480 Speed. 07:57.480 --> 07:58.320 Over here. 07:58.350 --> 07:59.370 Nice. 07:59.640 --> 08:00.900 This is what we're going to do. 08:00.900 --> 08:10.470 And then if vector two, the distance between transform.position and destination is less than. 08:11.850 --> 08:12.990 Point one F. 08:13.110 --> 08:16.440 Then we're going to do is moving poles. 08:17.960 --> 08:18.680 Nice. 08:18.680 --> 08:22.940 And there is a difference between the like the height of the position. 08:22.940 --> 08:23.960 But we're going to fix it. 08:23.960 --> 08:24.920 No worries. 08:25.010 --> 08:26.540 I have an idea. 08:26.990 --> 08:36.230 We're going to make a method public void, move to skin selection, in which we're going to pass the 08:37.070 --> 08:38.600 Or actually we don't need these two points. 08:38.600 --> 08:40.070 We can pass them through the method. 08:40.070 --> 08:41.720 But did I not think of it. 08:41.720 --> 08:43.310 Let's remove it here. 08:43.880 --> 08:45.380 And over here we're going to do. 08:46.260 --> 08:46.500 Yeah. 08:46.500 --> 08:47.220 We're going to pass. 08:47.220 --> 08:48.240 Transform. 08:48.900 --> 08:50.940 New destination. 08:50.940 --> 08:57.540 And then inside of a method we're going to do destination equals to new destination dot position. 08:57.540 --> 09:02.850 And then destination dot y equals to transform position dot y. 09:02.880 --> 09:06.240 So we don't have the difference between y position. 09:06.240 --> 09:10.440 Then we're going to do is moving equals to true just like that. 09:10.440 --> 09:14.250 And we're going to just type here move to. 09:16.320 --> 09:19.080 Uh, or just move just like that. 09:20.670 --> 09:24.750 Let's do move to move to new destination, I like it. 09:25.050 --> 09:27.690 Now we're going to need reference to this main character. 09:27.690 --> 09:31.350 Oh, and also we need to update is moving boolean on the animator. 09:31.350 --> 09:32.550 So I'm going to do. 09:33.980 --> 09:35.960 Primate animator anim. 09:37.260 --> 09:40.920 Then awake einem equals to get component of the animator. 09:41.190 --> 09:49.140 And then we're going to do anim set bool of is moving to boolean is moving just like that. 09:50.990 --> 09:52.940 Very nice, that's all what we need to do. 09:52.940 --> 09:54.800 It is very simple script. 09:55.070 --> 09:57.410 Now let's go to the main menu. 10:01.030 --> 10:03.880 Over here, I'm going to make a reference to the character. 10:03.880 --> 10:04.660 Serialized field. 10:04.660 --> 10:05.500 Private. 10:05.500 --> 10:06.040 Menu. 10:06.040 --> 10:06.760 Character. 10:06.760 --> 10:07.660 Menu. 10:07.780 --> 10:08.530 Character. 10:09.740 --> 10:15.290 Let's save this and let's go down to the methods we have now. 10:16.690 --> 10:17.680 Over here. 10:17.770 --> 10:19.810 And I'm going to do menu character. 10:20.880 --> 10:22.050 I made a mistake. 10:22.050 --> 10:24.450 I can see that menu. 10:25.540 --> 10:26.950 I can't rename it. 10:27.130 --> 10:28.270 What's up man? 10:30.040 --> 10:34.120 Let me rename it my new character here. 10:34.150 --> 10:34.810 Okay. 10:36.840 --> 10:38.400 Now let's go back here. 10:39.720 --> 10:43.260 And the main character Dot move to. 10:43.850 --> 10:48.020 And we're going to give it, um, menu point. 10:49.670 --> 10:50.090 Over here. 10:50.090 --> 10:52.610 We're going to do menu character move to. 10:53.570 --> 10:54.800 Skin selection point. 10:54.830 --> 10:56.570 Now this is supposed to work. 10:56.600 --> 10:58.100 Let's save this. 11:04.210 --> 11:04.600 Over here. 11:04.600 --> 11:06.580 We're going to give it a speed maybe of. 11:06.580 --> 11:07.750 Let's try four. 11:07.780 --> 11:13.960 Then on the menu over here on the canvas, we're going to drag my new character to the field. 11:13.990 --> 11:15.820 Now we can go to play mode. 11:17.410 --> 11:21.280 Select new game and normal difficulty. 11:21.280 --> 11:25.960 And we can see he works here so you can choose a skin for him. 11:25.960 --> 11:27.310 This looks so funny. 11:27.310 --> 11:28.450 I love it so much. 11:29.440 --> 11:31.660 Um, maybe he could walk faster. 11:31.660 --> 11:36.040 Let's give him speed of, um, ten and let's click back. 11:38.020 --> 11:38.290 Yeah. 11:38.590 --> 11:39.250 Okay. 11:39.250 --> 11:41.020 So he works better, I like it. 11:41.050 --> 11:42.250 We only need to. 11:43.040 --> 11:44.240 Lithium, right? 11:44.300 --> 11:46.010 Uh, how can we flip him? 11:46.010 --> 11:46.850 Well. 11:47.510 --> 11:51.200 We could decide instead of a move method, how do we flip him? 11:51.200 --> 11:52.460 But I feel a bit lazy. 11:52.460 --> 11:54.380 So I'm going to go to player script. 11:54.380 --> 11:55.820 I'm going to find that. 11:56.600 --> 11:57.920 Leap methods I have. 11:59.930 --> 12:01.880 Over here I'm going to copy them. 12:01.880 --> 12:05.450 Go to Menu Character, paste them in. 12:08.000 --> 12:08.930 Then we're gonna. 12:10.380 --> 12:14.970 Generate field for facing direction and generate field for the facing. 12:14.970 --> 12:18.480 Right now we need to fix it because this one was used as an object. 12:18.480 --> 12:20.040 We need a boolean here. 12:20.820 --> 12:21.660 Just like that. 12:23.410 --> 12:24.040 Okay. 12:24.040 --> 12:26.620 And then we go back here. 12:27.400 --> 12:31.840 Instead of X input we're going to pass float x value. 12:31.840 --> 12:33.130 I'm going to type x input. 12:33.130 --> 12:35.140 And then I'm going to rename it to x value. 12:36.860 --> 12:38.960 And then instead of zero, we're going to use. 12:39.900 --> 12:42.060 Transform position dot x. 12:42.800 --> 12:46.430 And here transform position dot x. 12:46.430 --> 12:52.760 And then when we do move two we're going to do handle flip according to the destination dot x. 12:52.760 --> 12:53.690 Just like that. 12:53.690 --> 12:56.270 Now character is going to flip if he needs to. 12:56.360 --> 12:57.590 Let's go back. 12:58.910 --> 13:01.040 I'm going to increase the speed by default. 13:01.190 --> 13:02.660 Let me try eight. 13:03.480 --> 13:04.470 And let's see this. 13:04.470 --> 13:05.790 Let's go to play mode. 13:08.620 --> 13:12.010 Can I do a new game and normal mode? 13:14.050 --> 13:14.320 Why? 13:14.320 --> 13:15.220 He does that? 13:15.310 --> 13:16.630 I don't know why he does. 13:18.590 --> 13:18.830 Wait. 13:18.830 --> 13:19.940 What if we go back? 13:21.150 --> 13:21.870 Okay. 13:23.410 --> 13:24.670 This is funny. 13:25.410 --> 13:31.170 I guess we need to do facing direction equals to one by default and facing right? 13:31.170 --> 13:32.370 True by default. 13:32.550 --> 13:36.060 Let's save this and let's try once again. 13:36.060 --> 13:41.790 If you want, you can place your character somewhere to the right over here and make him look left by 13:41.790 --> 13:42.330 default. 13:42.330 --> 13:45.570 Then he would just turn back when he needs to change the skin. 13:45.570 --> 13:51.000 Uh, you could create another position for it, and you could even do this for all of the menus we have 13:51.000 --> 13:53.940 with different positions that could work as well. 13:53.940 --> 13:54.360 Let's go. 13:54.360 --> 13:55.140 New game. 13:55.140 --> 13:55.980 Normal. 13:56.720 --> 13:57.920 Walks up. 13:58.250 --> 14:04.070 I can change skin for him and I can even go back and he's going to go back with a new skin. 14:09.490 --> 14:11.050 Oh, man, this is so cool. 14:13.890 --> 14:19.560 Yeah, and even you can change skins while he is walking because we use animation layers. 14:20.470 --> 14:24.190 And the issue is you can make him walk away with this skin. 14:24.190 --> 14:28.930 But I don't think it's important because you did not select it, so it's not selected. 14:28.930 --> 14:34.630 And if you click continue, you're going to just, uh, play with the skin you had before, right? 14:36.620 --> 14:38.060 By the way, let's check this. 14:38.150 --> 14:41.450 And now let's go back and let's continue. 14:42.080 --> 14:43.760 I'm going to have the default one. 14:44.620 --> 14:45.310 Okay. 14:45.430 --> 14:47.140 Very very good. 14:47.980 --> 14:49.960 Do we save in this info about the skin? 14:49.960 --> 14:50.950 I completely forgot. 14:50.950 --> 14:52.840 Let's just make sure of that. 14:55.460 --> 14:58.070 Let's go to game manager. 15:00.230 --> 15:01.580 Over here somewhere. 15:01.580 --> 15:04.790 We update info about last like continue button. 15:08.170 --> 15:10.180 Here we save and continue button. 15:10.540 --> 15:13.360 Let's save the skin index as well. 15:14.050 --> 15:15.730 Let's do Playerprefs. 15:16.500 --> 15:18.360 Set int of. 15:19.570 --> 15:23.020 Last I used skin. 15:23.470 --> 15:31.210 I'm going to give it a index of a skin skin manager dot instance dot skin, get skin ID and then we 15:31.210 --> 15:34.270 need to load it only if we press continue button. 15:34.270 --> 15:36.280 That happens in the UI. 15:36.280 --> 15:37.540 Let me copy this. 15:38.950 --> 15:39.880 UI. 15:40.990 --> 15:41.260 Um. 15:41.260 --> 15:42.400 Main menu. 15:42.430 --> 15:44.500 We have continue game. 15:45.680 --> 15:55.520 So just before I do that I'm going to do skin manager instance, set skin ID to the playerprefs. 15:57.230 --> 15:59.210 Get integer of. 16:01.270 --> 16:05.080 Get integer of the saved value. 16:05.680 --> 16:12.640 Okay, so last used last saved screen equals to. 16:18.900 --> 16:20.160 And we're going to use it here. 16:20.160 --> 16:21.120 Last saved skin. 16:21.120 --> 16:27.240 So now continue button will use skin as well because I've like I missed that I missed that part. 16:27.240 --> 16:28.500 Let me try it. 16:29.460 --> 16:30.870 Going to go to play mode. 16:32.850 --> 16:35.220 New game normal. 16:35.920 --> 16:37.360 Going to select the frog. 16:37.690 --> 16:39.250 Select the last level. 16:42.530 --> 16:44.540 Now we are on the new level. 16:47.330 --> 16:49.190 Gonna go out of a play mode. 16:49.280 --> 16:50.630 It's going to go to play mode. 16:50.630 --> 16:51.980 Click continue. 16:52.400 --> 16:54.290 And with the frog okay, cool. 16:54.290 --> 16:56.690 Let's go to the next video.