Difference between revisions of "Screen Fading (Fade to black/ Whiteouts)"

From PowerUI
Jump to: navigation, search
(Now uses the Promise Web API.)
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:
−
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.
+
Fading the screen out to some colour (usually black or white) is an essential piece of screenplay. A [[Widget Templates|widget template]] called 'screenfade' has been built in which enables screen fading.
  
 
== Usage ==
 
== 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:
+
The bonus of it being a widget template is that you can instantly trigger it from an anchor tag using the [[Widget Protocol|widget:// protocol]] like so:
  
 
<syntaxhighlight lang="html">
 
<syntaxhighlight lang="html">
  
 
<!-- Linear fade the screen to black and take 3 seconds doing it -->
 
<!-- 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>
+
<a href='widget://screenfade?to=black&time=3s' onload='calledWhenFaded'>Fade out now.</a>
  
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
If you'd like to call it from scripts, use ScreenFade.Fade:
+
If you'd like to call it from scripts, use aDocument.fade:
  
 
<syntaxhighlight lang="csharp">
 
<syntaxhighlight lang="csharp">
  
 
// Fade the main UI to black, taking 2 seconds:
 
// Fade the main UI to black, taking 2 seconds:
−
ScreenFade.Fade(UI.document,Color.black,2f);
+
UI.document.fade(Color.black,2f);
  
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
Or to cue it from dialogue, cue a "screenfade" window with the following globals:
+
Or to cue it from dialogue, cue a "screenfade" widget with the following globals:
  
 
{| class="wikitable"
 
{| class="wikitable"
Line 46: Line 46:
 
== Stacking ==
 
== 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.
+
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.
−
 
 
−
== 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)
 
−
// Originates from the PowerUI Wiki: http://powerui.kulestar.com/wiki/index.php?title=Screen_Fading_(Fade_to_black/_Whiteouts)
 
−
// It's formatted as a window so you can stack other things on top of it.
 
−
 
 
−
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>
 
−
[Values.Preserve]
 
−
public static Promise Fade(PowerUI.HtmlDocument doc,UnityEngine.Color to,float timeInSeconds){
 
−
 
−
Promise p=new Promise();
 
−
 
−
// Create globals:
 
−
Dictionary<string,object> globals=new Dictionary<string,object>();
 
−
 
−
// Setup:
 
−
globals["to"]=to;
 
−
globals["time"]=timeInSeconds;
 
−
 
−
// Open up the window:
 
−
var w=doc.sparkWindows.open("screenfade",null,globals);
 
−
 
−
if(timeInSeconds<=0f){
 
−
// Instant:
 
−
p.Resolve(w);
 
−
}else{
 
−
 
−
// Add an event cb:
 
−
w.addEventListener("load",delegate(UIEvent e){
 
−
 
−
// Ok!
 
−
p.Resolve(w);
 
−
 
−
});
 
−
 
−
}
 
−
 
−
return p;
 
−
 
−
}
 
−
 
−
/// <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>
 

Latest revision as of 19:14, 26 March 2017

Fading the screen out to some colour (usually black or white) is an essential piece of screenplay. A widget template called 'screenfade' has been built in which enables screen fading.

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.

Retrieved from "https://powerui.kulestar.com/wiki/index.php?title=Screen_Fading_(Fade_to_black/_Whiteouts)&oldid=345"