Click here to Skip to main content
15,897,315 members
Articles / All Topics

Unity3D Scene Changing With Fade Effect

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
19 Jan 2015CPOL 12.5K   2  
Unity3D scene changing with fade effect

Followed this official tutorial, my own version on GitHub, and you can see it in action here (click the cube to see the effect).

LevelChangeWithFading.

Steps on how to make this:

  1. Create a new 3D project
  2. Save the scene as Level0
  3. Create -> 3D object -> Cube
  4. Create -> Light -> Directional light
  5. Save this scene and create a new one Level2 and repeat the process just here create two cubes
  6. Create an empty object called FaderObj and attach a new script to it called Fading:
    JavaScript
    #pragma strict
    
    public var fadeOutTexture : Texture2D;	// the texture that will overlay the screen. 
    				// This can be a black image or a loading graphic
    public var fadeSpeed : float = 0.8f;		// the fading speed
    private var drawDepth : int = -1000;		// the texture's order 
    			// in the draw hierarchy: a low number means it renders on top
    private var alpha : float = 1.0f;		// the texture's alpha value between 0 and 1
    private var fadeDir : int = -1;			// the direction to fade: in = -1 or out = 1
    
    
    function OnGUI()
    {
    	// fade out/in the alpha value using a direction, 
    	// a speed and Time.deltaTime to convert the operation to seconds
    	alpha += fadeDir * fadeSpeed * Time.deltaTime;
    	// force (clamp) the number to be between 0 and 1 because 
    	// GUI.color uses Alpha values between 0 and 1
    	alpha = Mathf.Clamp01(alpha);
    	
    	// set color of our GUI (in this case our texture). 
    	// All color values remain the same & the Alpha is set to the alpha variable
    	GUI.color = new Color (GUI.color.r, GUI.color.g, GUI.color.b, alpha);
    	GUI.depth = drawDepth; // make the black texture render on top (drawn last)
    	GUI.DrawTexture(new Rect(0, 0, Screen.width, Screen.height), 
    		fadeOutTexture);		// draw the texture to fit the entire screen area
    }
    
    // sets fadeDir to the direction parameter making the scene fade in if -1 and out if 1
    public function BeginFade (direction : int)
    {
    	fadeDir = direction;
    	return (fadeSpeed);
    }
    
    // OnLevelWasLoaded is called when a level is loaded. 
    // It takes loaded level index (int) as a parameter so you can limit the fade in to certain scenes.
    function OnLevelWasLoaded()
    {
    	//alpha = 1;		// use this if the alpha is not set to 1 by default
    	BeginFade(-1);		// call the fade in function
    }
  7. Add the following script to the Cube object:
    JavaScript
    #pragma strict
    
    var counter = 0;
    function Start () {
    
    }
    
    function Update () {
    
    }
    
    function OnMouseDown(){
    	Debug.Log("clicked " + counter++);
    	var fadeTime = GameObject.Find ("FaderObj").GetComponent(FadingJS).BeginFade(1);		
    	
    	yield WaitForSeconds(fadeTime);	
    	
    	GameObject.Find("Cube").renderer.enabled = false;
    	
    	fadeTime = GameObject.Find ("FaderObj").GetComponent(FadingJS).BeginFade(-1);
    	
    	yield WaitForSeconds(fadeTime);	
    	
    	Application.LoadLevel(Application.loadedLevel + 1);	
    }
  8. Drag a 2×2 black png image to the Texture variable in the Fading script.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior)
Croatia Croatia
I’m an engineer at heart and a jack of all trades kind of guy.

For those who care about titles, I hold a masters degree in computing from FER (and a black belt in karate, but that’s another story…).

During the last years, worked in a betting software industry where I made use of my knowledge in areas ranging from full-stack (web & desktop) development to game development through Linux and database administration and use of various languages (C#, PHP, JavaScript to name just a few).

Currently, I’m a senior software engineer at TelTech, where we make innovative communications apps, and I <3 it.

Lately, I’m very passionate about Ionic framework and am currently in the top 3 answerers on StackOverflow in Ionic framework. I wrote a book about Ionic framework which you can get for free on Leanpub: Ionic framework – step by step from idea through prototyping to the app stores.

Other technical writing:

+ wrote a book Getting MEAN with MEMEs
was a technical reviewer for a book Deploying Node published by Packt
was a technical reviewer for a book Getting started with Ionic published by Packt
After writing 300 posts, this is why I think you should start blogging too

Come and see what I write about on my blog.

Comments and Discussions

 
-- There are no messages in this forum --