Scene Management and Useful Examples

Scene Management and Useful Examples

In this post we will go over the scene loader basics with a few very useful examples that are commonly used in games today. Specifically we will go over the basic types of scenes and we will be creating both a startup logo fading screen and a loading screen to use in any of your projects. Feel free to reuse this in your own work and please do share with others 🙂

Unity 3D comes with a lot of power and one of those powerful features is known as Scenes. Inside of Unity we are able to manipulate and use scenes using the Scene Management code within visual studio.

COMMON SCENES

Logo Fader Scene

a. Start off by creating a new empty scene.

b. Right click in the Hierarchy window and select UI -> Canvas

c. Click on the Canvas and inside of the inspector select the Canvas Scaler UI Scale Mode to be ‘Scale With Screen Size’

d. Next right click on Canvas and then select UI -> Image and name this object img_logo

e. Select Main Camera and set the Camera Clear Flags option to Solid Color and choose a background color. I generally choose black but you can choose any color that matches your logo. I’ve used white in the past as a background and even a dark blue. Totally up to you how you choose your colors.

f. Create an EMPTY Game Object and call it GSImageFader (This object will hold our image fading code).

g. Select the new object you just made (GSImageFader) and then inside of the Inspector window add a new compnent (A C# Script) and name it GSImageFader.

h. Copy and paste the following code into that script:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class GSImageFader : MonoBehaviour {

    // Public Vars
    public Image imgLogo; // This is the logo to be faded in and out
    public int nTotalFadeTime; // This is the total time to fade in and out
    public int nHoldTime; // This is the total time to pause between fade in and fade out
    public string sSceneNameToChangeTo; // This is the name of the scene we want to change to after the fade in fade out

    // Private Vars
    private int nStartTimer = 0;
    private bool bFadeIn = true;
    private bool bFadeOut = false;
    private int nTotalFrames = 0;
    private float fFPS = 60; // This is the system Frames per second calculation

	// Use this for initialization
	void Start () {
        fFPS = 1f / Time.deltaTime;
        Debug.Log("FPS: " + fFPS);
    }
	
	// Update is called once per frame
	void Update () {
        if (bFadeIn)
        {
            nTotalFrames += 1; // Increment frame counter
            float fAlphaValue = (float)nTotalFrames / (float)(fFPS * (nTotalFadeTime / 2));

            //Debug.Log("fAlp: " + fAlphaValue);

            imgLogo.color = new Color(1.0f, 1.0f, 1.0f, fAlphaValue);

            if (nTotalFrames >= ((fFPS * (nTotalFadeTime / 2)) + (nHoldTime * fFPS)))
            {
                bFadeIn = false;
                bFadeOut = true;
            }
        }
        else if (bFadeOut && !bFadeIn)
        {
            nTotalFrames -= 1; // Increment frame counter
            float fAlphaValue = (float)nTotalFrames / (float)(fFPS * (nTotalFadeTime / 2));

            //Debug.Log("fAlp: " + fAlphaValue);

            imgLogo.color = new Color(1.0f, 1.0f, 1.0f, fAlphaValue);

            if (nTotalFrames <= 0)
            {
                // Disable both fade in and fade out functions
                bFadeIn = false;
                bFadeOut = false;

                // Change Scene to specified scene
                SceneManager.LoadScene(sSceneNameToChangeTo);
            }
        }
    }
}

i. Save the code and now inside the inspector window you will see new items once compiled. Click and drag your img_logo image to the Img Logo slot. In ‘N Total Fade Time’ put the number 3 and in the hold time put the number 1 (This basically states you want the logo to fade in for 1.5 seconds, hold for 1 second then fade out for 1.5 seconds for a total time of 4 seconds). (View Image Below for Settings Example)

j. Finally put the scene name you want to load after the fade in / fade out

k. Run the scene and watch your fader work. (NOTE: Check your console log for errors. If you specify a scene that is not available it wont work correctly and you’ll see an error in the console window).

2. Loading Scene

 

e. Right click on the Canvas and select UI -> Text

f. Name the text object txt_loading_percentage and then set its size to 320 x 160 in width and height, font size to something large enough to see (I used a 40 point font size), Center the alignment, and make the font color white so you can see it on the screen.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using UnityEngine.SceneManagement;

public class GSLoader : MonoBehaviour {

    // Public Vars
    public Text txt_loading_percentage; // This is the text that will display the actual loading percentage
    public Image panel_loading_bar; // This is the loading bar image that will display the loading percentage visually
    public string sSceneToLoad; // This is the name of the next scene to load

    // Private Vars
    private AsyncOperation async = null; // This is an async operation variables

	// Use this for initialization
	void Start () {
        // Set the loading panel and percentage amount both to 0
        txt_loading_percentage.text = "Loading: 0%";
        panel_loading_bar.fillAmount = 0.0f;

        // Start Next Scene Loading Coroutine
        StartCoroutine("LoadNextScene");
	}

    // Coroutine to show level loading progress
    IEnumerator LoadNextScene()
    {

        // Setup the async variable and start to load the required scene
        async = SceneManager.LoadSceneAsync(sSceneToLoad);

        // Allow scene activation
        async.allowSceneActivation = true;

        // Do a while loop to determine when scene is done (NOTE: Scene completely loads when async.progress is at 90%)
        while (!async.isDone)
        {
            // Internal debug log to see percentage
            Debug.Log("Percent: " + ((async.progress / 0.9f) * 100));

            // Fill the bar based on loading percentage
            panel_loading_bar.fillAmount = async.progress / 0.9f;

            // Display loading percentage in text
            txt_loading_percentage.text = "Loading: " + ((async.progress / 0.9f) * 100) + "%";

            // Return null
            yield return null;
        }
    }

}

m. No go back to Unity and select the GSLoader object and simply click and drag in the txt_loading_percentage and panel_progress_bar UI elements into the script and also set the name of the scene to load there as well. Make sure your scene has been added to the scenes list in Build Settings and enabled.

n. Now run your scene and you should see your progress bar working. Keep in mind that if the scene you are loading is small it will go right to 100% and load the scene. If however your scene is large and has a lot of items, then you’ll see the correct increases as the computer loads the scene.

CONCLUSION