Difference between revisions of "Screen Fading (Fade to black/ Whiteouts)"
| Line 43: | Line 43: | ||
| "2s", "1500ms" | | "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 == | == Files == | ||
Revision as of 12:30, 14 January 2017
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' onload='calledWhenFaded'>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, cue a "screenfade" window 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 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!):
// 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);
});
}
}