One of the many things I had to learn how to do in order to get my Garden App going is how to handle the transition between screens. I figured out how to do it so I thought I would do a post so that I won’t forget. It’s so easy, you can do it in about 40 steps so lets dig into to how to make Unity Transitions.
The boring stuff
Like all things to do with Unity, we need to create a project so open up Unity Hub and create a new project.
With that out of the way we can start on the transitions.
Creating the Unity Transitions
First we need to create an image. This will be the actual thing that will fill the screen. After you create it, reset the transform back to 0 and 0 for the x and y positions.
In the Hierarchy tab, select the Canvas object.
If you have ever run into an issue that when you change resolutions, things get out of wack when playing the game. This is one of the ways to fix that. In the Canvas Scaler component, change the UI Scale Mode to Scale with Screen Size. This will force the screen to scale correctly. This is not technically required but I am trying to get into good practice and do this.
With all that done lets switch the scene view to 2D by pressing the 2D button.
Lets get a better view of things and scale out and recenter on the image. An easy way to recenter on a object is to press the F key when you have it selected.
We need to get the image to cover the screen for the transition. This is pretty straightforward but not intuitive.
Making sure you have the Image selected in the Hierarchy tab, go over to the little square settings. Hold down the Alt key then select the bottom right hand corner. This will anchor everything on all dimensions and stretch everything out like we want it.
With that done, lets pick the color of our transitions. While pick or lime green might be great, I will stick with something slightly more traditional and select black.
Now we have the image object all set for our animations.
How to Animate Transitions in Unity
Like a bunch of things in my Unity tutorials we need to do some setup first. Lets create a animations folder by selected Assets in the Project tab and right clicking. This will give us a context menu. Select Create-> Folder. Name it animations.
Next we need to add n animator to the image control.
So with the Image selected in the Hierarchy, highlight the Animations under assets. In the Animation tab, you should get a create button appearing. Hit that button.
Make sure you are in the animations directory, create your animation. I will name mine fadeIn.
So lets animate it. In the animation tab press the record button.
The dope sheet header turns red.
We need to drag the time over to the end. Mine will be half a second so I drag it to 0:30. Use the red headers to guide the white line.
With that done, we need to adjust the alpha.
Press the record button again to end the animation process.
Lets create the fadeOut. In the Animation tab, press the drop down that says FadeIn. We want to create a new clip.
Just like before, make sure we are in the Animations folder and name it. I named mine FadeOut.
In this animation we need to start with a no alpha then move up to full alpha. Lets start with pressing the record button.
With that done we need set the alpha to 0 on timestamp 0 of the dope sheet. Make sure the white line is on 0:00 in the animation tab and select the color in the Inspector of the Image control.
Now just like before, drag the dopesheet white line to the end of the clip. Mine is at 0:30.
To complete the fade out, we need to fade out so lets select the color of the image object in the Inspector tab and sets its alpha to 255.
Finish the recording by clicking on the record button in the Animation tab.
We have a little more work to do on each animation. Select each one at a time of the animations under Assets\Animations and in the inspector turn off the loop time. Without it, the animation will repeat.
Messing with the Animator.
With that done we need to play with the animator. Even in transitions, Unity like animations. In the Assets/Animations folder a thing was created called Image. This is the animator controller. This one is tied to the Image control we created at the start. Open it. It should bring you to the Animator tab.
In this one we need to create a transition between FadeIn and FadeOut. So on the FadeIn right click and select make transition.
Over in the Parameter section, we need to add a trigger. Do this by selecting the + button.
You might want to name it something more exotic than simply trigger. If you do remember that name because we will be using it in the script.
Lets make a Unity transition script.
First we need to add a scripts folder to our project. Right click on Assets in the Project tab and select Create and Folder.
Next create the script. With the new scripts folder highlighted, right click on Create, C# Script. Name it something you like. I’ll name mine Transitions.
Lets open the script by double clicking on the script name. This will open Visual Studio.
When it finishes, type the follow items in the script.
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.SceneManagement; public class Transitions : MonoBehaviour { public Animator animator; // Update is called once per frame void Update() { //Set Trigger for Scene Transition in this case pressing space if (Input.GetKey(KeyCode.Space)) { StartCoroutine(ExecuteTransition(0)); //This is in the build settings } } IEnumerator ExecuteTransition(int SceneNumber) { animator.SetTrigger("Trigger");//The string parameter is the same as the transition parameter //yield return new WaitForEndOfFrame(); yield return new WaitForSeconds(1f); SceneManager.LoadScene(SceneNumber); } }
This code is pretty simple. We declare a public animator because we will set it in Unity. In the update, we want to check if space has been pressed. If it has then we want to start a coroutine.
This coroutine just allows us to run a set of code that will wait if we need it to before completing. I realize that did not make much sense but the next block will help. The important part here is the 0 that is the index of the scene you want to go to. In my case I have one scene so it will reload itself.
The final block of code is the actual thing that will make the transition work.
In this we tell the animator that the trigger is set. This is that thing that I said earlier you might want to name better. If you did name it better put that text into the string.
Following that, I tell it I want to wait before finish executing it, so I yield a x. In my case I just want the frame to end but you can select lots of different options including time and conditionals.
Finally I have the new scene loaded.
Make sure you save it and go back to Unity. It will take a few seconds for everything to sync. While you are waiting lets set the build settings because we need to add our scene so we can get that scene number we may someday need.
In Unity, select File->Build Settings.
Make sure to click the Add Open Scenes button . Then your scene will appear and next to it will be a number. That number, in our case 0, is the number we needed in our script. You can just close it without building with the red x.
We are in the home stretch of building out Unity Transitions. Select the image from the Hierarchy tab.
We need to take the script, Transitions and attach it to out image. Grab it from the Project tab then drag over to the grey space in the inspector. The order of operations on this is to select the scripts folder in Project tab, then select the image in Hierarchy tab, then drag the transition to the Inspector. If you mess this up then the Transition will show in the inspector. If it does just try again.
Finally we need to assign the animator that I said would be assigned in Unity. That time is now and the animator is the Image’s.
Drag the Animator component down to the Animator section of the Transactions component in the Inspector Tab. If you are not seeing it, make sure you have selected the image in the Hierarchy tab.
After all that lets press the play button and your transition should occur every time you press the space bar.
That was fun. See it only took about 40 easy steps to do Unity transitions. I’ll see you next time and drop a comment down below if you have any questions.