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, use 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"
|}

== 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>