1 00:00:00,000 --> 00:00:03,330 Welcome back my fellow game developers 2 00:00:03,330 --> 00:00:04,740 to a brand new video. 3 00:00:04,740 --> 00:00:06,690 And this one, you'll notice that we 4 00:00:06,690 --> 00:00:09,000 have the fading in and out. 5 00:00:09,000 --> 00:00:11,070 And what is that for? 6 00:00:11,070 --> 00:00:12,480 Well, if we look right here, 7 00:00:12,480 --> 00:00:15,210 we have a huge black box. 8 00:00:15,210 --> 00:00:17,100 And you can see that right now. 9 00:00:17,100 --> 00:00:19,290 We don't see anything in the game. 10 00:00:19,290 --> 00:00:20,190 Why is that? 11 00:00:20,190 --> 00:00:20,880 What happened? 12 00:00:20,880 --> 00:00:21,960 That we'd leave the game? 13 00:00:21,960 --> 00:00:23,460 Why is it so small right now? 14 00:00:23,460 --> 00:00:24,710 Why are we zoomed out? 15 00:00:24,705 --> 00:00:27,215 So many question, so few answers. 16 00:00:27,210 --> 00:00:28,380 If I run the game, 17 00:00:28,380 --> 00:00:30,630 you'll notice that we start off the level 18 00:00:30,630 --> 00:00:33,010 by fading out of the black image. 19 00:00:33,010 --> 00:00:34,660 And if we walk around, 20 00:00:34,655 --> 00:00:36,895 you can see that as soon as we enter the portal, 21 00:00:36,890 --> 00:00:38,470 not only do we slow down, 22 00:00:38,465 --> 00:00:39,995 but we fade out, 23 00:00:39,995 --> 00:00:43,615 and then we fade back in when we go to the next level. 24 00:00:43,610 --> 00:00:44,930 So let's not waste 25 00:00:44,930 --> 00:00:48,770 any more time and let's get to failing. 26 00:00:48,770 --> 00:00:50,560 Oh, okay. 27 00:00:50,555 --> 00:00:52,225 So now we are 28 00:00:52,220 --> 00:00:55,220 properly transitioning from one level to the next. 29 00:00:55,220 --> 00:00:58,040 We have the timescale effect 30 00:00:58,040 --> 00:00:59,680 where we slow everything down. 31 00:00:59,675 --> 00:01:02,095 The next thing that we want to do is we want 32 00:01:02,090 --> 00:01:04,580 to have some kind of fading effect. 33 00:01:04,580 --> 00:01:06,380 So what we want is B1, 34 00:01:06,380 --> 00:01:10,070 the image or the entire game to fade to black. 35 00:01:10,070 --> 00:01:12,050 And then when we enter a new level, 36 00:01:12,050 --> 00:01:13,790 we want to fade out. 37 00:01:13,790 --> 00:01:16,160 So let's go ahead do that. 38 00:01:16,160 --> 00:01:18,010 First thing that we need to do, 39 00:01:18,005 --> 00:01:20,695 or how is the fading outgoing to work? 40 00:01:20,690 --> 00:01:24,380 We will have a big black image in here that will fade 41 00:01:24,380 --> 00:01:27,920 in and then fade out as we move from level to the next. 42 00:01:27,920 --> 00:01:29,930 So it's all about a black image 43 00:01:29,930 --> 00:01:32,500 and we use the alpha on it. 44 00:01:32,495 --> 00:01:34,415 So let's do that. 45 00:01:34,415 --> 00:01:38,785 How are we going to add an image in Unity? 46 00:01:38,780 --> 00:01:41,600 Well, we need something called a canvas. 47 00:01:41,600 --> 00:01:43,730 So I'm going to create a canvas. 48 00:01:43,730 --> 00:01:45,800 I'm going to right-click in the hierarchy, 49 00:01:45,800 --> 00:01:48,950 go to your eye and find the campus. 50 00:01:48,950 --> 00:01:51,170 There you go. Now we have a campus. 51 00:01:51,170 --> 00:01:52,720 If I double-click on it, 52 00:01:52,715 --> 00:01:55,145 there you go, you can see it's one huge, 53 00:01:55,145 --> 00:01:57,425 big canvas and you might be wondering, 54 00:01:57,425 --> 00:02:01,955 why is the canvas so big while our game so small? 55 00:02:01,955 --> 00:02:03,835 Well, this is the way that Unity 56 00:02:03,830 --> 00:02:06,520 handles using Canvas and adding images. 57 00:02:06,515 --> 00:02:09,775 It's better to play around with the images right here. 58 00:02:09,770 --> 00:02:12,320 Instead of playing around in the images, 59 00:02:12,320 --> 00:02:14,320 write it and having everything in front 60 00:02:14,315 --> 00:02:16,945 of the player and the objects in the game. 61 00:02:16,940 --> 00:02:19,220 So this is a much better way or 62 00:02:19,220 --> 00:02:22,060 the way that unity uses to handle things. 63 00:02:22,055 --> 00:02:23,545 You can also see that we have 64 00:02:23,540 --> 00:02:25,090 something called the event system. 65 00:02:25,085 --> 00:02:27,175 And this allows us to, for example, 66 00:02:27,170 --> 00:02:30,020 let's say we have some kind of button on the canvas. 67 00:02:30,020 --> 00:02:32,000 We want to click it so we 68 00:02:32,000 --> 00:02:34,300 can add event system under the Canvas, 69 00:02:34,295 --> 00:02:36,935 make it a child, and keep it there for now. 70 00:02:36,935 --> 00:02:40,475 And this event system allows us to actually push 71 00:02:40,475 --> 00:02:42,445 buttons on the screen and allow 72 00:02:42,440 --> 00:02:44,530 us to interact with the canvas. 73 00:02:44,525 --> 00:02:46,985 We'll see how that works in just a bit. 74 00:02:46,985 --> 00:02:48,955 But for now, we want to go 75 00:02:48,950 --> 00:02:51,050 into the canvas scaler right here. 76 00:02:51,050 --> 00:02:54,490 You can see that we can scale with screen size. 77 00:02:54,485 --> 00:02:57,625 And we want to change this from a 100 to 78 00:02:57,620 --> 00:03:01,000 1920 by then eight, 79 00:03:00,995 --> 00:03:03,505 which is the size of the screen which 80 00:03:03,500 --> 00:03:06,260 we are using or creating the gaming. 81 00:03:06,260 --> 00:03:07,330 Hit Enter. 82 00:03:07,325 --> 00:03:10,295 There you go. Now everything is done. 83 00:03:10,295 --> 00:03:12,865 You can see we have the ray caster and an element 84 00:03:12,860 --> 00:03:15,440 for the canvas which isn't that important. 85 00:03:15,440 --> 00:03:18,040 We won't be changing anything too much in here. 86 00:03:18,035 --> 00:03:21,295 We only want to make sure that the canvas scaler as 87 00:03:21,290 --> 00:03:26,170 scale screen size and we want to make it 1920 by 1080. 88 00:03:26,165 --> 00:03:26,795 Okay, great. 89 00:03:26,795 --> 00:03:28,075 Now with that done, 90 00:03:28,070 --> 00:03:30,280 next step is to add an image. 91 00:03:30,275 --> 00:03:32,285 So I'm going to right-click in here, 92 00:03:32,285 --> 00:03:35,305 go to you are, and find an image. 93 00:03:35,300 --> 00:03:37,870 So now you can see we have 94 00:03:37,865 --> 00:03:39,265 an image in the middle of 95 00:03:39,260 --> 00:03:41,450 the huge canvas and I'm going to, 96 00:03:41,450 --> 00:03:43,990 is the fading image. 97 00:03:43,985 --> 00:03:47,215 But even though we have it on the canvas, 98 00:03:47,210 --> 00:03:49,040 you can see down here in the game that 99 00:03:49,040 --> 00:03:51,070 we have it as a small block. 100 00:03:51,065 --> 00:03:53,525 And if I move it to the upper side, 101 00:03:53,525 --> 00:03:56,425 you'll notice that it's on the upper side of the game, 102 00:03:56,420 --> 00:03:57,620 and in the middle, it's in 103 00:03:57,620 --> 00:04:00,010 the middle where the player resides. 104 00:04:00,005 --> 00:04:02,035 And on the bottom left you can see it. 105 00:04:02,030 --> 00:04:04,250 So it's not even though the image 106 00:04:04,250 --> 00:04:07,100 right here on top of the game is huge. 107 00:04:07,100 --> 00:04:09,220 But you can see that on the canvas, 108 00:04:09,215 --> 00:04:11,875 It's really small and it scales down. 109 00:04:11,870 --> 00:04:16,750 So this is how we represent things in Unity on UI canvas. 110 00:04:16,745 --> 00:04:19,015 Now, what are we going to do? 111 00:04:19,010 --> 00:04:21,950 We want to make this image fill up the entire canvas, 112 00:04:21,950 --> 00:04:23,650 make it completely black. 113 00:04:23,645 --> 00:04:25,135 And then we are going to use 114 00:04:25,130 --> 00:04:28,580 the transparency on it to fade in and fade out. 115 00:04:28,580 --> 00:04:31,990 First of all, how do we make it as big as the screen? 116 00:04:31,985 --> 00:04:34,015 Well, there is an option right here. 117 00:04:34,010 --> 00:04:36,260 You can see that it's the rect tool. 118 00:04:36,260 --> 00:04:38,390 When you click it, you can drag 119 00:04:38,390 --> 00:04:40,690 and make this image bigger and smaller. 120 00:04:40,685 --> 00:04:42,145 And you'll notice right here we 121 00:04:42,140 --> 00:04:43,820 have a lot of things which is 122 00:04:43,820 --> 00:04:46,070 the Rect Transform to 123 00:04:46,070 --> 00:04:49,030 handle and change how the image looks. 124 00:04:49,025 --> 00:04:51,085 We can also hold down Alt 125 00:04:51,080 --> 00:04:53,260 and choose one of the corners, or army. 126 00:04:53,255 --> 00:04:55,715 Choose one of the coordinators and hold down Alt. 127 00:04:55,715 --> 00:04:57,625 And you can see that we can expand 128 00:04:57,620 --> 00:04:59,830 it and all of the ways. 129 00:04:59,825 --> 00:05:03,355 But there is an even better solution to this. 130 00:05:03,350 --> 00:05:05,350 And that is if we click here, 131 00:05:05,345 --> 00:05:07,345 you can see that we have a couple 132 00:05:07,340 --> 00:05:09,650 of options and these are called the anchor. 133 00:05:09,650 --> 00:05:11,930 So for example, if I click on this anchor, 134 00:05:11,930 --> 00:05:15,050 the image will scale down big and small with 135 00:05:15,045 --> 00:05:18,455 scale up and down based on this point right here, 136 00:05:18,455 --> 00:05:21,155 we can also click this one where it will scale 137 00:05:21,155 --> 00:05:23,875 based on the entire canvas. 138 00:05:23,870 --> 00:05:25,130 You'll see what I mean by 139 00:05:25,130 --> 00:05:27,040 scaling when we do need to scale. 140 00:05:27,035 --> 00:05:29,615 But what happens if we hold down Alt? 141 00:05:29,615 --> 00:05:32,405 You can see that we can expand the image this way. 142 00:05:32,405 --> 00:05:34,045 We can expand it in the middle, 143 00:05:34,040 --> 00:05:35,900 we can expand it to the left, 144 00:05:35,900 --> 00:05:38,030 and we can expand it all around 145 00:05:38,030 --> 00:05:40,250 so it fills the entire square. 146 00:05:40,250 --> 00:05:42,050 The entire Canvas immediately. 147 00:05:42,050 --> 00:05:44,240 And you can see that now the image has 148 00:05:44,240 --> 00:05:46,690 blocked the game entirely. 149 00:05:46,685 --> 00:05:49,985 And if I go to the canvas and the fading image, 150 00:05:49,985 --> 00:05:52,945 I can change the color right here on the image, 151 00:05:52,940 --> 00:05:55,310 and let's make it completely black. 152 00:05:55,310 --> 00:05:59,410 Now, how are we going to be changing the transparency? 153 00:05:59,405 --> 00:06:02,395 First of all, we can do this 154 00:06:02,390 --> 00:06:05,740 right here so we can change the alpha on the image. 155 00:06:05,735 --> 00:06:08,515 But it's kind of hard accessing the alpha 156 00:06:08,510 --> 00:06:11,390 on the image because we need to access all of the red, 157 00:06:11,390 --> 00:06:13,010 green, and blue colors. 158 00:06:13,010 --> 00:06:15,380 In other way of doing it is by adding 159 00:06:15,380 --> 00:06:17,650 something called a campus group. 160 00:06:17,645 --> 00:06:22,985 So if I go in here and add a canvas group, 161 00:06:23,080 --> 00:06:27,460 you can see that I have the option to have Alpha. 162 00:06:27,455 --> 00:06:29,305 And if I move this alpha down 163 00:06:29,300 --> 00:06:31,280 from 0 to one or from one to 0, 164 00:06:31,280 --> 00:06:34,600 you can see at 0 it's completely transparent. 165 00:06:34,595 --> 00:06:36,635 At one, it's not. 166 00:06:36,635 --> 00:06:38,875 And I can block re-cast. 167 00:06:38,870 --> 00:06:40,280 That means that re-cast 168 00:06:40,280 --> 00:06:42,620 means whenever I want to click on something, 169 00:06:42,620 --> 00:06:44,660 this can help block the re-cast and 170 00:06:44,660 --> 00:06:47,480 the interactable is this image interactable? 171 00:06:47,480 --> 00:06:49,760 Let's say it's not. And there you go. 172 00:06:49,760 --> 00:06:54,170 So now our goal is to create an animation. 173 00:06:54,170 --> 00:06:56,870 Using that animation, we are going to control 174 00:06:56,870 --> 00:06:59,750 the canvas group alpha right here. 175 00:06:59,750 --> 00:07:02,000 And then we are going to fade in and 176 00:07:02,000 --> 00:07:04,730 fade out every single time and our gain. 177 00:07:04,730 --> 00:07:07,070 So with that explained, 178 00:07:07,070 --> 00:07:09,250 I'm going to issue you a challenge. 179 00:07:09,245 --> 00:07:12,635 And your challenge is to fade the image in and out. 180 00:07:12,635 --> 00:07:13,925 So I'm going to give you 181 00:07:13,925 --> 00:07:16,645 a step-by-step process of how to do this. 182 00:07:16,640 --> 00:07:18,380 First of all, you'll need to create 183 00:07:18,380 --> 00:07:19,940 an animation for the fading 184 00:07:19,940 --> 00:07:21,800 in and fading and will be black 185 00:07:21,800 --> 00:07:23,810 to transparent and fading out, 186 00:07:23,810 --> 00:07:26,320 which will be the transparent to black. 187 00:07:26,315 --> 00:07:29,495 You need to create a transition between 188 00:07:29,495 --> 00:07:31,615 the transition between the two animation 189 00:07:31,610 --> 00:07:32,930 based on a trigger. 190 00:07:32,930 --> 00:07:34,940 So remember, we created 191 00:07:34,940 --> 00:07:36,530 the transition based on a Boolean. 192 00:07:36,530 --> 00:07:38,600 Now it's time to use a trigger. 193 00:07:38,600 --> 00:07:41,020 You will need to add a trigger parameter. 194 00:07:41,015 --> 00:07:43,085 Obviously, you need to create 195 00:07:43,085 --> 00:07:47,405 a UI Manager script and added to the canvas. 196 00:07:47,405 --> 00:07:49,555 You will need to create a method 197 00:07:49,550 --> 00:07:51,350 that triggers the fading. 198 00:07:51,350 --> 00:07:53,720 And finally, you need to call that method from 199 00:07:53,720 --> 00:07:56,560 the loading Colton in level manager. 200 00:07:56,555 --> 00:07:59,455 So we almost know all of the steps. 201 00:07:59,450 --> 00:08:02,230 Maybe you don't know how to set a trigger. 202 00:08:02,225 --> 00:08:05,195 So that's what you'll need to look for yourself. 203 00:08:05,194 --> 00:08:08,064 And everything else, I believe is something that 204 00:08:08,060 --> 00:08:10,880 we've been through we've seen with tested out. 205 00:08:10,880 --> 00:08:13,490 Remember the way the animation will work is by pressing 206 00:08:13,490 --> 00:08:15,500 the red little button in 207 00:08:15,500 --> 00:08:19,250 the recording on the animation so that information, 208 00:08:19,250 --> 00:08:24,330 pause the video right now and go do the Chavan. 209 00:08:24,550 --> 00:08:26,780 Okay, welcome back. 210 00:08:26,780 --> 00:08:28,910 So first thing we're going to do 211 00:08:28,910 --> 00:08:31,660 is we are going to go into the animation. 212 00:08:31,655 --> 00:08:34,765 I'm going to go ahead and make sure that 213 00:08:34,760 --> 00:08:38,020 I have the fading image and create an animation. 214 00:08:38,015 --> 00:08:40,285 And now I can go into the animations, 215 00:08:40,280 --> 00:08:45,980 right-click in here and create the fading image. 216 00:08:45,980 --> 00:08:48,500 So I'm inside assets animations and 217 00:08:48,500 --> 00:08:50,860 in here I'm going to create first of all, 218 00:08:50,855 --> 00:08:57,085 the fading, fading and save that. 219 00:08:57,080 --> 00:08:59,170 Now what did we say the fading gun should 220 00:08:59,165 --> 00:09:01,505 be the fading in black to transparent. 221 00:09:01,505 --> 00:09:04,885 Okay, great. So how long do I want this to take? 222 00:09:04,880 --> 00:09:09,140 So let's make it around 1.5 seconds. 223 00:09:09,140 --> 00:09:11,860 So I'm going to click the record button. 224 00:09:11,855 --> 00:09:14,755 And what did I say again, black too transparent. 225 00:09:14,750 --> 00:09:18,530 Oops, that's not the key that I was looking for. 226 00:09:18,530 --> 00:09:22,660 And where is it? Okay, back in here. 227 00:09:22,655 --> 00:09:27,845 So we start off at black and at the end we are recording. 228 00:09:27,845 --> 00:09:30,155 I want to take the alpha down to 0. 229 00:09:30,155 --> 00:09:32,455 So what happens now when I play the animation? 230 00:09:32,450 --> 00:09:35,890 It starts off as black and then fades too transparent. 231 00:09:35,885 --> 00:09:36,775 Excellent. 232 00:09:36,770 --> 00:09:40,640 The next thing I'm going to do is create the fade out. 233 00:09:40,640 --> 00:09:44,720 So fading out. 234 00:09:44,720 --> 00:09:50,300 And now we start off at 0 235 00:09:50,300 --> 00:09:55,690 and then we go into complete darkness after 1 second. 236 00:09:55,685 --> 00:09:57,655 So we stopped recording, 237 00:09:57,650 --> 00:10:00,290 run the game so transparent, fade to black. 238 00:10:00,290 --> 00:10:01,220 Excellent. 239 00:10:01,220 --> 00:10:06,520 Now the next thing we are going to open up the Animator. 240 00:10:06,515 --> 00:10:10,105 And in here we are going to first of all, okay, 241 00:10:10,100 --> 00:10:11,960 so the fading in and fading in 242 00:10:11,960 --> 00:10:14,480 means that we are going from black to transparent. 243 00:10:14,479 --> 00:10:17,269 This should start as soon as we start again. 244 00:10:17,270 --> 00:10:19,460 So we don't just appear in the game mode, 245 00:10:19,460 --> 00:10:21,490 we fade into the game mode, 246 00:10:21,485 --> 00:10:23,365 and then we have the fade to black will 247 00:10:23,360 --> 00:10:26,270 create a transition right here. 248 00:10:26,270 --> 00:10:28,370 This transition should have 249 00:10:28,370 --> 00:10:32,450 no exit time and the settings should be an, 250 00:10:32,450 --> 00:10:35,380 I mean the transition duration should be at 0. 251 00:10:35,375 --> 00:10:38,935 I'm going to create a parameter which will be a trigger, 252 00:10:38,930 --> 00:10:43,240 and I'll just call it the Start, fade. 253 00:10:43,235 --> 00:10:44,945 Make this capital. 254 00:10:44,945 --> 00:10:49,075 There you go. And add it as a condition right here. 255 00:10:49,070 --> 00:10:50,180 Excellent. 256 00:10:50,180 --> 00:10:52,580 And I hope you did all these steps. 257 00:10:52,580 --> 00:10:54,170 These are things that we've already 258 00:10:54,170 --> 00:10:56,120 covered and already created. 259 00:10:56,120 --> 00:10:57,500 And before we move on, 260 00:10:57,500 --> 00:11:00,590 we need to make sure that this canvas is also 261 00:11:00,590 --> 00:11:04,250 present in the second level Y or the level 1. 262 00:11:04,250 --> 00:11:07,450 Why? Because if we go to level 1, 263 00:11:07,445 --> 00:11:08,675 where are the scenes? 264 00:11:08,675 --> 00:11:10,435 If we go to level 1, you'll see 265 00:11:10,430 --> 00:11:12,370 that we don't have a canvas, 266 00:11:12,365 --> 00:11:14,515 so we won't be able to fade 267 00:11:14,510 --> 00:11:17,590 end when we start Level 1 or when we go to level 1. 268 00:11:17,585 --> 00:11:19,465 So back in level 2, 269 00:11:19,460 --> 00:11:24,470 I'm going to call this the UI canvas Enter. 270 00:11:24,470 --> 00:11:28,160 And I'm going to go into the Prefabs. 271 00:11:28,160 --> 00:11:29,900 Where are the prefabs? 272 00:11:29,900 --> 00:11:36,690 And I'm going to create and here a UI folder. 273 00:11:36,685 --> 00:11:40,045 And in here I'm going to drag the UI campus. 274 00:11:40,045 --> 00:11:41,245 Save that. 275 00:11:41,245 --> 00:11:44,025 And now look how amazing prefabs are. 276 00:11:44,020 --> 00:11:45,970 Eigen don't believe we've talked about this. 277 00:11:45,970 --> 00:11:48,760 But if we go into the scenes in level one, 278 00:11:48,760 --> 00:11:50,170 we can immediately go to 279 00:11:50,170 --> 00:11:53,890 Prefabs UI and add a canvas and our games. 280 00:11:53,890 --> 00:11:57,190 So now we have a canvas right here 281 00:11:57,190 --> 00:11:58,900 in level 1 and we didn't 282 00:11:58,900 --> 00:12:00,880 have to create it all over again. 283 00:12:00,880 --> 00:12:03,330 This is the beauty of having Prefabs. 284 00:12:03,325 --> 00:12:06,135 With that done back in level 2. 285 00:12:06,130 --> 00:12:08,070 Let's see what we have in here. 286 00:12:08,065 --> 00:12:09,585 So the animations play, 287 00:12:09,580 --> 00:12:12,360 everything should be working now when we run our game, 288 00:12:12,355 --> 00:12:15,045 we should have a fading and animation. 289 00:12:15,045 --> 00:12:17,585 So I run the game. 290 00:12:17,860 --> 00:12:19,580 There you go. 291 00:12:19,580 --> 00:12:23,420 So you can see that I have a looping fading in animation. 292 00:12:23,420 --> 00:12:25,880 So I'm going to go into the animations, 293 00:12:25,880 --> 00:12:28,730 find the fading in and fading out, 294 00:12:28,730 --> 00:12:33,080 and make sure that there is no loop time. Save that. 295 00:12:33,080 --> 00:12:37,640 And now when we run the game and the second now we 296 00:12:37,640 --> 00:12:42,910 have we have a fading in an inch. 297 00:12:42,905 --> 00:12:43,705 Excellent. 298 00:12:43,700 --> 00:12:46,130 So do you know why this is happening? 299 00:12:46,130 --> 00:12:47,900 Well, because upon entry, 300 00:12:47,900 --> 00:12:49,960 first thing we do is the fading in. 301 00:12:49,955 --> 00:12:52,295 So this is already set up for us. 302 00:12:52,295 --> 00:12:55,375 Now, the next thing that we need to do is we need to 303 00:12:55,370 --> 00:12:58,820 create the UI Manager and added to the campus. 304 00:12:58,820 --> 00:13:01,910 So I'm going to go into my scripts in here, 305 00:13:01,910 --> 00:13:05,500 right-click and create a new folder for the UI. 306 00:13:05,495 --> 00:13:07,715 We much change the name of this folder, 307 00:13:07,715 --> 00:13:11,245 but for now, let's go ahead and create a C-sharp script, 308 00:13:11,240 --> 00:13:14,470 which is going to be the UI Manager 309 00:13:14,465 --> 00:13:17,945 or should have been in the manager's actually. 310 00:13:17,945 --> 00:13:19,405 And it has no worries. 311 00:13:19,400 --> 00:13:20,910 Wait for this to compile. 312 00:13:20,914 --> 00:13:23,314 Let's move it to the managers. 313 00:13:23,315 --> 00:13:26,465 I believe it's butter here or maybe not. 314 00:13:26,465 --> 00:13:28,585 I don't know. It depends on your preference. 315 00:13:28,580 --> 00:13:32,560 I think in the manager it's maybe better. 316 00:13:32,555 --> 00:13:35,155 Cancel or no, let's keep it. 317 00:13:35,150 --> 00:13:36,310 Let's keep it into your eye. 318 00:13:36,305 --> 00:13:40,135 Even though it is a manager will keep it in the UI. 319 00:13:40,130 --> 00:13:43,090 I'm going to open up the UI Manager, 320 00:13:43,085 --> 00:13:44,665 open up Visual Studio. 321 00:13:44,660 --> 00:13:46,250 And the first thing that we'll 322 00:13:46,250 --> 00:13:48,110 need is a reference to the image 323 00:13:48,110 --> 00:13:51,560 that we want to fade back in here. 324 00:13:51,560 --> 00:13:53,660 I hope this wasn't too hard because 325 00:13:53,660 --> 00:13:55,930 it's going to be a serialized field, 326 00:13:55,925 --> 00:13:58,625 which is an image of type image. 327 00:13:58,625 --> 00:14:01,255 Oh, so there was something that I 328 00:14:01,250 --> 00:14:04,120 hope some of you were able to figure out. 329 00:14:04,115 --> 00:14:06,725 If I tried to use image right here. 330 00:14:06,725 --> 00:14:09,875 You'll notice that I don't have an option for it. 331 00:14:09,875 --> 00:14:11,905 What I do need is I need to 332 00:14:11,900 --> 00:14:15,040 use your Unity engine dot u i. 333 00:14:15,035 --> 00:14:18,635 So I hope this wasn't a huge problem for you. 334 00:14:18,635 --> 00:14:21,175 I hope you found this error or 335 00:14:21,170 --> 00:14:23,630 found this inconvenience in the challenge and 336 00:14:23,630 --> 00:14:26,110 went out of your way and try to figure 337 00:14:26,110 --> 00:14:29,020 the solution if you didn't, don't worry about it. 338 00:14:29,015 --> 00:14:30,935 It was on my behalf. 339 00:14:30,935 --> 00:14:33,685 I should have warned you beforehand. 340 00:14:33,680 --> 00:14:34,900 No worries. 341 00:14:34,895 --> 00:14:38,545 Image to fate. 342 00:14:38,540 --> 00:14:40,370 Some of you might be thinking, Yeah, no worries, 343 00:14:40,370 --> 00:14:43,030 sure, just my confidence was destroyed. 344 00:14:43,025 --> 00:14:46,075 Anyways, what are we going to do in 345 00:14:46,070 --> 00:14:49,660 this class here and the UI Manager? 346 00:14:49,655 --> 00:14:50,725 Well, as we said, 347 00:14:50,720 --> 00:14:52,400 we need a method. 348 00:14:52,395 --> 00:14:55,545 Create a method that triggers the fading and call 349 00:14:55,540 --> 00:14:59,010 that method from the loading coworking in level manager. 350 00:14:59,005 --> 00:15:02,365 Okay, so I'm going to make sure that this is a public. 351 00:15:02,365 --> 00:15:09,295 So I'm going to create a public void fade image. 352 00:15:09,810 --> 00:15:12,850 And in here I'm going to go 353 00:15:12,850 --> 00:15:15,460 ahead and access the image to fade. 354 00:15:15,460 --> 00:15:18,100 I'm going to get a component on it, 355 00:15:18,100 --> 00:15:20,930 which is the animator. 356 00:15:22,140 --> 00:15:26,390 And I'm going to set the trigger. 357 00:15:26,490 --> 00:15:29,320 And that trigger is going to be 358 00:15:29,320 --> 00:15:34,970 the a string reference to the Start fade. 359 00:15:34,965 --> 00:15:39,865 And today, now, copy this back in here, 360 00:15:39,860 --> 00:15:42,730 paste it in here, close off, save that. 361 00:15:42,725 --> 00:15:44,345 So what are we doing? 362 00:15:44,345 --> 00:15:46,485 Because we created the animation 363 00:15:46,489 --> 00:15:48,169 on the actual image to fade. 364 00:15:48,170 --> 00:15:50,150 You can see that the animator is here 365 00:15:50,150 --> 00:15:52,780 on this game object. 366 00:15:52,775 --> 00:15:55,615 One of the components on the image to fade. 367 00:15:55,610 --> 00:15:58,190 So what we do is we access the animator on 368 00:15:58,190 --> 00:16:01,760 the image and then we set the trigger which is started. 369 00:16:01,760 --> 00:16:02,680 Okay, great. 370 00:16:02,675 --> 00:16:04,645 Now the next step is to go 371 00:16:04,640 --> 00:16:06,910 ahead and call it an Level Manager. 372 00:16:06,905 --> 00:16:09,505 And there are two ways of doing this. 373 00:16:09,500 --> 00:16:11,090 We can either go ahead and find 374 00:16:11,090 --> 00:16:13,790 the game object or find the UI Manager. 375 00:16:13,790 --> 00:16:16,750 Or let's go ahead and create an instance of this. 376 00:16:16,745 --> 00:16:23,905 I'm going to create a public static UI Manager. 377 00:16:23,900 --> 00:16:28,570 In instance. Save that. 378 00:16:28,565 --> 00:16:31,655 And I'll create a start here. 379 00:16:31,655 --> 00:16:37,685 And then start the instance will be equal to this. 380 00:16:37,685 --> 00:16:39,125 Save that. 381 00:16:39,125 --> 00:16:42,095 Now back in the level manager, 382 00:16:42,095 --> 00:16:43,765 where should we put this? 383 00:16:43,760 --> 00:16:46,480 Well, I believe as soon as we 384 00:16:46,475 --> 00:16:50,455 hit or as soon as we enter the loading level. 385 00:16:50,450 --> 00:16:53,590 So we have the time-scale at 0.2. 386 00:16:53,585 --> 00:16:56,245 I'm going to go ahead and access 387 00:16:56,240 --> 00:17:01,410 the UI Manager, the instance. 388 00:17:01,405 --> 00:17:04,935 And I'm going to go ahead and fade the image. 389 00:17:04,930 --> 00:17:07,000 Now, you'll notice something that 390 00:17:07,000 --> 00:17:10,470 because we've said the timescale to 0.2, 391 00:17:10,465 --> 00:17:12,225 the fading of the image will be 392 00:17:12,220 --> 00:17:14,950 slower than what we have in here. 393 00:17:14,950 --> 00:17:17,730 So let's test this out and see if it works. 394 00:17:17,725 --> 00:17:20,325 If you feel that it's a bit slow, 395 00:17:20,320 --> 00:17:21,640 you can go ahead and make 396 00:17:21,640 --> 00:17:23,890 the fading of the image a bit slower. 397 00:17:23,890 --> 00:17:25,500 So there we go. 398 00:17:25,495 --> 00:17:28,285 We start off, we run up. 399 00:17:28,285 --> 00:17:32,815 And when we enter this portal right here, there we go. 400 00:17:32,815 --> 00:17:36,735 We are slowing down and we forgot to add a hey, 401 00:17:36,730 --> 00:17:39,190 we forgot to add the reference. 402 00:17:39,190 --> 00:17:40,750 You can see right here the error. 403 00:17:40,750 --> 00:17:42,200 If I double-click on it, 404 00:17:42,195 --> 00:17:45,985 you'll see that the UI Manager dot fade image, 405 00:17:45,980 --> 00:17:48,700 there's something wrong. What is wrong? 406 00:17:48,695 --> 00:17:51,985 Well, there is no instance. 407 00:17:51,980 --> 00:17:54,360 Okay, so if I go to the UI canvas, 408 00:17:54,364 --> 00:17:57,934 I would notice that I didn't even add the manager, 409 00:17:57,935 --> 00:18:00,145 So I'm not sure what is being called. 410 00:18:00,140 --> 00:18:03,160 So let's drag in the UI Manager. 411 00:18:03,155 --> 00:18:05,485 Let's make sure that we said 412 00:18:05,480 --> 00:18:09,110 the fading image and let's apply the changes. 413 00:18:09,110 --> 00:18:12,100 So notice now the canvas on 414 00:18:12,095 --> 00:18:15,865 this level didn't have a UI Manager, right? 415 00:18:15,860 --> 00:18:19,780 And this is the one that we used in the level one. 416 00:18:19,775 --> 00:18:22,235 If I go right now to the level one, 417 00:18:22,235 --> 00:18:24,215 I click on the UI canvas. 418 00:18:24,214 --> 00:18:28,234 It has a UI Manager and it has the image already set up. 419 00:18:28,235 --> 00:18:32,725 So you can see again the power of using grief apps. 420 00:18:32,720 --> 00:18:34,270 How cool is that? 421 00:18:34,265 --> 00:18:37,385 So back in level to run the game, 422 00:18:37,385 --> 00:18:40,705 we fade in. No more errors. 423 00:18:40,700 --> 00:18:43,750 We walk up, we go through the portal, 424 00:18:43,745 --> 00:18:45,445 and there we go, we slow down. 425 00:18:45,440 --> 00:18:48,020 We have this sugar right here. 426 00:18:48,020 --> 00:18:51,110 So there was a slight problem in here. 427 00:18:51,110 --> 00:18:53,020 As you notice that we didn't 428 00:18:53,015 --> 00:18:55,385 get the time to even fade in. 429 00:18:55,385 --> 00:18:57,835 So I'm going to access the fade out 430 00:18:57,830 --> 00:19:00,910 again and the fading image. 431 00:19:00,905 --> 00:19:02,845 And where is this? 432 00:19:02,840 --> 00:19:05,090 Well, this will depend how long or 433 00:19:05,090 --> 00:19:07,610 what is the timescale you have right here. 434 00:19:07,610 --> 00:19:11,270 So I'm going to make it 0.5. Save that. 435 00:19:11,270 --> 00:19:14,090 And instead of 1.5 seconds, 436 00:19:14,090 --> 00:19:16,210 I'm going to make it around, 437 00:19:16,205 --> 00:19:18,955 Let's just make it around 0, 438 00:19:18,950 --> 00:19:22,520 maybe 1 second or 2.5th. 439 00:19:22,520 --> 00:19:26,300 Let's say it's about 40 from the game. 440 00:19:26,300 --> 00:19:28,940 Test it out, see if we have the time to fade in. 441 00:19:28,940 --> 00:19:32,570 So I go up, I move through. 442 00:19:32,570 --> 00:19:34,070 There we go, we fade out 443 00:19:34,070 --> 00:19:36,340 completely and then we stopped off fading. 444 00:19:36,335 --> 00:19:37,985 And very normally. 445 00:19:37,985 --> 00:19:39,355 So with that done, 446 00:19:39,350 --> 00:19:40,500 I hope you enjoy. 447 00:19:40,500 --> 00:19:42,950 Let's make sure to commit our changes. 448 00:19:42,950 --> 00:19:46,740 Stage all commit the changes. 449 00:19:47,230 --> 00:19:51,070 Created a fading in and out 450 00:19:51,065 --> 00:19:56,845 image using you are countless. 451 00:19:56,840 --> 00:19:58,000 Commit the changes. 452 00:19:57,995 --> 00:20:02,735 I hope you enjoy it and I'll see you in the next video.