Welcome back my fellow game developers
to a brand new video.
And this one, you'll notice that we
have the fading in and out.
And what is that for?
Well, if we look right here,
we have a huge black box.
And you can see that right now.
We don't see anything in the game.
Why is that?
What happened?
That we'd leave the game?
Why is it so small right now?
Why are we zoomed out?
So many question, so few answers.
If I run the game,
you'll notice that we start off the level
by fading out of the black image.
And if we walk around,
you can see that as soon as we enter the portal,
not only do we slow down,
but we fade out,
and then we fade back in when we go to the next level.
So let's not waste
any more time and let's get to failing.
Oh, okay.
So now we are
properly transitioning from one level to the next.
We have the timescale effect
where we slow everything down.
The next thing that we want to do is we want
to have some kind of fading effect.
So what we want is B1,
the image or the entire game to fade to black.
And then when we enter a new level,
we want to fade out.
So let's go ahead do that.
First thing that we need to do,
or how is the fading outgoing to work?
We will have a big black image in here that will fade
in and then fade out as we move from level to the next.
So it's all about a black image
and we use the alpha on it.
So let's do that.
How are we going to add an image in Unity?
Well, we need something called a canvas.
So I'm going to create a canvas.
I'm going to right-click in the hierarchy,
go to your eye and find the campus.
There you go. Now we have a campus.
If I double-click on it,
there you go, you can see it's one huge,
big canvas and you might be wondering,
why is the canvas so big while our game so small?
Well, this is the way that Unity
handles using Canvas and adding images.
It's better to play around with the images right here.
Instead of playing around in the images,
write it and having everything in front
of the player and the objects in the game.
So this is a much better way or
the way that unity uses to handle things.
You can also see that we have
something called the event system.
And this allows us to, for example,
let's say we have some kind of button on the canvas.
We want to click it so we
can add event system under the Canvas,
make it a child, and keep it there for now.
And this event system allows us to actually push
buttons on the screen and allow
us to interact with the canvas.
We'll see how that works in just a bit.
But for now, we want to go
into the canvas scaler right here.
You can see that we can scale with screen size.
And we want to change this from a 100 to
1920 by then eight,
which is the size of the screen which
we are using or creating the gaming.
Hit Enter.
There you go. Now everything is done.
You can see we have the ray caster and an element
for the canvas which isn't that important.
We won't be changing anything too much in here.
We only want to make sure that the canvas scaler as
scale screen size and we want to make it 1920 by 1080.
Okay, great.
Now with that done,
next step is to add an image.
So I'm going to right-click in here,
go to you are, and find an image.
So now you can see we have
an image in the middle of
the huge canvas and I'm going to,
is the fading image.
But even though we have it on the canvas,
you can see down here in the game that
we have it as a small block.
And if I move it to the upper side,
you'll notice that it's on the upper side of the game,
and in the middle, it's in
the middle where the player resides.
And on the bottom left you can see it.
So it's not even though the image
right here on top of the game is huge.
But you can see that on the canvas,
It's really small and it scales down.
So this is how we represent things in Unity on UI canvas.
Now, what are we going to do?
We want to make this image fill up the entire canvas,
make it completely black.
And then we are going to use
the transparency on it to fade in and fade out.
First of all, how do we make it as big as the screen?
Well, there is an option right here.
You can see that it's the rect tool.
When you click it, you can drag
and make this image bigger and smaller.
And you'll notice right here we
have a lot of things which is
the Rect Transform to
handle and change how the image looks.
We can also hold down Alt
and choose one of the corners, or army.
Choose one of the coordinators and hold down Alt.
And you can see that we can expand
it and all of the ways.
But there is an even better solution to this.
And that is if we click here,
you can see that we have a couple
of options and these are called the anchor.
So for example, if I click on this anchor,
the image will scale down big and small with
scale up and down based on this point right here,
we can also click this one where it will scale
based on the entire canvas.
You'll see what I mean by
scaling when we do need to scale.
But what happens if we hold down Alt?
You can see that we can expand the image this way.
We can expand it in the middle,
we can expand it to the left,
and we can expand it all around
so it fills the entire square.
The entire Canvas immediately.
And you can see that now the image has
blocked the game entirely.
And if I go to the canvas and the fading image,
I can change the color right here on the image,
and let's make it completely black.
Now, how are we going to be changing the transparency?
First of all, we can do this
right here so we can change the alpha on the image.
But it's kind of hard accessing the alpha
on the image because we need to access all of the red,
green, and blue colors.
In other way of doing it is by adding
something called a campus group.
So if I go in here and add a canvas group,
you can see that I have the option to have Alpha.
And if I move this alpha down
from 0 to one or from one to 0,
you can see at 0 it's completely transparent.
At one, it's not.
And I can block re-cast.
That means that re-cast
means whenever I want to click on something,
this can help block the re-cast and
the interactable is this image interactable?
Let's say it's not. And there you go.
So now our goal is to create an animation.
Using that animation, we are going to control
the canvas group alpha right here.
And then we are going to fade in and
fade out every single time and our gain.
So with that explained,
I'm going to issue you a challenge.
And your challenge is to fade the image in and out.
So I'm going to give you
a step-by-step process of how to do this.
First of all, you'll need to create
an animation for the fading
in and fading and will be black
to transparent and fading out,
which will be the transparent to black.
You need to create a transition between
the transition between the two animation
based on a trigger.
So remember, we created
the transition based on a Boolean.
Now it's time to use a trigger.
You will need to add a trigger parameter.
Obviously, you need to create
a UI Manager script and added to the canvas.
You will need to create a method
that triggers the fading.
And finally, you need to call that method from
the loading Colton in level manager.
So we almost know all of the steps.
Maybe you don't know how to set a trigger.
So that's what you'll need to look for yourself.
And everything else, I believe is something that
we've been through we've seen with tested out.
Remember the way the animation will work is by pressing
the red little button in
the recording on the animation so that information,
pause the video right now and go do the Chavan.
Okay, welcome back.
So first thing we're going to do
is we are going to go into the animation.
I'm going to go ahead and make sure that
I have the fading image and create an animation.
And now I can go into the animations,
right-click in here and create the fading image.
So I'm inside assets animations and
in here I'm going to create first of all,
the fading, fading and save that.
Now what did we say the fading gun should
be the fading in black to transparent.
Okay, great. So how long do I want this to take?
So let's make it around 1.5 seconds.
So I'm going to click the record button.
And what did I say again, black too transparent.
Oops, that's not the key that I was looking for.
And where is it? Okay, back in here.
So we start off at black and at the end we are recording.
I want to take the alpha down to 0.
So what happens now when I play the animation?
It starts off as black and then fades too transparent.
Excellent.
The next thing I'm going to do is create the fade out.
So fading out.
And now we start off at 0
and then we go into complete darkness after 1 second.
So we stopped recording,
run the game so transparent, fade to black.
Excellent.
Now the next thing we are going to open up the Animator.
And in here we are going to first of all, okay,
so the fading in and fading in
means that we are going from black to transparent.
This should start as soon as we start again.
So we don't just appear in the game mode,
we fade into the game mode,
and then we have the fade to black will
create a transition right here.
This transition should have
no exit time and the settings should be an,
I mean the transition duration should be at 0.
I'm going to create a parameter which will be a trigger,
and I'll just call it the Start, fade.
Make this capital.
There you go. And add it as a condition right here.
Excellent.
And I hope you did all these steps.
These are things that we've already
covered and already created.
And before we move on,
we need to make sure that this canvas is also
present in the second level Y or the level 1.
Why? Because if we go to level 1,
where are the scenes?
If we go to level 1, you'll see
that we don't have a canvas,
so we won't be able to fade
end when we start Level 1 or when we go to level 1.
So back in level 2,
I'm going to call this the UI canvas Enter.
And I'm going to go into the Prefabs.
Where are the prefabs?
And I'm going to create and here a UI folder.
And in here I'm going to drag the UI campus.
Save that.
And now look how amazing prefabs are.
Eigen don't believe we've talked about this.
But if we go into the scenes in level one,
we can immediately go to
Prefabs UI and add a canvas and our games.
So now we have a canvas right here
in level 1 and we didn't
have to create it all over again.
This is the beauty of having Prefabs.
With that done back in level 2.
Let's see what we have in here.
So the animations play,
everything should be working now when we run our game,
we should have a fading and animation.
So I run the game.
There you go.
So you can see that I have a looping fading in animation.
So I'm going to go into the animations,
find the fading in and fading out,
and make sure that there is no loop time. Save that.
And now when we run the game and the second now we
have we have a fading in an inch.
Excellent.
So do you know why this is happening?
Well, because upon entry,
first thing we do is the fading in.
So this is already set up for us.
Now, the next thing that we need to do is we need to
create the UI Manager and added to the campus.
So I'm going to go into my scripts in here,
right-click and create a new folder for the UI.
We much change the name of this folder,
but for now, let's go ahead and create a C-sharp script,
which is going to be the UI Manager
or should have been in the manager's actually.
And it has no worries.
Wait for this to compile.
Let's move it to the managers.
I believe it's butter here or maybe not.
I don't know. It depends on your preference.
I think in the manager it's maybe better.
Cancel or no, let's keep it.
Let's keep it into your eye.
Even though it is a manager will keep it in the UI.
I'm going to open up the UI Manager,
open up Visual Studio.
And the first thing that we'll
need is a reference to the image
that we want to fade back in here.
I hope this wasn't too hard because
it's going to be a serialized field,
which is an image of type image.
Oh, so there was something that I
hope some of you were able to figure out.
If I tried to use image right here.
You'll notice that I don't have an option for it.
What I do need is I need to
use your Unity engine dot u i.
So I hope this wasn't a huge problem for you.
I hope you found this error or
found this inconvenience in the challenge and
went out of your way and try to figure
the solution if you didn't, don't worry about it.
It was on my behalf.
I should have warned you beforehand.
No worries.
Image to fate.
Some of you might be thinking, Yeah, no worries,
sure, just my confidence was destroyed.
Anyways, what are we going to do in
this class here and the UI Manager?
Well, as we said,
we need a method.
Create a method that triggers the fading and call
that method from the loading coworking in level manager.
Okay, so I'm going to make sure that this is a public.
So I'm going to create a public void fade image.
And in here I'm going to go
ahead and access the image to fade.
I'm going to get a component on it,
which is the animator.
And I'm going to set the trigger.
And that trigger is going to be
the a string reference to the Start fade.
And today, now, copy this back in here,
paste it in here, close off, save that.
So what are we doing?
Because we created the animation
on the actual image to fade.
You can see that the animator is here
on this game object.
One of the components on the image to fade.
So what we do is we access the animator on
the image and then we set the trigger which is started.
Okay, great.
Now the next step is to go
ahead and call it an Level Manager.
And there are two ways of doing this.
We can either go ahead and find
the game object or find the UI Manager.
Or let's go ahead and create an instance of this.
I'm going to create a public static UI Manager.
In instance. Save that.
And I'll create a start here.
And then start the instance will be equal to this.
Save that.
Now back in the level manager,
where should we put this?
Well, I believe as soon as we
hit or as soon as we enter the loading level.
So we have the time-scale at 0.2.
I'm going to go ahead and access
the UI Manager, the instance.
And I'm going to go ahead and fade the image.
Now, you'll notice something that
because we've said the timescale to 0.2,
the fading of the image will be
slower than what we have in here.
So let's test this out and see if it works.
If you feel that it's a bit slow,
you can go ahead and make
the fading of the image a bit slower.
So there we go.
We start off, we run up.
And when we enter this portal right here, there we go.
We are slowing down and we forgot to add a hey,
we forgot to add the reference.
You can see right here the error.
If I double-click on it,
you'll see that the UI Manager dot fade image,
there's something wrong. What is wrong?
Well, there is no instance.
Okay, so if I go to the UI canvas,
I would notice that I didn't even add the manager,
So I'm not sure what is being called.
So let's drag in the UI Manager.
Let's make sure that we said
the fading image and let's apply the changes.
So notice now the canvas on
this level didn't have a UI Manager, right?
And this is the one that we used in the level one.
If I go right now to the level one,
I click on the UI canvas.
It has a UI Manager and it has the image already set up.
So you can see again the power of using grief apps.
How cool is that?
So back in level to run the game,
we fade in. No more errors.
We walk up, we go through the portal,
and there we go, we slow down.
We have this sugar right here.
So there was a slight problem in here.
As you notice that we didn't
get the time to even fade in.
So I'm going to access the fade out
again and the fading image.
And where is this?
Well, this will depend how long or
what is the timescale you have right here.
So I'm going to make it 0.5. Save that.
And instead of 1.5 seconds,
I'm going to make it around,
Let's just make it around 0,
maybe 1 second or 2.5th.
Let's say it's about 40 from the game.
Test it out, see if we have the time to fade in.
So I go up, I move through.
There we go, we fade out
completely and then we stopped off fading.
And very normally.
So with that done,
I hope you enjoy.
Let's make sure to commit our changes.
Stage all commit the changes.
Created a fading in and out
image using you are countless.
Commit the changes.
I hope you enjoy it and I'll see you in the next video.