View source for Screen Fading (Fade to black/ Whiteouts)

Fading the screen out to some colour (usually black or white) is an essential piece of screenplay. Here's a [[Window Templates|window template]] which enables screen fading in PowerUI.

== Usage ==

The bonus of it being a window template is that you can instantly trigger it from an anchor tag using the [[Window Protocol|window:// protocol]] like so:

<syntaxhighlight lang="html">

<!-- Linear fade the screen to black and take 3 seconds doing it -->
<a href='window://screenfade?to=black&time=3s' onload='calledWhenFaded'>Fade out now.</a>

</syntaxhighlight>

If you'd like to call it from scripts, use ScreenFade.Fade:

<syntaxhighlight lang="csharp">

// Fade the main UI to black, taking 2 seconds:
ScreenFade.Fade(UI.document,Color.black,2f);

</syntaxhighlight>

Or to cue it from dialogue, cue a "screenfade" window with the following globals:

{| class="wikitable"
|-
! Global name
! Optional?
! Default
! Type
! Examples
|-
| to
| Yes
| black
| Any colour (valid CSS string or a UnityEngine.Color).
| "red", "rgb(50%,25%,20%)"
|-
| time
| Yes
| 0 (Cut to black)
| Any number (valid CSS string or a number)
| "2s", "1500ms"
|}

== Stacking ==

As it's a window, you can also stack other windows on top of it, by using theFadeWindow.open(..). This is great for e.g. pause menus where you'd like the screen to fade to black (or to some semi-transparent colour) and display a pause menu on top.

== Files ==

ScreenFade/ScreenFade.cs (just drop in your project and the above will start working!):

<syntaxhighlight lang="csharp">

// MIT license (Free to do whatever you want with)

using System;
using PowerUI;
using Windows;
using System.Collections;
using System.Collections.Generic;
	
/// <summary>
/// Fades the screen to a specified colour in a specified amount of time.
/// </summary>

[Dom.TagName("screenfade")]
public class ScreenFade : Windows.Window{
	
	/// <summary>A helper function for fading the screen in the given document.</summary>
	public static void Fade(PowerUI.HtmlDocument doc,UnityEngine.Color to,float timeInSeconds){
		
		// Create globals:
		Dictionary<string,object> globals=new Dictionary<string,object>();
		
		// Setup:
		globals["to"]=to;
		globals["time"]=timeInSeconds;
		
		// Open up the window:
		doc.sparkWindows.open("screenfade",null,globals);
		
	}
	
	/// <summary>The depth that this type of window lives at.</summary>
	public override int Depth{
		get{
			// Very high (always right at the front)
			return 100000;
		}
	}
	
	/// <summary>Called when asked to fade.</summary>
	public override void Load(string url,Dictionary<string,object> globals){
		
		// Get the colour:
		UnityEngine.Color colour=GetColour("to",globals,UnityEngine.Color.black);
		
		// Get the time:
		float time=(float)GetDecimal("time",globals,0);
		
		// Fade now!
		SetHtml(
			"<div style='width:100%;height:100%;position:fixed;"+
			"top:0px;left:0px;opacity:0;background-color:"+colour.ToCss()+";'></div>"
		);
		
		// Run the animation:
		element.animate("opacity:1",time).OnDone(delegate(UIAnimation animation){
			
			// Done! Trigger a 'load' event.
			// It will run on element (the window itself), the Window object and 
			// (if there is one), the original anchor tag.
			trigger("load",globals);
			
		});
		
	}
	
}

</syntaxhighlight>