Hello guys.
Welcome to the video.
In this one I want to show you how to make fade in fade out effect.
And I came up with a really nice way to do that.
So I'm very proud to share this one and I hope you like it.
This might be a little bit confusing, because we're going to use a couple of things that you probably
didn't see before, but I'll try to explain it as much as I can.
And also maybe I will attach some sort of PDF written guide so you can read it and maybe understand
it better.
Okay, let's go to the scene of a main menu.
Over here.
Uh, first, let's make an image.
Of a UI image, and we're going to click here and stretch it on the entire screen like that.
Now you can see this image covers everything and we need it to be like that.
But if you place object above other UI elements then it will be behind the elements.
So in order for it to work correctly, it's always supposed to be below everything.
Nice.
Now we're going to make it black and our goal is to take alpha of this image.
And make it transparent with a time like that.
Then when we want to transition to the game, our goal is to make it black again and then start the
game.
So that's what we're going to do in this video.
Let's name it as a fade image.
And let's go and make a new script for this one I'm going to make UI.
UI fade effect.
Let me find this script over here.
First of all, we want to have reference to the image.
So I'm going to do serialize field private image.
Uh, fade image.
And then we're going to make a coroutine.
Let's make a private eye enumerator.
Let's call it fade or routine.
And for this coroutine we need to pass the target alpha we want to have.
So if you want to make it transparent it will be zero.
If you want to make it black again, it will be one right.
So we need target alpha.
We also want to know how long it will take to make screen dark or transparent.
So we're going to have float duration and that's good for now.
We're going to add something else.
But later on now how it's going to work.
First of all we want to make a variable of a float time and make it equal to zero.
Every time we start this coroutine, we're going to make a new variable with a time zero.
And we're going to use this time to keep track of, uh, you know, duration of the while loop we're
going to make.
Then we're going to need a current color.
So let's do color current color.
So you'll be able to use it to not only with the black color, but with any color you want to have maybe
white or yellow or anything like that.
And let's make it equals to fade image dot color.
And we want to have float starting alpha.
So I'm going to call it start alpha.
And it's going to be equals to current color dot alpha.
Because alpha is the parameter we are about to change on the image over here.
Right.
This is the alpha.
Okay.
Let's go back.
And next step would be to make a while loop.
If you see while loop for the first time, basically it does something until conditions are not met
anymore and it will stay inside the loop until it exits the conditions.
Maybe let's.
Yeah, let's try first.
Real quick I'm going to do a start method.
I'm going to comment this out because I want to show you an example.
And over here I'm going to do let me do private int number.
And I'm going to do while.
Number.
Is less than 100.
You do debug log number.
And before that you do number plus plus.
So while number is below 100 it's going to stay in the loop.
It's going to do the thing.
And then only it will do something else.
All right.
For example debug log start was called.
Let's go ahead and start the game and see what we will have in a console.
I'm going to put this fade effect script here, because this is the one that has all the information
and loops.
Let's go to play mode.
And in the console you can see it stayed in the loop until it added all of the numbers, right?
And only after that it gave us a message.
Start was called in a very similar way.
We're going to change color from fully black to transparent, and only after that we're going to confirm
the result.
That image is transparent, something like that.
Let's go back.
Now I'm going to erase start method and number and I'm going to uncomment this.
So here we're going to do this while time is less than duration.
And thanks to that we're going to keep this while loop in the borders of a duration we want to have.
If this will be 1.5 seconds, for example, this will work until time is less than 1.5 seconds.
And on each step of the loop, just like we increase the number we're going to do, time plus equals
time dot delta time.
So this helps us to keep track of the time.
Then we want to get a float value of the alpha we want to give to the color.
So we're going to do float alpha equals to.
And here we're going to use math f dot lerp.
We did use it before.
So you supposed to remember how it works.
And we're going to get lerp value from the starting alpha to the target alpha.
And the size of a step will be time divided by duration.
This is how it's going to work.
Um, for example, duration is 1.5 seconds.
By the time we using the math f lerp here at, let's say at the time, that being 0.3, we're going
to divide it by duration of 1.5 seconds.
So it's only 20% of the alpha we want to have later on.
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.
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.
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.
So that's the idea of it.
That's why we use time divided by duration.
The more time has passed, the bigger this value will be and the more alpha we will give or lose.
Depends on the target alpha we have, then we're going to take fade image dot color and give it new
color.
We're not going to change RGB.
So we're going to do current color, our current color g, current color b.
And we're going to give it a new alpha that we got with the lerp and how lerp works I just explained
it.
And you already know how this alpha will be taken right.
We just talked about this.
And now to make it stretch to during some time.
So it will not be done immediately within one frame.
We want to type here yield return null.
So this line of code.
Is what makes this loop work during some time.
Because yield return null says that you need to wait not for seconds, not for amount of frames, but
only until the next frame.
So it will stay inside of the loop and it will do something.
For example, it will get the alpha assigned the alpha to the color.
Then it will wait for the next frame.
On the next frame, the time will be bigger because this one was called on the next frame and we did
plus equals time dot delta time.
Because of that, alpha will be bigger.
Because of that color will get new alpha with a bigger value.
And then we're going to ask it to wait for the next frame and then it will go again like that.
Okay.
So that's the idea of it.
And with the help of this, it will stretch it during the amount of time we want to have, like during
the duration we set in the method.
And once time is bigger or equals to the duration, we're going to just do fade image dot color equals
to new color of a current color dot g, current color b, and I forgot are.
For in color and for the alpha, we're going to give it a target alpha just like that.
So that's what we need.
Now let's make a public method that we can use to call this coroutine.
To start it I'm going to do public void fade effect.
Uh, UI fade, maybe.
Screen.
Fade.
Yeah.
Screen fade, I think.
And here we need float.
Target.
Alpha.
Load duration.
And then we're going to just do startcoroutine of a fade coroutine, and we're going to give it target
alpha and duration.
That's good for now.
Now let's go to UI main menu.
Um, I'm going to make a private UI fade effect script.
Paid effect.
And I'm going to open a wake method.
And in the wake I'm going to do fade effect equals to get component in children of a UI fade effect.
So it will find it automatically.
And then in the start I want to do this fade effect.
What was that screen fade.
We're going to give target alpha of zero because we want it to become transparent.
And let's say we do it during 1.5 seconds.
Now I'm going to save it.
Go back to unity.
We can see everything is black.
We cannot see anything.
And we're going to go to play mode.
Oh, wait, I forgot something.
Here.
We need to assign image.
Let's give it an image over here.
Let's go to play mode.
And now you see we have nice fade out effect.
I'm always confused.
What is the fade in?
What is a fade out?
It was fade out now right?
Because.
Wait, let me check this.
Uh, commonly fade in begins with a black background and slow transition into a new clip.
Still confusing.
Begins with a black background.
So this is a fade in effect.
And when it becomes black again, it's a fade out, I guess.
All right, so we have nice fade in effect.
But what I don't like about this is that even if we use fade out effect when we start new game, we
will not see it.
Let me show it to you.
We're going to go back here when we do new game I'm going to do fade effect screen fade, make it dark.
So we pass in value of one and duration 1.5 F.
For example you're going to go back to the game.
Now we're going to have one back where we cannot click the button.
We're going to easily fix it.
So there is a fade in.
I'm clicking there.
New game.
It doesn't work.
That happens because I'm not clicking on the button.
I'm clicking on the image to make it work correct.
We need to uncheck raycast target over here.
Let's do it.
And now I can click on the new game and new game will begin.
And we did not see any fade in effect or fade out because we did start the coroutine and we changed
scene immediately.
Let's go to fade image and uncheck raycast target over here okay.
Now let's go to the script.
And over here we can add something.
We can add an implementation of a method.
Once we are done.
Once we are ready.
Yeah, that is also possible.
Let's put comma over here and let's type system action on complete.
Now we can pass a method inside of this coroutine as a parameter.
We only need to add it here.
System action on complete.
And I want to make it null by default so you don't have to pass something always.
Sometimes you can just ignore the parameter.
It's going to pass null and you won't have any method there.
Let's pass on complete okay.
Now we're gonna, uh, go down here and once we make color of the image with a target alpha, we're
going to check Oncomplete question mark.
And this will basically do oncomplete is not equals to null.
Then do invoke of the Oncomplete method that we pass through the parentheses.
And we're going to just save it.
Now we can go back to main menu over here.
And we can maybe maybe let's make a method public.
Uh actually can be private private void.
Load level scene.
We're going to improve it later on because we're going to have different levels.
But as of now, let's keep it simple.
This will do.
Scene manager load scene with a scene name okay.
And now over here when we click New game we can put comma and pass method of a load level scene.
And we do need parentheses this time just like that.
And now this will do fade out effect.
And then it will run the method that we pass into parentheses.
And because this will be called inside of the coroutine only after we reach the target color it will
have a delay.
Basically let's go back.
Going to go to play mode.
And.
Fade in.
New game.
Fade out.
Boom.
New game.
Very cool.
Working perfectly.
I love it now.
Something to do here.
I actually don't like to have black screen when I'm developing the menu, so I'm going to make it transparent
for now by default.
Okay.
Just like that.
So I can see things here and I can basically edit.
But later on once we build the game in the end of the course, we need to make it dark.
Don't forget it, okay?
Or otherwise it will not work.
Now let's add this fade effect in the game.
Um, we can just.
How can we do this?
I don't want to make a prefab.
Really?
We can go to asset scene.
Actually, we need a prefab, right?
Why don't I want to make a prefab?
Let's go and do prefab.
Let's try fade image here.
And I'm going to go to scene main menu.
Save it okay.
Oh, sorry.
Simple scene.
We need to make a canvas.
Let's do UI.
Canvas.
Now we have in game UI.
Don't forget to do scale with a screen size.
By the way, I forgot to do this in the end.
Scene 920 by 1080.
And I'm going to open prefabs and I'm going to drag this fade image to the canvas like so.
And for the sake of testing, let's make it dark.
And let's go.
We need we need in game UI some sort of in game UI here.
Let's go make.
Script UI in game.
Let me open this.
Let's make it as an instance.
I want to do public static UI in game instance.
Awake instance equals to this.
Now it is available from anywhere.
Let's do public fade UI fade effect, fade effect.
Then in the wake I'm going to do fade effect equals to get component in children of a fade effect,
same as we did in the main menu.
Nice.
Now we have access to this through any script we want.
And I'm going to go to Game Manager.
Over here when we load the end scene.
How can we do this again?
We need we need some sort of scene like level manager.
I guess that will load any scene we want.
But as of now, let's make just extra method.
Okay.
Private void load the end.
Wait, we already have this name.
Let's do level finished.
This is what we're going to do.
Level finished and this will do UI in game dot instance.
Fade effect.
Screen fade is going to make it dark during 1.5 seconds, and then it's going to run the load and scene
method.
Okay.
Very good.
Now let me make this public and this private.
And we can go to the finish point.
And instead of running this method we're going to run finish like level finished.
Okay.
Let's save everything together.
And this is supposed to work fine.
We only want to do fade in when we start the level.
So let's go maybe to UI in game and just in the start method I'm going to do fade effect.
Uh, screen fade to zero with a duration of one second.
Maybe because we know player can be impatient and we could, by the way respawn the player here, but
let's not do it now.
Let's just check the fade in effect.
Now let's go to Asset scene.
Main menu.
We're going to save the changes.
We start the play mode.
We have the game.
I'm going to click new game.
We have fade in, fade out.
Come on, fade out.
What's up man?
Do Phidelt, please.
I know we are in the game.
For some reason, fade out did not happen.
Uh, y.
Oh, I know why.
I'm so sorry.
Let's go to sample scene and on the canvas, we need to add UI in game.
All right.
This will be assigned automatically.
Don't worry about it.
For now.
Let's go ahead and test this again.
Main menu.
Save.
Go to play mode.
All right, new game dark then transparent and player is there.
I can run, go to the finish point.
We are on the credits.
Perfect.
I love it so much.
Let's go to end scene.
Let's go to prefabs.
Let's take the fade image.
Drag it to the canvas like so.
And on the UI credits, we can make a private fade effect.
We're going to get component in their wake.
And we can run it in their wake as well.
Let's do fade effect screen fade target alpha zero duration one second.
And that's it.
And when we go to main menu, probably we need to do same trick with the transferring to another scene.
So I'm going to name these two.
Go to main menu scene.
And I'm going to make Private Void.
Go to main menu, which will do me a favor of using fade effect.
Screen fade is going to make it dark.
It's going to have duration of one second and it's going to call go to main menu method.
Okay.
Sorry.
Go to main menu scene.
Yeah.
We need different names.
Um, yeah.
We gonna have a system that will load different scenes with one method a bit later on.
Just let's use it this way for now.
We're going to clean this up later.
Okay.
Now we can go here and call.
Go to main menu.
Let me rename this so we don't mess up.
Switch to.
Menu scene.
Yeah.
So it has different name and it's easy to recognize the difference.
And over here we're going to do go to main menu.
Cool.
Now let's save this.
Let me check all together again, and we're good to go to the next video.
We have failed image here.
It's fine.
We're going to go to asset scenes main menu.
We're going to save the changes here.
I want to make image black again.
So I just can see how it all works together.
Let's go to game play mode.
Fade effect.
Very pretty.
And nice new game.
Yes, yes.
Finish the level.
Yes.
This was quite fast and I don't see the text.
So something happened there.
Not set is an instance.
Oh, I did not get the component.
Oh my God, I'm so sorry.
Get component in children.
Okay, I have to check again because this is very important.
Let's not make any mistakes.
Game.
New game.
Dark.
Transparent.
Getting black again.
Again.
Something is not working here.
Or was it just too fast?
Let's try longer.
Let's try two seconds on the awake.
Okay, I'm going to go back.
Game window.
Nice new game.
Why it is so fast.
Man, I don't like it.
I don't understand it.
Oh, I know why I'm so sorry.
Because on the in the end over here, this has, um.
This has a transparent and this makes it.
Inconvenient for us.
Okay.
It's supposed to be good now.
Yeah, yeah, yeah.
It's working.
Okay.
Let's do the test again.
Just so I know it's working.
You see, testing is good.
Testing helps me to find the mistakes.
New game.
Everything is pretty and cinematic.
Yes.
Okay.
Very cool.
So that's good for now.
Thank you so much for paying attention.
I'm going to go to main menu.
And I'm going to take the fade image and make it transparent, because we still need to do lots of things
in the main menu.
And I'll see you in the next video.