Let's see how you can make basic scene transitions
like this one or this one. I already created two scenes. Something like a menu scene with a simple
Button and an InGame Scene By Clicking one of those button you will switch
to the other scene and vice versa. The Scene switching is handled by script,
which is the same for both scenes, just for simplicity. I added the SceneManagement Package and load
the scene by their build index. To see the build index go to File > Build
Settings. Make sure to add all your scenes and there
you can see the index number. So we're going to make a scene transition
where a black rectangle grows, then the scene switches, and then in shrinks again. Instead of animating the rectangle I'm going
to tween it. This is way better for your performance. I highly recommend using the free LeanTween
library, which is super easy to use and useful in a lot of situations. If you don't want to use it, there are also
other tweening librarys and of course you can still use the default Unity animations. To download LeanTween go to the Unity AssetStore
and search for "LeanTween" or click the link in the description. Like I said it's free and you can add it to
your assets and import it. When this import dialog shows up, make sure
to deselect the exmaples. The package comes with all those materials
and scenes and scripts. But if you want to see those cool features
you can always install them in a new project and check them out there. You can also deselect the documentation if
you prefer using it online. - So let's create the object we want to tween. Inside of your canvas create a new UI > Image
and stretch it over your whole screen Make sure you don't scale it up. On its max position the scale should be 1. Because we will scale it from 0 to 1 and back
for our animation. When you are done, set your GameObject to
disabled so it doesn't annoy you. Make the same, or whatever you want, in the
other scene. Basically you can have different forms or
versions on every screen transition, you know, like Powerpoint 2003. Now open the script which handles the reaction
on the button clicks. After a button was clicked, this is the moment
we want to animate and after it is finished we want the scene to switch. At first we need a reference to the fader
object in the scene. I add a serialized field of the type RectTransform. LeanTween can either tween GameObjects or
RectTransform, whereas the second one is used for canvas elements like we have on. In the start function I want the "fade out"
to happen. So the rectangle should be full and shrink
to 0. To make sure it is in the correct starting
position I will set this also with LeanTween. In the documentation you can see the relevant
parameters for the scale method. The first one is our RectTransform element. The second parameter is a Vector3 where you
can set the target scale of all three axes separately. And the third argument is the duration time
as a float. This one will have a duration of zero. But right after this, I create a new one which
has a Vector3.zero as target scale and a duration of 0.5 seconds. It's always good to disable your GameObjects
again. In this case it's just not there with a scale
of 0 but if you just change the opacity of something it will always be in front of your
buttons and make them not clickable. So LeanTween offers the option to chain methods,
which is quite handy now. Because this animation needs half a second
and instead of using a coroutine we can just simply append this "setOnComplete" with an
anonymous function and do whatever we want after those 0.5 seconds - like disabling the
GameObject. You can know copy the code and paste them
into your button handler methods. Just that we want to start with a Vector3.zero
and end with a scale of 1,1,1,. Inside of your setOnComplete method add the
LoadScene method. Since we are switching the scene there is
no need to disable the GameObject. And of course, make sure to enable your GameObject
before any animations. Before going into game mode make sure to assign
the fader to our RectTransform slot in the script - in both scenes. As you can see, everything works fine. As you may know from animationsyou can have
different animation curves. In LeanTween exist a lot of presets for this. Simply chain the method "setEase" and from
the type LeanTweenType select one you like. You can now see, there is a significant speed
change in the tweening. And you can also have some scene-delay, where
you wait on you black screen and then load the next one. The easiest way is to load the scene in another
method and just invoke it. When going into the "InGame" scene the black
screen will now stay for half a second. And let me change the ease so something smoother. Much Better. To help you understand LeanTween a bit better,
let's try this whole thing for the opacity - in LeanTween the method is called Alpha,
because it changes the alpha channel from images between 0 and 1. I simply replaced the called method, set a
float instead of the Vector3 and also removed the animation curve. Note that There still is this half a second
pause when switching to the "Ingame" scene. And of course you don't have to use a default
rectangle image. Feel free to use whatever shape you want,
like I did with this fish on my game jam game "Clean Your Ocean". If you have questions let me know in the comments,
thank you for watching and I'll see you next time.
