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 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 like so:

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

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

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

Or to cue it from dialogue, use ScreenFade.Cue with the following globals:

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"

Files

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

// 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>Cues a fade from the dialogue system.</summary>
	public static void Cue(Dialogue.DialogueEvent e){
		
		// Open up the window using the globals from the event:
		e.open("screenfade",null);
		
	}
	
	/// <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);
			
		});
		
	}
	
}