[ts] Refactored the way we render multiple demos. All rendering is coalesced into a single rendering loop. Eats less CPU

spine-ts/build/spine-all.d.ts

@@ -757,10 +757,10 @@ declare module spine {
         static BLUE: Color;
         static MAGENTA: Color;
         constructor(r?: number, g?: number, b?: number, a?: number);
-        set(r: number, g: number, b: number, a: number): void;
-        setFromColor(c: Color): void;
-        setFromString(hex: string): void;
-        add(r: number, g: number, b: number, a: number): void;
+        set(r: number, g: number, b: number, a: number): this;
+        setFromColor(c: Color): this;
+        setFromString(hex: string): this;
+        add(r: number, g: number, b: number, a: number): this;
         clamp(): this;
     }
     class MathUtils {
@@ -1319,6 +1319,7 @@ declare module spine.webgl {
         boneOriginColor: Color;
         attachmentLineColor: Color;
         triangleLineColor: Color;
+        pathColor: Color;
         aabbColor: Color;
         drawBones: boolean;
         drawRegionAttachments: boolean;

spine-ts/build/spine-all.js

@@ -4118,12 +4118,14 @@ var spine;
             this.b = b;
             this.a = a;
             this.clamp();
+            return this;
         };
         Color.prototype.setFromColor = function (c) {
             this.r = c.r;
             this.g = c.g;
             this.b = c.b;
             this.a = c.a;
+            return this;
         };
         Color.prototype.setFromString = function (hex) {
             hex = hex.charAt(0) == '#' ? hex.substr(1) : hex;
@@ -4131,6 +4133,7 @@ var spine;
             this.g = parseInt(hex.substr(2, 2), 16) / 255.0;
             this.b = parseInt(hex.substr(4, 2), 16) / 255.0;
             this.a = (hex.length != 8 ? 255 : parseInt(hex.substr(6, 2), 16)) / 255.0;
+            return this;
         };
         Color.prototype.add = function (r, g, b, a) {
             this.r += r;
@@ -4138,6 +4141,7 @@ var spine;
             this.b += b;
             this.a += a;
             this.clamp();
+            return this;
         };
         Color.prototype.clamp = function () {
             if (this.r < 0)
@@ -6745,6 +6749,7 @@ var spine;
                 this.boneOriginColor = new spine.Color(0, 1, 0, 1);
                 this.attachmentLineColor = new spine.Color(0, 0, 1, 0.5);
                 this.triangleLineColor = new spine.Color(1, 0.64, 0, 0.5);
+                this.pathColor = new spine.Color().setFromString("FF7F00");
                 this.aabbColor = new spine.Color(0, 1, 0, 0.5);
                 this.drawBones = true;
                 this.drawRegionAttachments = true;
@@ -6855,7 +6860,7 @@ var spine;
                         var nn = path.worldVerticesLength;
                         var world = this.temp = spine.Utils.setArraySize(this.temp, nn, 0);
                         path.computeWorldVertices(slot, world);
-                        var color = path.color;
+                        var color = this.pathColor;
                         var x1 = world[2], y1 = world[3], x2 = 0, y2 = 0;
                         if (path.closed) {
                             shapes.setColor(color);

spine-ts/build/spine-core.d.ts

@@ -731,10 +731,10 @@ declare module spine {
         static BLUE: Color;
         static MAGENTA: Color;
         constructor(r?: number, g?: number, b?: number, a?: number);
-        set(r: number, g: number, b: number, a: number): void;
-        setFromColor(c: Color): void;
-        setFromString(hex: string): void;
-        add(r: number, g: number, b: number, a: number): void;
+        set(r: number, g: number, b: number, a: number): this;
+        setFromColor(c: Color): this;
+        setFromString(hex: string): this;
+        add(r: number, g: number, b: number, a: number): this;
         clamp(): this;
     }
     class MathUtils {

spine-ts/build/spine-core.js

@@ -3941,12 +3941,14 @@ var spine;
             this.b = b;
             this.a = a;
             this.clamp();
+            return this;
         };
         Color.prototype.setFromColor = function (c) {
             this.r = c.r;
             this.g = c.g;
             this.b = c.b;
             this.a = c.a;
+            return this;
         };
         Color.prototype.setFromString = function (hex) {
             hex = hex.charAt(0) == '#' ? hex.substr(1) : hex;
@@ -3954,6 +3956,7 @@ var spine;
             this.g = parseInt(hex.substr(2, 2), 16) / 255.0;
             this.b = parseInt(hex.substr(4, 2), 16) / 255.0;
             this.a = (hex.length != 8 ? 255 : parseInt(hex.substr(6, 2), 16)) / 255.0;
+            return this;
         };
         Color.prototype.add = function (r, g, b, a) {
             this.r += r;
@@ -3961,6 +3964,7 @@ var spine;
             this.b += b;
             this.a += a;
             this.clamp();
+            return this;
         };
         Color.prototype.clamp = function () {
             if (this.r < 0)

spine-ts/build/spine-threejs.d.ts

@@ -731,10 +731,10 @@ declare module spine {
         static BLUE: Color;
         static MAGENTA: Color;
         constructor(r?: number, g?: number, b?: number, a?: number);
-        set(r: number, g: number, b: number, a: number): void;
-        setFromColor(c: Color): void;
-        setFromString(hex: string): void;
-        add(r: number, g: number, b: number, a: number): void;
+        set(r: number, g: number, b: number, a: number): this;
+        setFromColor(c: Color): this;
+        setFromString(hex: string): this;
+        add(r: number, g: number, b: number, a: number): this;
         clamp(): this;
     }
     class MathUtils {

spine-ts/build/spine-threejs.js

@@ -3941,12 +3941,14 @@ var spine;
             this.b = b;
             this.a = a;
             this.clamp();
+            return this;
         };
         Color.prototype.setFromColor = function (c) {
             this.r = c.r;
             this.g = c.g;
             this.b = c.b;
             this.a = c.a;
+            return this;
         };
         Color.prototype.setFromString = function (hex) {
             hex = hex.charAt(0) == '#' ? hex.substr(1) : hex;
@@ -3954,6 +3956,7 @@ var spine;
             this.g = parseInt(hex.substr(2, 2), 16) / 255.0;
             this.b = parseInt(hex.substr(4, 2), 16) / 255.0;
             this.a = (hex.length != 8 ? 255 : parseInt(hex.substr(6, 2), 16)) / 255.0;
+            return this;
         };
         Color.prototype.add = function (r, g, b, a) {
             this.r += r;
@@ -3961,6 +3964,7 @@ var spine;
             this.b += b;
             this.a += a;
             this.clamp();
+            return this;
         };
         Color.prototype.clamp = function () {
             if (this.r < 0)

spine-ts/build/spine-widget.d.ts

@@ -731,10 +731,10 @@ declare module spine {
         static BLUE: Color;
         static MAGENTA: Color;
         constructor(r?: number, g?: number, b?: number, a?: number);
-        set(r: number, g: number, b: number, a: number): void;
-        setFromColor(c: Color): void;
-        setFromString(hex: string): void;
-        add(r: number, g: number, b: number, a: number): void;
+        set(r: number, g: number, b: number, a: number): this;
+        setFromColor(c: Color): this;
+        setFromString(hex: string): this;
+        add(r: number, g: number, b: number, a: number): this;
         clamp(): this;
     }
     class MathUtils {
@@ -1249,6 +1249,7 @@ declare module spine.webgl {
         boneOriginColor: Color;
         attachmentLineColor: Color;
         triangleLineColor: Color;
+        pathColor: Color;
         aabbColor: Color;
         drawBones: boolean;
         drawRegionAttachments: boolean;

spine-ts/build/spine-widget.js

@@ -3941,12 +3941,14 @@ var spine;
             this.b = b;
             this.a = a;
             this.clamp();
+            return this;
         };
         Color.prototype.setFromColor = function (c) {
             this.r = c.r;
             this.g = c.g;
             this.b = c.b;
             this.a = c.a;
+            return this;
         };
         Color.prototype.setFromString = function (hex) {
             hex = hex.charAt(0) == '#' ? hex.substr(1) : hex;
@@ -3954,6 +3956,7 @@ var spine;
             this.g = parseInt(hex.substr(2, 2), 16) / 255.0;
             this.b = parseInt(hex.substr(4, 2), 16) / 255.0;
             this.a = (hex.length != 8 ? 255 : parseInt(hex.substr(6, 2), 16)) / 255.0;
+            return this;
         };
         Color.prototype.add = function (r, g, b, a) {
             this.r += r;
@@ -3961,6 +3964,7 @@ var spine;
             this.b += b;
             this.a += a;
             this.clamp();
+            return this;
         };
         Color.prototype.clamp = function () {
             if (this.r < 0)
@@ -6322,6 +6326,7 @@ var spine;
                 this.boneOriginColor = new spine.Color(0, 1, 0, 1);
                 this.attachmentLineColor = new spine.Color(0, 0, 1, 0.5);
                 this.triangleLineColor = new spine.Color(1, 0.64, 0, 0.5);
+                this.pathColor = new spine.Color().setFromString("FF7F00");
                 this.aabbColor = new spine.Color(0, 1, 0, 0.5);
                 this.drawBones = true;
                 this.drawRegionAttachments = true;
@@ -6432,7 +6437,7 @@ var spine;
                         var nn = path.worldVerticesLength;
                         var world = this.temp = spine.Utils.setArraySize(this.temp, nn, 0);
                         path.computeWorldVertices(slot, world);
-                        var color = path.color;
+                        var color = this.pathColor;
                         var x1 = world[2], y1 = world[3], x2 = 0, y2 = 0;
                         if (path.closed) {
                             shapes.setColor(color);

spine-ts/core/src/Utils.ts

@@ -247,7 +247,7 @@ module spine {
 
 		update () {
 			var now = Date.now() / 1000;
-			this.delta = now -this.lastTime;
+			this.delta = now - this.lastTime;
 			this.frameTime += this.delta;
 			this.totalTime += this.delta;
 			if (this.delta > this.maxDelta) this.delta = this.maxDelta;

spine-ts/webgl/demos/tank.js

@@ -125,7 +125,7 @@ var tankDemo = function(loadingComplete, bgColor) {
 		renderer.begin();				
 		renderer.drawSkeleton(skeleton, true);
 		renderer.drawSkeletonDebug(skeleton, true);		
-		renderer.end();
+		renderer.end();		
 	}
 
 	init();

spine-ts/webgl/demos/utils.js

@@ -5,34 +5,55 @@ var spineDemos;
 	spineDemos.NON_HOVER_COLOR_INNER = new spine.Color(0.478, 0, 0, 0.5);
 	spineDemos.NON_HOVER_COLOR_OUTER = new spine.Color(1, 0, 0, 0.8);
 	spineDemos.assetManager = new spine.SharedAssetManager("http://esotericsoftware.com/demos/exports/");
-	spineDemos.setupRendering = function (canvas, renderFunc) {
-		var isVisible = false;
-
-		function render () {
-			renderFunc();
-			if (isVisible) requestAnimationFrame(render);
-		};
+	spineDemos.demos = [];
+	spineDemos.loopRunning = false;
 
-		function viewportCheck () {
-			var old = isVisible	
-			isVisible = spineDemos.isElementInViewport(canvas);			
-			if (isVisible && old != isVisible) requestAnimationFrame(render);		
+	var timeKeeper = new spine.TimeKeeper();
+	var loop = function() {
+		timeKeeper.update();
+		if (spineDemos.log) console.log(timeKeeper.delta + ", " + timeKeeper.framesPerSecond);
+		spineDemos.requestAnimationFrame(loop);
+		var demos = spineDemos.demos;		
+		for (var i = 0; i < demos.length; i++) {
+			var canvas = demos[i].canvas;
+			var renderFunc = demos[i].renderFunc;
+			if (spineDemos.isElementInViewport(canvas)) {
+				if (spineDemos.log) console.log("Rendering " + canvas.id);
+				renderFunc();
+			};
 		}
+	}
 
-		window.addEventListener("DOMContentLoaded", viewportCheck, false);
-		window.addEventListener("load", viewportCheck, false);
-		window.addEventListener("resize", viewportCheck, false);
-		window.addEventListener("scroll", viewportCheck, false);
+	var setupLoop = function() {
+		if (!spineDemos.loopRunning) {			
+			loop();
+			spineDemos.loopRunning = true;
+		}
+	}
 
-		viewportCheck();
-		requestAnimationFrame(render);
+	spineDemos.setupRendering = function (canvas, renderFunc) {
+		setupLoop();
+		spineDemos.demos.push({canvas: canvas, renderFunc: renderFunc});		
 	};
 
+	spineDemos.requestAnimationFrame = function(func) {
+		requestAnimationFrame(func);
+	}
+
 	spineDemos.isElementInViewport = function (canvas) {
 		var rect = canvas.getBoundingClientRect();
 		var x = 0, y = 0;
 		var width = (window.innerHeight || document.documentElement.clientHeight);
 		var height = (window.innerWidth || document.documentElement.clientWidth);
 		return rect.left < x + width && rect.right > x && rect.top < y + height && rect.bottom > y;		 
-	};	
+	};
+
+	spineDemos.setupWebGLContext = function (canvas) {
+		config = {
+			alpha: false,
+			depth: false,
+			stencil: false
+		}
+		return gl = canvas.getContext("webgl", config) || canvas.getContext("experimental-webgl", config);
+	}
 })(spineDemos || (spineDemos = { }));