Controlling Gifs and SPA's - Revision history

Bablakeluke at 19:45, 24 February 2017

2017-02-24T19:45:45Z

Bablakeluke: /* Getting hold of the SPA instance */

2017-02-24T18:23:03Z

‎Getting hold of the SPA instance

Bablakeluke: /* Events */

2017-02-24T18:18:00Z

‎Events

Bablakeluke: /* Events */

2017-02-24T18:17:26Z

‎Events

Bablakeluke: Created page with "When you display a GIF with PowerUI, it runs as a Sprite Animaton (SPA). So, both a GIF and an SPA can be controlled in the same way. == Getting hold of the SPA instance ==..."

2017-02-24T18:16:43Z

Created page with "When you display a GIF with PowerUI, it runs as a Sprite Animaton (SPA). So, both a GIF and an SPA can be controlled in the same way. == Getting hold of the SPA instance ==..."

New page

When you display a GIF with PowerUI, it runs as a Sprite Animaton (SPA). So, both a GIF and an SPA can be controlled in the same way.

== Getting hold of the SPA instance ==

As they can be loaded over the internet, the best way to know when your animation is available is via the [[#Events|spritestart event]]. It fires

== Events ==

{| class="wikitable"
|-
! Name
! Event object type
! Purpose
|-
| spritestart
| PowerUI.SpriteEvent
| Occurs when an SPA or GIF goes on screen and has started playing.
|-
| spriteend
| PowerUI.SpriteEvent
| Occurs when an SPA or GIF goes off screen or when it is set to not loop and has finished.
|-
| spriteiteration
| PowerUI.SpriteEvent
| Occurs when an SPA or GIF loops.
|}

Here's a quick example:

<syntaxhighlight lang="csharp">

// The element to add the event handlers to (typically an img, or whichever element has background-image on it):
var nyanCat=document.getElementById("nyan");

nyanCat.addEventListener("spritestart",delegate(SpriteEvent se){

Debug.Log("Sprite start!");

// Shortcut to stop it from looping (This will make it stop on the last frame, and spriteend is fired):
// se.loop=false;

});

nyanCat.addEventListener("spriteend",delegate(SpriteEvent se){

Debug.Log("Sprite end!");

});

nyanCat.addEventListener("spriteiteration",delegate(SpriteEvent se){

Debug.Log("Sprite looped!");

});

<syntaxhighlight>

← Older revision		Revision as of 19:45, 24 February 2017
Line 75:		Line 75:

	});		});
		+
		+	</syntaxhighlight>
		+
		+
		+	== Using them outside PowerUI ==
		+
		+	If you'd like to use a GIF or SPA outside of PowerUI (i.e. obtain it as a material) the first thing you'll want to do is request the file. You'd use an ImagePackage for that:
		+
		+
		+	<syntaxhighlight lang="csharp">
		+
		+	// Create a package (using an absolute URL):
		+	PowerUI.ImagePackage package=new PowerUI.ImagePackage("resources://hello.gif");
		+
		+	package.onload=delegate(PowerUI.UIEvent e){
		+	// Ok!
		+	// package.Contents is e.g. a GifFormat:
		+	GifFormat gif=package.Contents as GifFormat;
		+
		+	// Start it up directly (using the default, unlit shader - Start is overloaded):
		+	Material materialToUse=gif.GifFile.Start();
		+
		+	// Display materialToUse somewhere!
		+
		+	};
		+
		+	package.onerror=delegate(){
		+	// Failed to load.
		+	};
		+
		+	// Request it now!
		+	package.send();

	</syntaxhighlight>		</syntaxhighlight>

@@ Line 26: / Line 26: @@
 |}
-Here's a quick example:
+Here's an example:
 <syntaxhighlight lang="csharp">
@@ Line 54: / Line 54: @@
 	});
-<syntaxhighlight>
+</syntaxhighlight>

@@ Line 3: / Line 3: @@
 == Getting hold of the SPA instance ==
-As they can be loaded over the internet, the best way to know when your animation is available is via the [[#Events|spritestart event]]. It fires
+If you're loading an SPA or GIF via src, keep in mind that they can be loaded over the internet so the best way to know when your animation is available is via the [[#Events|spritestart event]].
 == Events ==

@@ Line 30: / Line 30: @@
 <syntaxhighlight lang="csharp">
-	// The element to add the event handlers to (typically an img, or whichever element has background-image on it):
+// The element to add the event handlers to (typically an img, or whichever element has background-image on it):
-	var nyanCat=document.getElementById("nyan");
+var nyanCat=document.getElementById("nyan");
-	nyanCat.addEventListener("spritestart",delegate(SpriteEvent se){
+	// Shortcut to stop it from looping (This will make it stop on the last frame, and spriteend is fired):
+	// se.loop=false;
-		// Shortcut to stop it from looping (This will make it stop on the last frame, and spriteend is fired):
+});
-	nyanCat.addEventListener("spriteend",delegate(SpriteEvent se){
+nyanCat.addEventListener("spriteend",delegate(SpriteEvent se){
-		Debug.Log("Sprite end!");
+	Debug.Log("Sprite end!");
-−
-	});
+});
-	nyanCat.addEventListener("spriteiteration",delegate(SpriteEvent se){
+	Debug.Log("Sprite looped!");
-		Debug.Log("Sprite looped!");
+});
 </syntaxhighlight>