WEBVTT 00:00.020 --> 00:00.470 Hello guys. 00:00.470 --> 00:01.460 Welcome to the video. 00:01.460 --> 00:04.670 In this one I want to show you how to make fade in fade out effect. 00:04.670 --> 00:07.580 And I came up with a really nice way to do that. 00:07.580 --> 00:10.670 So I'm very proud to share this one and I hope you like it. 00:10.670 --> 00:14.750 This might be a little bit confusing, because we're going to use a couple of things that you probably 00:14.750 --> 00:17.600 didn't see before, but I'll try to explain it as much as I can. 00:17.600 --> 00:23.510 And also maybe I will attach some sort of PDF written guide so you can read it and maybe understand 00:23.510 --> 00:24.170 it better. 00:24.170 --> 00:28.040 Okay, let's go to the scene of a main menu. 00:29.050 --> 00:30.070 Over here. 00:30.070 --> 00:32.920 Uh, first, let's make an image. 00:34.070 --> 00:40.790 Of a UI image, and we're going to click here and stretch it on the entire screen like that. 00:40.970 --> 00:45.050 Now you can see this image covers everything and we need it to be like that. 00:45.050 --> 00:51.500 But if you place object above other UI elements then it will be behind the elements. 00:51.500 --> 00:56.090 So in order for it to work correctly, it's always supposed to be below everything. 00:56.390 --> 00:57.080 Nice. 00:57.080 --> 01:04.430 Now we're going to make it black and our goal is to take alpha of this image. 01:05.060 --> 01:07.400 And make it transparent with a time like that. 01:07.400 --> 01:13.640 Then when we want to transition to the game, our goal is to make it black again and then start the 01:13.640 --> 01:13.970 game. 01:13.970 --> 01:15.860 So that's what we're going to do in this video. 01:15.860 --> 01:18.710 Let's name it as a fade image. 01:18.710 --> 01:23.780 And let's go and make a new script for this one I'm going to make UI. 01:24.920 --> 01:27.620 UI fade effect. 01:30.280 --> 01:33.160 Let me find this script over here. 01:33.160 --> 01:36.220 First of all, we want to have reference to the image. 01:36.220 --> 01:39.550 So I'm going to do serialize field private image. 01:40.970 --> 01:42.740 Uh, fade image. 01:42.740 --> 01:45.590 And then we're going to make a coroutine. 01:46.450 --> 01:49.630 Let's make a private eye enumerator. 01:51.790 --> 01:54.580 Let's call it fade or routine. 01:56.450 --> 02:01.100 And for this coroutine we need to pass the target alpha we want to have. 02:01.100 --> 02:03.500 So if you want to make it transparent it will be zero. 02:03.500 --> 02:06.290 If you want to make it black again, it will be one right. 02:06.290 --> 02:08.000 So we need target alpha. 02:08.000 --> 02:12.320 We also want to know how long it will take to make screen dark or transparent. 02:12.320 --> 02:16.610 So we're going to have float duration and that's good for now. 02:16.610 --> 02:17.570 We're going to add something else. 02:17.570 --> 02:19.760 But later on now how it's going to work. 02:19.760 --> 02:24.590 First of all we want to make a variable of a float time and make it equal to zero. 02:24.590 --> 02:28.280 Every time we start this coroutine, we're going to make a new variable with a time zero. 02:28.280 --> 02:34.580 And we're going to use this time to keep track of, uh, you know, duration of the while loop we're 02:34.580 --> 02:35.240 going to make. 02:35.240 --> 02:37.400 Then we're going to need a current color. 02:37.400 --> 02:40.280 So let's do color current color. 02:40.280 --> 02:44.990 So you'll be able to use it to not only with the black color, but with any color you want to have maybe 02:44.990 --> 02:47.090 white or yellow or anything like that. 02:47.090 --> 02:49.970 And let's make it equals to fade image dot color. 02:49.970 --> 02:53.300 And we want to have float starting alpha. 02:53.300 --> 02:55.400 So I'm going to call it start alpha. 02:55.400 --> 02:58.220 And it's going to be equals to current color dot alpha. 02:58.220 --> 03:03.290 Because alpha is the parameter we are about to change on the image over here. 03:03.290 --> 03:03.470 Right. 03:03.470 --> 03:04.550 This is the alpha. 03:06.070 --> 03:06.430 Okay. 03:06.430 --> 03:07.180 Let's go back. 03:07.180 --> 03:10.900 And next step would be to make a while loop. 03:11.350 --> 03:17.830 If you see while loop for the first time, basically it does something until conditions are not met 03:17.830 --> 03:22.390 anymore and it will stay inside the loop until it exits the conditions. 03:22.390 --> 03:23.860 Maybe let's. 03:23.860 --> 03:25.300 Yeah, let's try first. 03:25.300 --> 03:28.480 Real quick I'm going to do a start method. 03:28.510 --> 03:31.570 I'm going to comment this out because I want to show you an example. 03:31.570 --> 03:36.820 And over here I'm going to do let me do private int number. 03:38.360 --> 03:40.010 And I'm going to do while. 03:40.730 --> 03:42.050 Number. 03:43.070 --> 03:45.680 Is less than 100. 03:46.420 --> 03:50.170 You do debug log number. 03:51.110 --> 03:54.860 And before that you do number plus plus. 03:54.860 --> 03:58.040 So while number is below 100 it's going to stay in the loop. 03:58.040 --> 03:59.120 It's going to do the thing. 03:59.120 --> 04:01.220 And then only it will do something else. 04:01.670 --> 04:02.060 All right. 04:02.060 --> 04:05.810 For example debug log start was called. 04:05.810 --> 04:09.860 Let's go ahead and start the game and see what we will have in a console. 04:13.690 --> 04:18.700 I'm going to put this fade effect script here, because this is the one that has all the information 04:18.700 --> 04:19.870 and loops. 04:20.110 --> 04:21.610 Let's go to play mode. 04:22.910 --> 04:30.560 And in the console you can see it stayed in the loop until it added all of the numbers, right? 04:30.560 --> 04:33.920 And only after that it gave us a message. 04:33.920 --> 04:36.560 Start was called in a very similar way. 04:36.560 --> 04:42.050 We're going to change color from fully black to transparent, and only after that we're going to confirm 04:42.050 --> 04:42.560 the result. 04:42.560 --> 04:45.380 That image is transparent, something like that. 04:45.380 --> 04:46.520 Let's go back. 04:47.450 --> 04:52.880 Now I'm going to erase start method and number and I'm going to uncomment this. 04:53.120 --> 04:57.530 So here we're going to do this while time is less than duration. 04:57.890 --> 05:02.840 And thanks to that we're going to keep this while loop in the borders of a duration we want to have. 05:02.840 --> 05:08.750 If this will be 1.5 seconds, for example, this will work until time is less than 1.5 seconds. 05:08.750 --> 05:14.570 And on each step of the loop, just like we increase the number we're going to do, time plus equals 05:14.570 --> 05:15.740 time dot delta time. 05:15.740 --> 05:18.440 So this helps us to keep track of the time. 05:18.440 --> 05:23.420 Then we want to get a float value of the alpha we want to give to the color. 05:23.420 --> 05:25.730 So we're going to do float alpha equals to. 05:25.730 --> 05:28.010 And here we're going to use math f dot lerp. 05:28.010 --> 05:29.600 We did use it before. 05:29.660 --> 05:32.360 So you supposed to remember how it works. 05:32.360 --> 05:37.370 And we're going to get lerp value from the starting alpha to the target alpha. 05:37.370 --> 05:42.140 And the size of a step will be time divided by duration. 05:42.560 --> 05:43.940 This is how it's going to work. 05:44.150 --> 05:48.680 Um, for example, duration is 1.5 seconds. 05:48.680 --> 05:56.030 By the time we using the math f lerp here at, let's say at the time, that being 0.3, we're going 05:56.030 --> 05:58.760 to divide it by duration of 1.5 seconds. 05:58.760 --> 06:03.080 So it's only 20% of the alpha we want to have later on. 06:03.080 --> 06:10.100 If let's say time is one and we divide it by 1.5 duration, then it's going to be 60% of the value. 06:10.100 --> 06:17.990 If time is equals to 1.4 and we divide it by 1.5, then it's going to be 0.93% of the alpha and so on. 06:19.370 --> 06:26.480 And if time is 1.5 and we divide it by 1.5 the duration, then it's going to be 100% of the alpha. 06:26.480 --> 06:28.100 So that's the idea of it. 06:28.100 --> 06:30.350 That's why we use time divided by duration. 06:30.350 --> 06:37.340 The more time has passed, the bigger this value will be and the more alpha we will give or lose. 06:37.340 --> 06:43.100 Depends on the target alpha we have, then we're going to take fade image dot color and give it new 06:43.100 --> 06:43.790 color. 06:43.790 --> 06:45.410 We're not going to change RGB. 06:45.410 --> 06:51.350 So we're going to do current color, our current color g, current color b. 06:51.350 --> 06:56.270 And we're going to give it a new alpha that we got with the lerp and how lerp works I just explained 06:56.360 --> 06:56.510 it. 06:56.510 --> 07:00.320 And you already know how this alpha will be taken right. 07:00.320 --> 07:01.760 We just talked about this. 07:02.000 --> 07:05.780 And now to make it stretch to during some time. 07:05.780 --> 07:08.990 So it will not be done immediately within one frame. 07:08.990 --> 07:12.830 We want to type here yield return null. 07:12.830 --> 07:14.450 So this line of code. 07:15.610 --> 07:18.610 Is what makes this loop work during some time. 07:18.610 --> 07:24.640 Because yield return null says that you need to wait not for seconds, not for amount of frames, but 07:24.640 --> 07:26.980 only until the next frame. 07:26.980 --> 07:30.850 So it will stay inside of the loop and it will do something. 07:30.850 --> 07:33.790 For example, it will get the alpha assigned the alpha to the color. 07:33.790 --> 07:35.770 Then it will wait for the next frame. 07:35.770 --> 07:41.230 On the next frame, the time will be bigger because this one was called on the next frame and we did 07:41.230 --> 07:42.970 plus equals time dot delta time. 07:42.970 --> 07:45.160 Because of that, alpha will be bigger. 07:45.160 --> 07:48.820 Because of that color will get new alpha with a bigger value. 07:48.820 --> 07:54.160 And then we're going to ask it to wait for the next frame and then it will go again like that. 07:54.520 --> 07:54.940 Okay. 07:54.940 --> 07:56.320 So that's the idea of it. 07:56.320 --> 08:01.720 And with the help of this, it will stretch it during the amount of time we want to have, like during 08:01.720 --> 08:03.700 the duration we set in the method. 08:03.700 --> 08:09.910 And once time is bigger or equals to the duration, we're going to just do fade image dot color equals 08:09.910 --> 08:16.900 to new color of a current color dot g, current color b, and I forgot are. 08:17.950 --> 08:23.890 For in color and for the alpha, we're going to give it a target alpha just like that. 08:23.890 --> 08:25.330 So that's what we need. 08:25.330 --> 08:29.110 Now let's make a public method that we can use to call this coroutine. 08:29.110 --> 08:33.130 To start it I'm going to do public void fade effect. 08:34.540 --> 08:36.250 Uh, UI fade, maybe. 08:36.250 --> 08:37.630 Screen. 08:38.960 --> 08:39.440 Fade. 08:39.440 --> 08:39.890 Yeah. 08:39.890 --> 08:41.270 Screen fade, I think. 08:42.210 --> 08:43.920 And here we need float. 08:43.950 --> 08:44.880 Target. 08:44.880 --> 08:45.600 Alpha. 08:46.340 --> 08:47.750 Load duration. 08:47.750 --> 08:53.150 And then we're going to just do startcoroutine of a fade coroutine, and we're going to give it target 08:53.150 --> 08:54.260 alpha and duration. 08:54.260 --> 08:55.220 That's good for now. 08:55.220 --> 08:58.190 Now let's go to UI main menu. 08:59.530 --> 09:05.380 Um, I'm going to make a private UI fade effect script. 09:06.280 --> 09:07.240 Paid effect. 09:07.950 --> 09:10.020 And I'm going to open a wake method. 09:10.020 --> 09:15.390 And in the wake I'm going to do fade effect equals to get component in children of a UI fade effect. 09:15.390 --> 09:17.370 So it will find it automatically. 09:17.370 --> 09:22.290 And then in the start I want to do this fade effect. 09:23.060 --> 09:24.650 What was that screen fade. 09:24.680 --> 09:28.490 We're going to give target alpha of zero because we want it to become transparent. 09:28.490 --> 09:31.670 And let's say we do it during 1.5 seconds. 09:32.090 --> 09:33.380 Now I'm going to save it. 09:33.380 --> 09:34.940 Go back to unity. 09:34.940 --> 09:36.560 We can see everything is black. 09:36.560 --> 09:37.910 We cannot see anything. 09:38.520 --> 09:40.410 And we're going to go to play mode. 09:41.700 --> 09:43.170 Oh, wait, I forgot something. 09:43.170 --> 09:43.650 Here. 09:43.650 --> 09:45.240 We need to assign image. 09:45.690 --> 09:47.880 Let's give it an image over here. 09:49.350 --> 09:50.550 Let's go to play mode. 09:50.970 --> 09:55.020 And now you see we have nice fade out effect. 09:55.020 --> 09:56.580 I'm always confused. 09:56.580 --> 09:57.360 What is the fade in? 09:57.360 --> 09:58.350 What is a fade out? 09:58.350 --> 10:00.120 It was fade out now right? 10:00.120 --> 10:00.450 Because. 10:00.450 --> 10:01.740 Wait, let me check this. 10:02.010 --> 10:07.080 Uh, commonly fade in begins with a black background and slow transition into a new clip. 10:07.080 --> 10:08.280 Still confusing. 10:08.520 --> 10:09.930 Begins with a black background. 10:09.930 --> 10:11.460 So this is a fade in effect. 10:11.460 --> 10:14.250 And when it becomes black again, it's a fade out, I guess. 10:14.250 --> 10:16.140 All right, so we have nice fade in effect. 10:16.140 --> 10:23.100 But what I don't like about this is that even if we use fade out effect when we start new game, we 10:23.100 --> 10:24.060 will not see it. 10:24.060 --> 10:25.080 Let me show it to you. 10:25.080 --> 10:31.320 We're going to go back here when we do new game I'm going to do fade effect screen fade, make it dark. 10:31.320 --> 10:35.160 So we pass in value of one and duration 1.5 F. 10:35.160 --> 10:37.740 For example you're going to go back to the game. 10:38.690 --> 10:41.870 Now we're going to have one back where we cannot click the button. 10:41.870 --> 10:43.520 We're going to easily fix it. 10:44.810 --> 10:46.430 So there is a fade in. 10:46.430 --> 10:47.480 I'm clicking there. 10:47.480 --> 10:48.110 New game. 10:48.110 --> 10:48.920 It doesn't work. 10:48.920 --> 10:51.290 That happens because I'm not clicking on the button. 10:51.290 --> 10:54.860 I'm clicking on the image to make it work correct. 10:54.860 --> 10:57.680 We need to uncheck raycast target over here. 10:57.680 --> 10:58.640 Let's do it. 10:58.640 --> 11:02.300 And now I can click on the new game and new game will begin. 11:02.300 --> 11:10.550 And we did not see any fade in effect or fade out because we did start the coroutine and we changed 11:10.550 --> 11:11.840 scene immediately. 11:11.840 --> 11:16.010 Let's go to fade image and uncheck raycast target over here okay. 11:17.150 --> 11:19.640 Now let's go to the script. 11:19.970 --> 11:22.100 And over here we can add something. 11:22.190 --> 11:25.910 We can add an implementation of a method. 11:25.910 --> 11:26.990 Once we are done. 11:26.990 --> 11:27.890 Once we are ready. 11:27.890 --> 11:29.480 Yeah, that is also possible. 11:29.480 --> 11:36.560 Let's put comma over here and let's type system action on complete. 11:36.560 --> 11:42.320 Now we can pass a method inside of this coroutine as a parameter. 11:42.320 --> 11:44.090 We only need to add it here. 11:44.090 --> 11:47.810 System action on complete. 11:47.810 --> 11:52.790 And I want to make it null by default so you don't have to pass something always. 11:52.790 --> 11:55.070 Sometimes you can just ignore the parameter. 11:55.070 --> 11:57.890 It's going to pass null and you won't have any method there. 11:57.890 --> 11:59.840 Let's pass on complete okay. 12:00.350 --> 12:07.160 Now we're gonna, uh, go down here and once we make color of the image with a target alpha, we're 12:07.160 --> 12:10.070 going to check Oncomplete question mark. 12:10.070 --> 12:12.950 And this will basically do oncomplete is not equals to null. 12:12.950 --> 12:17.900 Then do invoke of the Oncomplete method that we pass through the parentheses. 12:17.900 --> 12:19.610 And we're going to just save it. 12:19.610 --> 12:23.420 Now we can go back to main menu over here. 12:23.780 --> 12:29.990 And we can maybe maybe let's make a method public. 12:30.080 --> 12:32.420 Uh actually can be private private void. 12:33.090 --> 12:35.190 Load level scene. 12:35.190 --> 12:37.890 We're going to improve it later on because we're going to have different levels. 12:37.890 --> 12:39.720 But as of now, let's keep it simple. 12:39.750 --> 12:40.740 This will do. 12:40.770 --> 12:45.540 Scene manager load scene with a scene name okay. 12:45.540 --> 12:52.560 And now over here when we click New game we can put comma and pass method of a load level scene. 12:52.560 --> 12:55.110 And we do need parentheses this time just like that. 12:55.110 --> 12:57.300 And now this will do fade out effect. 12:57.300 --> 13:01.440 And then it will run the method that we pass into parentheses. 13:01.650 --> 13:08.820 And because this will be called inside of the coroutine only after we reach the target color it will 13:08.820 --> 13:09.690 have a delay. 13:09.690 --> 13:11.700 Basically let's go back. 13:14.990 --> 13:16.340 Going to go to play mode. 13:20.620 --> 13:21.400 And. 13:22.040 --> 13:23.120 Fade in. 13:23.120 --> 13:24.200 New game. 13:24.200 --> 13:25.340 Fade out. 13:25.340 --> 13:25.850 Boom. 13:25.850 --> 13:26.810 New game. 13:26.810 --> 13:27.770 Very cool. 13:27.770 --> 13:29.150 Working perfectly. 13:29.150 --> 13:30.560 I love it now. 13:30.560 --> 13:31.880 Something to do here. 13:31.880 --> 13:38.090 I actually don't like to have black screen when I'm developing the menu, so I'm going to make it transparent 13:38.090 --> 13:39.500 for now by default. 13:39.500 --> 13:39.950 Okay. 13:39.950 --> 13:40.580 Just like that. 13:40.580 --> 13:44.000 So I can see things here and I can basically edit. 13:44.000 --> 13:48.740 But later on once we build the game in the end of the course, we need to make it dark. 13:48.740 --> 13:49.940 Don't forget it, okay? 13:49.940 --> 13:51.560 Or otherwise it will not work. 13:51.830 --> 13:55.040 Now let's add this fade effect in the game. 13:55.130 --> 13:57.050 Um, we can just. 13:57.050 --> 13:58.040 How can we do this? 13:58.040 --> 13:59.330 I don't want to make a prefab. 13:59.330 --> 13:59.810 Really? 13:59.810 --> 14:02.960 We can go to asset scene. 14:02.960 --> 14:04.760 Actually, we need a prefab, right? 14:04.760 --> 14:06.890 Why don't I want to make a prefab? 14:06.890 --> 14:08.480 Let's go and do prefab. 14:08.480 --> 14:10.700 Let's try fade image here. 14:10.700 --> 14:14.120 And I'm going to go to scene main menu. 14:14.120 --> 14:15.530 Save it okay. 14:16.520 --> 14:17.180 Oh, sorry. 14:17.180 --> 14:18.230 Simple scene. 14:18.260 --> 14:20.060 We need to make a canvas. 14:20.060 --> 14:21.020 Let's do UI. 14:21.020 --> 14:21.650 Canvas. 14:21.650 --> 14:23.270 Now we have in game UI. 14:23.300 --> 14:25.970 Don't forget to do scale with a screen size. 14:25.970 --> 14:28.220 By the way, I forgot to do this in the end. 14:28.220 --> 14:31.040 Scene 920 by 1080. 14:32.250 --> 14:37.410 And I'm going to open prefabs and I'm going to drag this fade image to the canvas like so. 14:37.410 --> 14:40.770 And for the sake of testing, let's make it dark. 14:41.920 --> 14:43.960 And let's go. 14:44.080 --> 14:48.100 We need we need in game UI some sort of in game UI here. 14:48.370 --> 14:49.870 Let's go make. 14:51.920 --> 14:55.250 Script UI in game. 14:57.270 --> 14:58.680 Let me open this. 14:59.250 --> 15:01.260 Let's make it as an instance. 15:01.260 --> 15:04.830 I want to do public static UI in game instance. 15:04.830 --> 15:07.560 Awake instance equals to this. 15:07.560 --> 15:09.540 Now it is available from anywhere. 15:09.540 --> 15:14.490 Let's do public fade UI fade effect, fade effect. 15:14.850 --> 15:20.190 Then in the wake I'm going to do fade effect equals to get component in children of a fade effect, 15:20.190 --> 15:21.690 same as we did in the main menu. 15:21.690 --> 15:22.110 Nice. 15:22.110 --> 15:25.380 Now we have access to this through any script we want. 15:25.530 --> 15:27.510 And I'm going to go to Game Manager. 15:28.690 --> 15:32.650 Over here when we load the end scene. 15:33.290 --> 15:34.880 How can we do this again? 15:34.880 --> 15:37.760 We need we need some sort of scene like level manager. 15:37.760 --> 15:39.530 I guess that will load any scene we want. 15:39.530 --> 15:41.660 But as of now, let's make just extra method. 15:41.660 --> 15:42.200 Okay. 15:42.860 --> 15:45.680 Private void load the end. 15:45.680 --> 15:47.240 Wait, we already have this name. 15:47.360 --> 15:50.270 Let's do level finished. 15:50.270 --> 15:51.230 This is what we're going to do. 15:51.230 --> 15:56.930 Level finished and this will do UI in game dot instance. 15:57.900 --> 15:59.760 Fade effect. 16:00.180 --> 16:08.910 Screen fade is going to make it dark during 1.5 seconds, and then it's going to run the load and scene 16:08.910 --> 16:09.600 method. 16:09.630 --> 16:10.350 Okay. 16:10.350 --> 16:11.520 Very good. 16:11.670 --> 16:16.890 Now let me make this public and this private. 16:16.890 --> 16:19.530 And we can go to the finish point. 16:19.530 --> 16:24.420 And instead of running this method we're going to run finish like level finished. 16:24.450 --> 16:24.990 Okay. 16:24.990 --> 16:27.030 Let's save everything together. 16:27.650 --> 16:30.170 And this is supposed to work fine. 16:30.170 --> 16:33.350 We only want to do fade in when we start the level. 16:33.560 --> 16:40.340 So let's go maybe to UI in game and just in the start method I'm going to do fade effect. 16:40.340 --> 16:44.180 Uh, screen fade to zero with a duration of one second. 16:44.180 --> 16:51.020 Maybe because we know player can be impatient and we could, by the way respawn the player here, but 16:51.020 --> 16:51.800 let's not do it now. 16:51.800 --> 16:53.870 Let's just check the fade in effect. 16:59.200 --> 17:01.510 Now let's go to Asset scene. 17:01.510 --> 17:02.590 Main menu. 17:02.620 --> 17:04.300 We're going to save the changes. 17:04.780 --> 17:06.250 We start the play mode. 17:08.050 --> 17:09.130 We have the game. 17:09.130 --> 17:10.390 I'm going to click new game. 17:10.390 --> 17:13.930 We have fade in, fade out. 17:14.650 --> 17:15.760 Come on, fade out. 17:16.450 --> 17:17.050 What's up man? 17:18.610 --> 17:20.770 Do Phidelt, please. 17:21.810 --> 17:23.400 I know we are in the game. 17:25.350 --> 17:27.540 For some reason, fade out did not happen. 17:28.770 --> 17:30.270 Uh, y. 17:30.270 --> 17:31.680 Oh, I know why. 17:31.800 --> 17:33.030 I'm so sorry. 17:33.330 --> 17:39.030 Let's go to sample scene and on the canvas, we need to add UI in game. 17:39.330 --> 17:40.230 All right. 17:40.230 --> 17:42.060 This will be assigned automatically. 17:42.060 --> 17:42.810 Don't worry about it. 17:42.810 --> 17:43.590 For now. 17:43.590 --> 17:46.410 Let's go ahead and test this again. 17:46.560 --> 17:47.430 Main menu. 17:47.430 --> 17:48.480 Save. 17:48.570 --> 17:49.950 Go to play mode. 17:51.770 --> 17:56.450 All right, new game dark then transparent and player is there. 17:56.450 --> 17:59.990 I can run, go to the finish point. 18:00.500 --> 18:02.060 We are on the credits. 18:02.060 --> 18:02.870 Perfect. 18:02.870 --> 18:04.010 I love it so much. 18:04.010 --> 18:05.870 Let's go to end scene. 18:06.140 --> 18:07.790 Let's go to prefabs. 18:07.790 --> 18:09.140 Let's take the fade image. 18:09.140 --> 18:11.900 Drag it to the canvas like so. 18:12.550 --> 18:19.150 And on the UI credits, we can make a private fade effect. 18:19.720 --> 18:21.820 We're going to get component in their wake. 18:22.650 --> 18:24.420 And we can run it in their wake as well. 18:24.420 --> 18:29.970 Let's do fade effect screen fade target alpha zero duration one second. 18:29.970 --> 18:30.900 And that's it. 18:32.010 --> 18:38.580 And when we go to main menu, probably we need to do same trick with the transferring to another scene. 18:40.640 --> 18:41.930 So I'm going to name these two. 18:41.930 --> 18:43.850 Go to main menu scene. 18:45.540 --> 18:47.310 And I'm going to make Private Void. 18:47.310 --> 18:55.170 Go to main menu, which will do me a favor of using fade effect. 18:55.350 --> 18:58.200 Screen fade is going to make it dark. 18:58.200 --> 19:03.540 It's going to have duration of one second and it's going to call go to main menu method. 19:04.560 --> 19:05.310 Okay. 19:05.730 --> 19:06.000 Sorry. 19:06.000 --> 19:07.230 Go to main menu scene. 19:07.230 --> 19:07.380 Yeah. 19:07.380 --> 19:08.700 We need different names. 19:08.820 --> 19:09.660 Um, yeah. 19:09.660 --> 19:15.600 We gonna have a system that will load different scenes with one method a bit later on. 19:15.600 --> 19:17.160 Just let's use it this way for now. 19:17.160 --> 19:18.600 We're going to clean this up later. 19:19.050 --> 19:19.530 Okay. 19:19.530 --> 19:21.360 Now we can go here and call. 19:21.360 --> 19:22.590 Go to main menu. 19:24.520 --> 19:26.920 Let me rename this so we don't mess up. 19:27.920 --> 19:29.450 Switch to. 19:30.010 --> 19:31.180 Menu scene. 19:31.180 --> 19:31.390 Yeah. 19:31.390 --> 19:34.660 So it has different name and it's easy to recognize the difference. 19:35.020 --> 19:37.240 And over here we're going to do go to main menu. 19:38.640 --> 19:39.240 Cool. 19:39.240 --> 19:40.470 Now let's save this. 19:40.500 --> 19:45.900 Let me check all together again, and we're good to go to the next video. 19:46.970 --> 19:49.010 We have failed image here. 19:49.010 --> 19:49.940 It's fine. 19:49.940 --> 19:53.690 We're going to go to asset scenes main menu. 19:53.720 --> 19:56.150 We're going to save the changes here. 19:56.150 --> 19:57.680 I want to make image black again. 19:57.680 --> 20:00.830 So I just can see how it all works together. 20:01.130 --> 20:03.470 Let's go to game play mode. 20:04.950 --> 20:05.760 Fade effect. 20:05.760 --> 20:06.450 Very pretty. 20:06.450 --> 20:08.400 And nice new game. 20:08.400 --> 20:10.560 Yes, yes. 20:11.470 --> 20:12.460 Finish the level. 20:12.460 --> 20:13.660 Yes. 20:13.810 --> 20:16.300 This was quite fast and I don't see the text. 20:16.300 --> 20:18.190 So something happened there. 20:21.120 --> 20:23.670 Not set is an instance. 20:24.970 --> 20:27.040 Oh, I did not get the component. 20:27.040 --> 20:28.180 Oh my God, I'm so sorry. 20:28.180 --> 20:29.770 Get component in children. 20:30.870 --> 20:34.080 Okay, I have to check again because this is very important. 20:34.080 --> 20:35.820 Let's not make any mistakes. 20:43.720 --> 20:44.410 Game. 20:44.410 --> 20:45.580 New game. 20:45.880 --> 20:46.600 Dark. 20:46.630 --> 20:48.100 Transparent. 20:48.670 --> 20:50.170 Getting black again. 20:50.650 --> 20:51.220 Again. 20:51.220 --> 20:53.380 Something is not working here. 20:53.380 --> 20:55.000 Or was it just too fast? 20:56.080 --> 20:57.760 Let's try longer. 20:57.760 --> 21:00.370 Let's try two seconds on the awake. 21:00.910 --> 21:02.410 Okay, I'm going to go back. 21:07.510 --> 21:08.800 Game window. 21:10.810 --> 21:13.090 Nice new game. 21:17.580 --> 21:19.050 Why it is so fast. 21:19.050 --> 21:20.160 Man, I don't like it. 21:20.160 --> 21:21.390 I don't understand it. 21:21.390 --> 21:23.220 Oh, I know why I'm so sorry. 21:23.220 --> 21:30.390 Because on the in the end over here, this has, um. 21:32.280 --> 21:35.130 This has a transparent and this makes it. 21:35.950 --> 21:37.630 Inconvenient for us. 21:38.110 --> 21:38.770 Okay. 21:38.770 --> 21:40.330 It's supposed to be good now. 21:44.380 --> 21:45.160 Yeah, yeah, yeah. 21:45.160 --> 21:45.850 It's working. 21:45.850 --> 21:46.390 Okay. 21:47.740 --> 21:49.000 Let's do the test again. 21:49.000 --> 21:50.200 Just so I know it's working. 21:50.200 --> 21:51.580 You see, testing is good. 21:51.610 --> 21:54.220 Testing helps me to find the mistakes. 21:56.110 --> 21:57.220 New game. 21:59.040 --> 22:01.260 Everything is pretty and cinematic. 22:02.490 --> 22:03.840 Yes. 22:03.840 --> 22:04.830 Okay. 22:04.830 --> 22:05.880 Very cool. 22:06.180 --> 22:07.890 So that's good for now. 22:08.010 --> 22:10.440 Thank you so much for paying attention. 22:10.440 --> 22:12.300 I'm going to go to main menu. 22:13.880 --> 22:19.280 And I'm going to take the fade image and make it transparent, because we still need to do lots of things 22:19.280 --> 22:20.180 in the main menu. 22:21.260 --> 22:23.390 And I'll see you in the next video.