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 widget template which enables screen fading in PowerUI.

Usage

The bonus of it being a widget template is that you can instantly trigger it from an anchor tag using the widget:// protocol like so:

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

If you'd like to call it from scripts, use aDocument.fade:

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

Or to cue it from dialogue, cue a "screenfade" widget 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"

Stacking

As it's a widget, you can also stack other widgets on top of it, by using theFadeWidget.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.