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

From PowerUI
Jump to: navigation, search
(→‎Files)
(Now uses the Promise Web API.)
Line 55: Line 55:
  
 
// MIT license (Free to do whatever you want with)
 
// 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 System;
Line 71: Line 73:
 
/// <summary>A helper function for fading the screen in the given document.</summary>
 
/// <summary>A helper function for fading the screen in the given document.</summary>
 
[Values.Preserve]
 
[Values.Preserve]
−
public static void Fade(PowerUI.HtmlDocument doc,UnityEngine.Color to,float timeInSeconds){
+
public static Promise Fade(PowerUI.HtmlDocument doc,UnityEngine.Color to,float timeInSeconds){
 +
 +
Promise p=new Promise();
 
 
 
// Create globals:
 
// Create globals:
Line 81: Line 85:
 
 
 
// Open up the window:
 
// Open up the window:
−
doc.sparkWindows.open("screenfade",null,globals);
+
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;
 
 
 
}
 
}

Revision as of 16:05, 4 March 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)
// 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);
			
		});
		
	}
	
}
Retrieved from "https://powerui.kulestar.com/wiki/index.php?title=Screen_Fading_(Fade_to_black/_Whiteouts)&oldid=169"