WEBVTT 00:00.020 --> 00:00.530 Hello guys. 00:00.530 --> 00:01.610 Welcome to the video. 00:01.610 --> 00:04.520 In this one we're going to work on a skin selection UI. 00:04.520 --> 00:09.080 But before we set up skin selection UI, we need to set up skins on the player itself. 00:09.080 --> 00:13.100 This will be not that difficult to do, and we're going to use a method that we use before we're going 00:13.100 --> 00:15.530 to use Animator Override controllers. 00:15.530 --> 00:18.710 Let's go to sample scene I'm going to save it. 00:18.710 --> 00:19.610 It's okay. 00:19.790 --> 00:25.040 Over here I want to make fade image transparent because I don't need it now. 00:25.190 --> 00:27.380 And there we have a player. 00:27.680 --> 00:28.550 Very good. 00:28.550 --> 00:32.120 So now we need to make a bunch of animations. 00:32.120 --> 00:35.030 Then we need to make animator override controller. 00:35.030 --> 00:39.740 And we need to reassign animations on the animator of a player. 00:40.130 --> 00:41.480 All right, I don't see animations. 00:41.480 --> 00:43.070 I need to restart unity again. 00:43.070 --> 00:44.510 Let me save the project. 00:44.960 --> 00:45.260 All right. 00:45.260 --> 00:46.460 There is my animations. 00:46.460 --> 00:48.350 Very nice, very cool. 00:48.350 --> 00:54.980 Now let's go ahead and make a bunch of clips so we can use them later on with the animator override 00:54.980 --> 00:55.670 controller. 00:55.670 --> 00:56.750 How it's going to be. 00:57.200 --> 00:59.780 Yeah, it will take some time, but it's totally worth it. 00:59.780 --> 01:04.340 So let's select animator of a player and here we're going to make new clip. 01:05.210 --> 01:06.230 Let's go. 01:06.230 --> 01:12.860 And I think we're going to start with a let's start with a ninja frog I'm going to go to enemies. 01:13.430 --> 01:14.330 No sorry. 01:14.900 --> 01:19.130 Uh asset animations player here I want to make a folder. 01:19.870 --> 01:21.940 Or ninja frog. 01:23.370 --> 01:27.300 And over here I'm going to do player Progue idol. 01:27.910 --> 01:29.800 Now we need sprites for this animation. 01:29.800 --> 01:33.520 So we're going to go to Asset Graphics main character. 01:34.510 --> 01:35.500 Ninja frog. 01:36.530 --> 01:40.430 And we're gonna select them all, make pixel per unit 16. 01:40.490 --> 01:42.800 Then we're going to take idle sprites. 01:42.800 --> 01:44.060 Drag them here. 01:44.060 --> 01:45.440 Sample array 20. 01:46.800 --> 01:50.670 And you can even play this animation and see character in the idle. 01:54.890 --> 01:56.390 Now we're going to need other clips. 01:56.390 --> 01:59.780 So I'm going to do player rogue move. 02:00.920 --> 02:03.170 Let's take the run animation. 02:03.170 --> 02:04.160 Drag it here. 02:04.160 --> 02:05.630 Sample array 20. 02:06.020 --> 02:10.280 Now we need player progue hit. 02:11.530 --> 02:12.820 Gonna take the heat. 02:14.080 --> 02:14.800 Drag it here. 02:14.800 --> 02:16.450 Sample rate 20. 02:16.480 --> 02:20.830 Now we're going to need new one layer rock. 02:21.460 --> 02:24.640 Uh, wall jump or wall slide. 02:25.240 --> 02:27.340 Wall slide layer. 02:27.340 --> 02:28.540 Frog wall slide. 02:29.020 --> 02:29.200 Yeah. 02:29.200 --> 02:30.040 That's right. 02:30.220 --> 02:32.320 Sample rate 20. 02:32.350 --> 02:33.100 Open wall. 02:33.100 --> 02:34.360 Jump spreadsheet. 02:34.600 --> 02:35.320 Take the sprite. 02:35.320 --> 02:36.490 Drag them here. 02:36.610 --> 02:38.920 Now we need, uh, one more. 02:39.810 --> 02:41.220 Uh, player. 02:42.150 --> 02:43.560 Frog jump. 02:43.560 --> 02:47.640 Also, I realized we did not use this double jump animation, but we're going to fix it. 02:47.640 --> 02:49.410 We're going to just use it later on. 02:49.410 --> 02:50.130 It's fine. 02:50.400 --> 02:53.190 So for the jump, we're going to just take this sprite here. 02:53.190 --> 02:54.270 And then we need. 02:55.180 --> 03:01.720 Layer prog all and this is going to be the full animation over here. 03:01.960 --> 03:04.480 Okay, so now if you want you can check them. 03:04.840 --> 03:10.210 Basically it's the same as with the main character, just different look of it. 03:10.240 --> 03:10.990 Nice. 03:10.990 --> 03:12.910 Now we can go to animator. 03:13.180 --> 03:16.570 Take this frog animations and just delete them. 03:16.990 --> 03:21.010 We're going to delete them from the animator, but animations are still there. 03:21.770 --> 03:22.820 Here in a folder. 03:22.820 --> 03:25.070 We have them now we can make. 03:26.240 --> 03:30.800 Animation animator override controller and I'm going to do player. 03:31.820 --> 03:33.380 Ninja frog. 03:33.980 --> 03:34.820 Nice. 03:34.820 --> 03:37.820 Now, as a base for this controller, we're going to set. 03:38.210 --> 03:39.230 Player. 03:39.230 --> 03:40.040 Animator. 03:40.040 --> 03:41.030 Controller. 03:41.900 --> 03:42.590 All right. 03:44.070 --> 03:47.010 And this is the animator controller we use over here. 03:47.010 --> 03:52.500 If we don't replace the animation, it's going to use default animation, but we also can override the 03:52.500 --> 03:55.020 animation with the one we just made. 03:55.020 --> 03:56.850 So that's what we're going to do. 03:57.330 --> 03:58.380 Jump. 03:59.310 --> 04:05.640 I guess player knocked is used for the heat, so we need to rename this to player frog knocked. 04:07.410 --> 04:09.510 Okay, let's drag it here. 04:09.780 --> 04:10.260 Layer. 04:10.260 --> 04:11.070 Move. 04:12.490 --> 04:14.530 Uh, wall slide and respond. 04:14.530 --> 04:16.930 We do need to change because it's the same for everyone. 04:16.930 --> 04:20.170 So this can be none and it will use default animation. 04:20.500 --> 04:21.310 Very nice. 04:21.310 --> 04:28.540 Now, uh, in the game mode we can see the main character, same as before, but if we go to animator 04:28.540 --> 04:34.690 and replace animator with a player Ninja frog, it will have a set of new animations. 04:35.260 --> 04:38.410 And basically we changed the skin for the main character. 04:39.170 --> 04:40.400 Simple as that. 04:40.430 --> 04:42.830 What we need to do now is to. 04:44.680 --> 04:46.660 Uh, what happened there? 04:47.230 --> 04:47.350 Yeah. 04:47.350 --> 04:47.740 It's fine. 04:47.740 --> 04:48.430 It's just. 04:49.830 --> 04:52.920 We have animator replaced only on the original one. 04:54.370 --> 04:55.000 Great. 04:55.000 --> 05:01.180 What we need to do now is to assign this animator override controller in the script. 05:01.180 --> 05:01.570 All right. 05:01.570 --> 05:02.680 That's what we need to do. 05:02.680 --> 05:07.840 So we can use a player script, or we can add one more script. 05:07.840 --> 05:09.850 That depends on us. 05:10.000 --> 05:13.810 I think we can do it all in here, because why not? 05:13.810 --> 05:14.860 It's totally fine. 05:17.130 --> 05:18.210 And we're going to have. 05:18.210 --> 05:18.630 I'm sorry. 05:18.630 --> 05:24.540 We need to go all the way up here and make some sort of a header for visuals. 05:24.930 --> 05:29.580 Uh, let's rename this header to, uh, Player Visuals. 05:29.610 --> 05:31.710 Then we're going to have serialized field. 05:32.740 --> 05:33.460 Private. 05:34.200 --> 05:41.040 Animator override controller array, and we're going to just call it animators. 05:41.610 --> 05:42.240 Nice. 05:42.240 --> 05:49.800 Let's save this and let's try to change main animator for the one we have in the script at start. 05:49.950 --> 05:50.700 That's what we're going to do. 05:50.730 --> 05:59.520 We're going to do animator or actually anim run time animator controller equals to animators with a 05:59.520 --> 06:00.150 zero. 06:00.150 --> 06:02.100 So we're going to take first one in the array. 06:02.130 --> 06:03.390 Let's go back. 06:05.960 --> 06:08.240 And let it compile. 06:12.140 --> 06:20.120 Now on the player over here we have animators and we can go to Asset Animations player Ninja Frog and 06:20.120 --> 06:21.800 assign it into the field like so. 06:21.800 --> 06:27.050 Now when I start the game, this animator override controller will be assigned to the animator over 06:27.050 --> 06:27.680 here. 06:30.490 --> 06:31.000 Boom. 06:31.030 --> 06:31.990 Very cool. 06:31.990 --> 06:33.940 I like it, so it works. 06:33.940 --> 06:35.560 Now we need to make more. 06:39.010 --> 06:40.780 So let's go ahead and do this. 06:40.810 --> 06:43.180 It will take some time, but we need to do this. 06:43.210 --> 06:43.450 What? 06:43.450 --> 06:44.770 You can do nothing. 06:44.770 --> 06:48.070 Let's go to animator here. 06:48.070 --> 06:51.250 We're going to make a new folder for. 06:51.250 --> 06:53.740 What was that mask dude. 06:54.610 --> 06:56.440 Now we have mask dude folder. 06:56.440 --> 06:58.840 Let's go and make a bunch of animations for him. 06:58.840 --> 07:00.580 We need to make new clip. 07:02.520 --> 07:04.830 And actually I think you know how it works. 07:04.830 --> 07:09.210 So I'm going to speed up the video a bit so it doesn't look so boring to do the same thing again. 07:12.660 --> 07:14.910 I left L.A. in 20. 07:17.370 --> 07:17.760 16. 07:20.730 --> 07:21.360 Left move. 07:25.600 --> 07:26.200 High level alert. 07:27.440 --> 07:32.150 So la la la la la la la la la la la. 07:35.790 --> 07:40.650 Any last minute missed call. 07:41.800 --> 07:43.570 And fall over here. 07:43.570 --> 07:44.530 Very cool. 07:44.530 --> 07:45.910 Now we need new clip. 07:47.910 --> 07:49.350 Uh, sorry, we don't need new clip. 07:49.350 --> 07:53.340 We need to go to the main character, actually. 07:53.340 --> 07:56.670 Asset animation player mask. 07:56.670 --> 08:00.000 Dude, let's make animator override controller. 08:02.120 --> 08:05.660 Layer Mask dude is a regional one. 08:05.660 --> 08:07.430 We're going to choose player. 08:08.750 --> 08:10.610 Then we're going to reassign them. 08:12.130 --> 08:13.000 Why it has so many. 08:13.000 --> 08:14.290 Because we have so many here. 08:14.290 --> 08:15.940 Let's delete the extra. 08:18.230 --> 08:18.560 Delete. 08:18.560 --> 08:19.340 Delete. 08:19.950 --> 08:21.180 Now it's fine. 08:21.480 --> 08:22.650 And we need. 08:23.540 --> 08:25.400 All this one should be player. 08:26.030 --> 08:27.860 Musk knocked. 08:27.860 --> 08:28.430 Okay. 08:30.680 --> 08:31.730 -- it! 08:31.850 --> 08:32.450 Move! 08:32.990 --> 08:33.950 Nice. 08:34.070 --> 08:37.340 Now let's go ahead and make new bunch of animations. 08:37.340 --> 08:41.510 This time it's going to be Pinkman, right? 08:42.370 --> 08:43.150 And Pinkman. 08:43.150 --> 08:47.230 So we're going to select animator new clip player. 08:47.470 --> 08:48.820 Ping idle. 08:55.290 --> 08:55.650 Move! 08:57.920 --> 08:58.310 I think. 08:59.640 --> 09:01.290 I think a lot. 09:02.820 --> 09:03.720 I think her. 09:05.270 --> 09:05.390 My. 09:07.400 --> 09:07.820 Friend. 09:10.010 --> 09:11.690 And I are not. 09:12.550 --> 09:13.780 Going to take the heat. 09:14.520 --> 09:15.240 Drag it here. 09:15.240 --> 09:16.530 Sample array 20. 09:17.450 --> 09:18.590 Okay. 09:20.120 --> 09:20.990 Very nice. 09:26.590 --> 09:29.530 Now let's go to animations player. 09:30.650 --> 09:31.430 And. 09:32.330 --> 09:32.930 Oh, no. 09:32.930 --> 09:33.290 Did. 09:33.290 --> 09:34.580 Where did I make them? 09:35.970 --> 09:36.900 Where did I make this? 09:36.900 --> 09:38.100 Animations, man. 09:38.580 --> 09:39.480 Animations. 09:39.480 --> 09:40.500 Player. 09:42.160 --> 09:45.220 Graphics main character Pinkman. 09:48.090 --> 09:50.790 Oh, where are the animations? 09:52.040 --> 09:53.360 It's in a mask, dude. 09:53.390 --> 09:54.980 Okay, we're going to do this. 09:55.010 --> 09:59.000 We're going to make a folder pink, man. 09:59.030 --> 10:03.890 I'm going to take this pink animations, drag them to the folder over here. 10:03.980 --> 10:07.010 And I'm going to go to an explorer like that. 10:07.220 --> 10:08.390 Take the mask dude. 10:08.600 --> 10:09.230 Sorry. 10:09.560 --> 10:10.040 Yeah. 10:10.040 --> 10:11.480 Go inside of the folder. 10:11.480 --> 10:12.470 Take pink man. 10:12.470 --> 10:13.940 I'm going to cut it out. 10:15.570 --> 10:17.640 We go to player, paste it in here. 10:18.780 --> 10:19.350 Based. 10:20.570 --> 10:21.110 Okay. 10:21.110 --> 10:22.580 They're all here now. 10:22.580 --> 10:24.440 We're going to delete it from the animator. 10:24.440 --> 10:28.790 And let's go to Pinkman and make animator override controller. 10:30.260 --> 10:31.130 Player. 10:32.290 --> 10:32.980 Pinkman. 10:33.250 --> 10:35.740 Then we're going to select original. 10:36.740 --> 10:37.370 Layer. 10:37.370 --> 10:40.850 And then we're going to reassign them and. 10:43.190 --> 10:44.030 Love it. 10:44.450 --> 10:46.940 So we have everything ready basically. 10:46.940 --> 10:48.860 And let's go to the player. 10:50.930 --> 10:52.040 We need to log this. 10:52.040 --> 10:56.120 Then we need to go again to player folder with Animator Override controllers. 10:56.270 --> 11:00.470 And let's drag one more here and one from the Pinkman. 11:00.470 --> 11:03.980 Now it's up to you to decide which order you want to have for them. 11:03.980 --> 11:05.390 Like what is the default one? 11:05.390 --> 11:09.860 If you want original to be default one like I have, then just do everything like I do. 11:09.890 --> 11:15.680 If you want to have one of these as original one, then you would have to do something else here I guess. 11:15.680 --> 11:20.900 Yeah, like take the original, make another animator override controller and oh, actually, let's 11:20.900 --> 11:21.350 do that. 11:21.350 --> 11:21.890 Why not? 11:21.890 --> 11:22.820 Let's just. 11:25.300 --> 11:25.900 Make. 11:25.900 --> 11:26.560 Animator. 11:26.560 --> 11:30.640 Override controller player virtual GUI. 11:31.750 --> 11:34.240 Then I'm going to unlock Inspector over here. 11:34.240 --> 11:37.690 I'm going to select player as a regional animator override controller. 11:37.690 --> 11:42.730 And we don't need to override animations because for the virtual guide, this is the default animations. 11:42.730 --> 11:45.910 So we can go to player now and choose virtual Guy. 11:45.910 --> 11:46.810 Drag it here. 11:46.810 --> 11:48.250 Now we have four of them. 11:48.250 --> 11:50.110 What you want to be default is up to you. 11:50.110 --> 11:52.840 Just place it first in the list and that will be default. 11:52.840 --> 11:56.890 For example, I want to have Pink Man as a default skin because I like it. 11:56.890 --> 11:57.490 All right. 12:00.150 --> 12:02.550 Now we need, uh, some sort of. 12:03.090 --> 12:07.080 Variable that would have information about individuals. 12:07.080 --> 12:14.610 So I'm going to do serialize field private int skin index or maybe skin ID. 12:14.910 --> 12:18.630 And that's what we're going to use to define what skin we want to have. 12:18.630 --> 12:23.880 Then in the start method I'm going to cut this line away and I'm going to make a method. 12:25.210 --> 12:26.170 Public void. 12:27.080 --> 12:34.700 Choose skin you're going to pass in skin index and we're just going to do this. 12:35.120 --> 12:41.480 Anim Runtime Animator controller equals to animators with a skin index just like that. 12:42.120 --> 12:46.500 And I think this is good for now because we have set up for choosing the skin. 12:46.500 --> 12:51.570 Later on, we're going to just call this method with the help of some skin manager or something like 12:51.570 --> 12:52.050 that. 12:52.050 --> 12:54.840 So now player is ready to choose skins. 12:54.840 --> 12:56.100 I only need to check something. 12:56.100 --> 12:58.140 I need to check if. 12:59.910 --> 13:00.120 Yeah. 13:00.120 --> 13:06.090 Let's call this method at the start for now to skin with, uh, index zero. 13:06.090 --> 13:11.250 So by default for now we're going to choose first animator override in the array over here. 13:11.580 --> 13:12.180 Very nice. 13:12.180 --> 13:14.340 It's going to work I think I like it. 13:16.050 --> 13:16.590 Yeah. 13:16.590 --> 13:17.280 Very cool. 13:17.280 --> 13:22.320 Now let's go back to skin selection and set up skin selection in the main menu. 13:22.350 --> 13:25.110 We're going to go to scene main menu. 13:25.140 --> 13:26.850 You're going to save the changes here. 13:27.390 --> 13:31.290 And in the canvas we have this skin selection UI. 13:31.320 --> 13:33.540 Let's enable skin selection UI. 13:33.540 --> 13:36.270 And let's focus on the grid over here. 13:37.100 --> 13:43.820 So what I want to do is to make a game object that looks like a player with only two sets of animations, 13:43.820 --> 13:44.810 and we're gonna. 13:46.590 --> 13:50.160 I use this GameObject to display what skin we are choosing at the moment. 13:50.160 --> 13:52.920 So I'm going to go to Asset Animations. 13:52.920 --> 13:54.480 I'm going to make a folder. 13:57.250 --> 13:58.810 Main menu. 14:00.330 --> 14:03.510 And over here I'm going to make animator controller. 14:04.900 --> 14:05.890 Menu. 14:05.920 --> 14:06.910 Character. 14:12.630 --> 14:15.660 All right, now let's go to graphics. 14:15.870 --> 14:17.220 Main character. 14:18.090 --> 14:21.060 Now let's take the weight. 14:21.060 --> 14:22.380 I need to decide what I want to be. 14:22.380 --> 14:23.280 Default one. 14:23.580 --> 14:25.800 I think I'm going to use Pinkman as a default one. 14:25.800 --> 14:27.780 I just feel it. 14:28.080 --> 14:30.930 Okay, so I'm going to drag it here now. 14:30.930 --> 14:31.290 But wait. 14:31.290 --> 14:33.900 If you set it as a default one, then it means it works. 14:33.900 --> 14:36.450 Not as much as another skin, right? 14:36.450 --> 14:39.540 So let's use the default one as a default one. 14:40.500 --> 14:46.470 The virtual guy and Pinkman will be purchasable and it will be expensive. 14:46.470 --> 14:48.210 Yes okay. 14:48.510 --> 14:51.510 So this one going to be menu character. 14:52.990 --> 14:55.540 And let's increase the scale to something like. 14:56.550 --> 14:58.140 Maybe 1.5. 14:58.980 --> 15:00.030 Yeah, this is good. 15:00.030 --> 15:04.410 I'm going to place it over here and we're going to take animator. 15:05.920 --> 15:09.520 From the main menu and drag it on the menu character. 15:09.550 --> 15:11.530 Now let's go to animator itself. 15:11.530 --> 15:14.140 And over here we need to give it a bunch of animations. 15:14.140 --> 15:19.750 I'm not going to create an animator override controller for this object, because that would be an overkill 15:19.750 --> 15:20.470 kind of. 15:20.470 --> 15:22.270 So we're going to go to player. 15:22.270 --> 15:23.260 We're going to take. 15:24.470 --> 15:29.330 Idol and move, and this is what we're going to do. 15:29.630 --> 15:31.010 We're going to make a parameter. 15:31.010 --> 15:34.310 Boolean is moving because we're going to need it later. 15:34.310 --> 15:36.200 But we're going to set up this right now. 15:36.290 --> 15:38.900 We're going to make transition from idle to move. 15:41.340 --> 15:44.100 With the exotherm unchecked and transition duration zero. 15:44.100 --> 15:45.930 And we're going to make transition back. 15:47.670 --> 15:50.190 Weather is moving false and check. 15:50.190 --> 15:50.640 Exit time. 15:50.640 --> 15:52.110 Transition duration zero. 15:52.530 --> 15:59.190 Now look, we have a game object with these animations and we have only one animator controller. 15:59.220 --> 16:05.040 Our goal is to select different animations and they will depend on the ID of the screen we have. 16:05.430 --> 16:08.850 And at the same time we want to use only one animator controller. 16:09.450 --> 16:12.150 For this purpose we could use layers. 16:12.720 --> 16:19.590 Uh, usually layers are used in 3D development, like you want character to move hands in one animation 16:19.590 --> 16:24.750 and legs in another animation so character can run, reload, and shoot at the same time. 16:24.750 --> 16:29.430 Okay, but in this case we can just use it to display different set of animations. 16:29.460 --> 16:32.370 I'm going to rename this to virtual Guy. 16:33.720 --> 16:37.860 And then I'm going to add another layer that I'm going to name as. 16:38.580 --> 16:39.000 Um. 16:40.000 --> 16:41.590 Ninja progue. 16:41.590 --> 16:43.330 And now we defining the order. 16:43.330 --> 16:47.620 So Ninja Frog will be a bit more expensive than virtual Guy. 16:47.620 --> 16:49.720 And then we're going to add mask. 16:49.720 --> 16:51.670 Dude, it will be a bit more expensive. 16:51.670 --> 16:56.350 And then we're going to have pink man the best skin in the game. 16:56.350 --> 17:00.940 Now look this layer has uh parameters and animations. 17:00.940 --> 17:03.310 And if we select Ninja Frog it has nothing. 17:03.310 --> 17:04.750 So we could set up different. 17:04.750 --> 17:07.150 Like we could do entirely different setup here. 17:07.150 --> 17:08.470 But what we can do. 17:09.300 --> 17:13.110 Is go to parameters and click sync over here. 17:13.440 --> 17:17.250 Now this animator will be synchronized with the virtual guy over here. 17:17.250 --> 17:20.760 But at the same time we can replace motion over here. 17:20.760 --> 17:27.780 So we're going to go to Ninja Frog and replace move like that and idle like that. 17:27.870 --> 17:30.000 Now we're going to select mask dude. 17:31.110 --> 17:32.310 We're going to do sync. 17:33.530 --> 17:36.230 The move would be from a mask, dude. 17:39.380 --> 17:41.390 An idol would be from the idol. 17:41.390 --> 17:45.650 And again, we could repeat this process for the main player in the game. 17:45.650 --> 17:47.630 But you can see it's a bit annoying to do. 17:47.630 --> 17:51.080 So if we would have like 28 animations or how many we have. 17:51.080 --> 17:57.890 Yeah, 28 Overriders are better for that purpose, but for this purpose, layers are pretty enough. 17:57.890 --> 18:01.100 We don't need override controller here, so let's do synchronize. 18:01.100 --> 18:07.310 And also it's a good opportunity for you to learn how you can differently apply skins to characters. 18:07.310 --> 18:07.850 Yeah. 18:07.850 --> 18:10.400 For the Pinkman we're going to go to Pinkman. 18:11.060 --> 18:15.170 Choose move over here and idle over here. 18:15.170 --> 18:15.950 Cool. 18:15.950 --> 18:18.890 Now we have a goal to switch between these layers. 18:18.890 --> 18:20.270 How usually it works. 18:20.270 --> 18:22.280 I'm going to open play mode and I'm going to show you. 18:23.310 --> 18:24.780 These layers over here. 18:24.780 --> 18:29.040 They have weight and priority goes like this. 18:29.520 --> 18:31.770 This one has more priority than this one. 18:31.770 --> 18:33.720 This one has more priority than this one. 18:33.720 --> 18:35.730 This one has more priority than this one. 18:35.730 --> 18:38.940 But weight on these layers is zero. 18:38.940 --> 18:44.100 If you take one of the layers and increase weight to one, it's going to be changed. 18:44.100 --> 18:48.450 If you take next one and increase weight to one, it's going to be changed again. 18:50.210 --> 18:54.770 Now, it doesn't matter what you have here because the lower one has more priority. 18:55.740 --> 19:02.370 But we're going to do is we're going to select one of the, uh, skins and just increase weight of that 19:02.370 --> 19:02.880 layer. 19:02.880 --> 19:04.020 Simple as that. 19:04.230 --> 19:08.370 And we have count from 0 to 3, zero, one, two, three. 19:08.400 --> 19:09.180 Okay. 19:09.180 --> 19:10.740 Let's exit play mode. 19:11.160 --> 19:15.210 Let's go and make skin selection UI. 19:16.000 --> 19:16.630 Script. 19:16.630 --> 19:18.670 I mean, let's go to scripts. 19:18.670 --> 19:23.020 I'm going to make C sharp script UI skin. 19:23.650 --> 19:24.970 Selection. 19:27.430 --> 19:29.410 Now I'm going to drag it on the object. 19:30.540 --> 19:30.990 UI. 19:31.170 --> 19:31.710 Uh, sorry. 19:31.710 --> 19:32.940 Skin selection. 19:33.180 --> 19:34.530 Let's go there. 19:35.580 --> 19:40.530 Let's make a serialized field private int um. 19:41.730 --> 19:42.600 Current. 19:43.270 --> 19:44.110 Index. 19:44.110 --> 19:50.530 We also need serialized field private animator skin display just like that. 19:50.530 --> 19:52.000 Then we're going to make two methods. 19:52.000 --> 19:53.710 For two functions we have. 19:53.830 --> 19:59.800 We know that maximum lengths of the skins is three I mean four, but last index is three. 19:59.800 --> 20:03.160 So we're going to make public void next skin. 20:03.310 --> 20:05.230 And here we're going to do. 20:06.460 --> 20:07.690 Current index. 20:08.380 --> 20:10.090 Last class and if. 20:10.090 --> 20:11.290 Current index. 20:12.660 --> 20:17.430 He is bigger than three, then current index is equals to zero. 20:17.460 --> 20:24.030 In case you have different setup in your game, let's make a variable serialized field private int max 20:24.030 --> 20:24.600 index. 20:24.600 --> 20:28.170 So you can change settings in the inspector. 20:28.770 --> 20:34.740 And we're going to need public void previous skin in which we're going to do current index minus minus. 20:34.740 --> 20:37.380 So we're going to do minus one every time we click the button. 20:37.380 --> 20:46.440 And then if current index is less than zero then current index is equals to max index. 20:46.950 --> 20:49.770 So we're going to choose the last one right. 20:49.770 --> 20:51.480 So we can scroll them endlessly. 20:51.480 --> 20:54.930 Now this will change the index but it will do nothing for the animator. 20:54.930 --> 20:57.540 For the animator we have to do this. 20:57.570 --> 21:00.030 We're going to make a method public void. 21:00.450 --> 21:01.830 Actually let it be private. 21:01.830 --> 21:02.610 It's fine. 21:03.760 --> 21:07.870 Private void update skin display. 21:07.930 --> 21:10.540 And in this one we're going to do something simple. 21:10.540 --> 21:15.580 We're going to do a for loop with a max index. 21:15.730 --> 21:17.560 And we're going to do anim. 21:18.570 --> 21:20.610 Now we have okay skin display. 21:21.820 --> 21:23.830 Set layer weight. 21:23.830 --> 21:28.540 So we set in weight of the layer and first parameter is layer index. 21:28.540 --> 21:33.070 Second parameter is this the the weight we want to have. 21:33.070 --> 21:38.350 So we're going to do I for the index and for the weight going to be zero. 21:38.350 --> 21:43.570 So this one will basically set weight to zero for all of the layers we have. 21:43.570 --> 21:49.450 Then we're going to take anim set layer weight sorry skin display set layer weight. 21:50.120 --> 21:52.610 And we want to give the index we want to have. 21:52.610 --> 21:54.080 So current index. 21:54.820 --> 21:57.160 And then one over here. 21:57.770 --> 22:01.820 And we need to update skin display every time we change the index. 22:01.820 --> 22:04.220 So we're going to do update skin display here. 22:04.550 --> 22:07.220 And we're going to do update skin display here. 22:08.100 --> 22:09.000 Very nice. 22:09.000 --> 22:10.860 Let's go ahead and check this first. 22:10.860 --> 22:12.420 I'm going to save everything. 22:12.450 --> 22:15.990 I'm going to go back to unity and a skin selection. 22:19.430 --> 22:25.430 Uh, first of all, we want to take menu character and drag here so we have access to the animator. 22:25.610 --> 22:28.220 Then maximum index is going to be three. 22:28.760 --> 22:32.480 And then we're going to select next skin button. 22:35.410 --> 22:39.640 And over here we're going to drag skin selection UI and choose. 22:40.240 --> 22:41.590 Next skin. 22:41.590 --> 22:45.220 For the previous skin, we're gonna drag skin selection UI. 22:46.430 --> 22:48.200 Previous skin. 22:48.860 --> 22:49.700 Perfect. 22:49.850 --> 22:51.470 Now let's go to play mode. 22:53.910 --> 22:57.720 And you can see I can switch between different skins. 22:58.470 --> 22:58.980 Okay. 22:58.980 --> 23:00.210 Something went wrong. 23:00.240 --> 23:00.720 Let me see. 23:00.720 --> 23:01.590 What is that? 23:03.870 --> 23:04.830 Savoy. 23:07.960 --> 23:11.260 So the problem is in this value over here. 23:11.260 --> 23:17.740 And instead of max index I think it's better to use skin display dot layer count. 23:17.740 --> 23:18.790 And this will. 23:19.480 --> 23:20.560 Use all of them. 23:20.560 --> 23:21.610 Let's try again. 23:21.610 --> 23:24.580 And if that does not help, then we just need to add an equal sign. 23:24.580 --> 23:25.360 Let's go. 23:26.510 --> 23:27.440 Yeah it's fine. 23:27.440 --> 23:30.140 It's working now because this layer was not included. 23:30.920 --> 23:32.090 Uh, yeah. 23:32.180 --> 23:32.720 All right. 23:32.750 --> 23:34.460 Now we can switch between skins. 23:34.730 --> 23:36.530 Very good news for us. 23:36.560 --> 23:40.970 Now, the next goal would be to bring this information into the main game. 23:40.970 --> 23:45.470 Because switching skins here does not change it for the main character. 23:45.470 --> 23:47.090 How can we do this? 23:47.330 --> 23:49.160 There are multiple ways to do that. 23:49.160 --> 23:53.930 And I want to make an object that will not be destroyed when you start the game. 23:54.380 --> 23:56.540 Uh, let's go to assets. 23:57.740 --> 23:58.490 Scripts. 23:58.490 --> 24:03.020 And I'm going to make this script that is called Skin Manager. 24:03.020 --> 24:08.570 And believe me or not, it's going to do, uh, like just one single thing, honestly. 24:09.020 --> 24:10.970 Uh, where is the skin manager? 24:12.320 --> 24:12.770 Lost it. 24:12.770 --> 24:13.100 Okay. 24:13.100 --> 24:15.080 Here we're going to make. 24:16.860 --> 24:20.610 Public static skin manager instance. 24:20.610 --> 24:25.380 Then in the wake we're going to do instance equals to this. 24:25.710 --> 24:28.110 And do we want to have duplicates. 24:28.110 --> 24:31.440 Actually possibly we can have duplicates if we run cycle okay. 24:31.440 --> 24:33.120 We need to destroy this object. 24:33.120 --> 24:39.240 If there is more than one for that we can use this if statement from the game manager. 24:39.240 --> 24:41.880 So I'm going to copy it bring it here. 24:41.880 --> 24:46.020 And also we don't want to destroy this object when we transfer to a new scene. 24:46.020 --> 24:51.270 So we're going to do here don't destroy on load this game object. 24:51.870 --> 24:52.680 All right. 24:52.890 --> 24:54.060 Simple as that. 24:54.060 --> 24:58.080 Now this object will be transferred between scenes. 24:58.080 --> 25:03.240 We can go ahead and try that uh select button will start the game I believe so. 25:07.290 --> 25:10.170 What we need is to create new empty object. 25:10.200 --> 25:12.090 I'm going to call it Skin Manager. 25:12.600 --> 25:14.880 I'm going to put the script on like that. 25:14.880 --> 25:19.410 And now when you go to play mode and press select button. 25:20.350 --> 25:21.790 You're going to start the game. 25:21.790 --> 25:24.730 And over here you have don't destroy on load. 25:24.730 --> 25:27.370 And it has the very same skin manager. 25:27.370 --> 25:31.900 So we can save information on this object over here. 25:31.900 --> 25:37.060 And then when we start the game or when we start the level, we can just pull information from this 25:37.060 --> 25:37.870 script. 25:38.510 --> 25:40.190 Okay, let's go here. 25:41.490 --> 25:46.500 I'm going to do public int chosen skin ID. 25:46.860 --> 25:49.650 We're going to use methods to get and set the value. 25:49.890 --> 25:50.910 Public void. 25:51.880 --> 26:01.480 Set skin ID, we're going to pass int id and is going to be chosen skin ID equals to ID and also we 26:01.480 --> 26:04.540 need public void get skin ID. 26:04.540 --> 26:07.570 And actually this can be not void but an integer. 26:08.160 --> 26:11.970 Int and it will return us chosen skin ID. 26:12.510 --> 26:13.140 Nice. 26:13.140 --> 26:14.340 That's all what we need. 26:14.370 --> 26:19.320 Now every time we select the skin, we can update information on the skin manager. 26:19.320 --> 26:24.450 Or we can update information when somebody press select button. 26:26.860 --> 26:28.270 Let's do select button. 26:28.270 --> 26:28.600 Yeah. 26:29.140 --> 26:30.520 Let's do another method. 26:31.030 --> 26:32.020 Public void. 26:34.040 --> 26:35.660 Select skin. 26:35.660 --> 26:38.000 And over here we just need to do something simple. 26:38.240 --> 26:43.340 Skin manager dot instance set skin ID to current index. 26:43.760 --> 26:46.400 We're also going to set up the purchase mechanic. 26:46.400 --> 26:48.770 Like we're going to pay fruits for the skin. 26:48.770 --> 26:51.500 But later on let's go back now. 26:52.440 --> 26:53.850 On the select button. 26:56.490 --> 26:59.130 We're going to add one more event. 26:59.780 --> 27:06.530 And let's put it before we go to a new game, then we're going to drag skin selection UI and we're going 27:06.530 --> 27:07.400 to choose. 27:08.910 --> 27:09.450 Uh. 27:09.450 --> 27:11.100 Select skin. 27:11.490 --> 27:12.300 Nice. 27:12.910 --> 27:15.010 Now something I forgot to check. 27:15.700 --> 27:18.490 And it's the order on the player. 27:19.910 --> 27:24.470 So, yeah, we're gonna have to go to scene. 27:24.950 --> 27:25.820 Main. 27:25.820 --> 27:26.810 Uh, sample scene. 27:26.810 --> 27:29.630 I'm going to save the changes on the player. 27:29.630 --> 27:32.210 First of all, we need to apply overrides. 27:32.940 --> 27:33.690 And over here. 27:33.690 --> 27:34.740 We need to choose. 27:35.650 --> 27:40.930 We had virtual guy ninja frog mask dude Pinkman. 27:40.930 --> 27:42.460 So this is how it's supposed to be. 27:42.460 --> 27:43.330 The order. 27:43.330 --> 27:44.740 Same as in the menu. 27:44.740 --> 27:47.110 Oh, we can see animator here, so it's fine. 27:47.290 --> 27:49.840 Ninja virtual guy, Ninja frog mask. 27:49.840 --> 27:50.080 Dude. 27:50.080 --> 27:52.780 Pinkman, let me apply overrides again. 27:53.710 --> 27:55.480 Then I'm going to go to main menu. 27:55.510 --> 27:55.930 Yeah. 27:55.930 --> 27:57.040 Let's save it. 27:57.220 --> 27:58.840 Let's play the game. 28:00.500 --> 28:02.720 And I'm going to switch skin to what I want. 28:02.720 --> 28:03.680 This one. 28:05.900 --> 28:07.160 And it didn't work. 28:07.160 --> 28:08.210 But it's okay. 28:08.210 --> 28:09.980 We just need to check information. 28:10.860 --> 28:11.790 We have Add. 28:11.820 --> 28:12.810 Very good. 28:13.140 --> 28:14.970 Now we need to go to the player script. 28:14.970 --> 28:19.980 And inside of this method over here we just need to check if we have skin manager in the scene. 28:19.980 --> 28:22.080 And if we do we're going to update the skin. 28:22.080 --> 28:23.610 So this is how it's going to be. 28:23.610 --> 28:25.320 We're going to do skin manager. 28:25.320 --> 28:29.490 Skin manager equals to skin manager dot instance. 28:29.490 --> 28:33.690 Then we're going to do if skin manager is equals to null then we return. 28:34.770 --> 28:42.000 And after that we're going to do anim runtime animator controller equals to animators with a skin manager 28:42.390 --> 28:44.160 dot chosen skin ID. 28:45.040 --> 28:45.760 Nice. 28:45.760 --> 28:54.070 Now we can remove this parameter from the parentheses and we can rename this to Update skin. 28:54.870 --> 28:59.760 And let's go to start method and call here Update skin. 29:01.090 --> 29:02.020 Just like that. 29:02.230 --> 29:03.220 Now it's going to work. 29:03.220 --> 29:08.590 Even if you start the game from a main menu and it's going to check if you have skill manager or not, 29:08.590 --> 29:10.360 and if you don't, it's not going to update the skin. 29:10.360 --> 29:13.390 But if you do, going to choose the skin that you chose in the main menu. 29:13.390 --> 29:14.230 Very nice. 29:14.230 --> 29:14.800 All right. 29:14.800 --> 29:19.360 I know it took a bit longer than usually, but you know a lot of things to set up. 29:19.360 --> 29:22.540 All of them are very simple one just lots of steps to take. 29:22.540 --> 29:23.650 I hope you like it. 29:23.650 --> 29:25.030 Thank you for paying attention. 29:25.030 --> 29:26.170 Let's go to the next video. 29:26.170 --> 29:27.550 We're going to do more.