[ts] Updated loading screen.

.gitignore

@@ -102,3 +102,5 @@ spine-starling/spine-starling-example/lib/.spine-starling.swc.stamp
 spine-turbulenz/spine-js/spine.js
 
 spine-threejs/spine-js/spine.js
+
+spine-ts/.vscode/*

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

@@ -1058,6 +1058,7 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
     class LoadingScreen {
+        static FADE_SECONDS: number;
         private static loaded;
         private static spinnerImg;
         private static logoImg;
@@ -1065,15 +1066,15 @@ declare module spine.webgl {
         private logo;
         private spinner;
         private angle;
+        private fadeOut;
         private timeKeeper;
         backgroundColor: Color;
-        static useDark: boolean;
+        private tempColor;
+        private firstDraw;
         private static SPINNER_DATA;
-        private static SPINNER_DARK_DATA;
         private static SPINE_LOGO_DATA;
-        private static SPINE_LOGO_DARK_DATA;
         constructor(renderer: SceneRenderer);
-        draw(): void;
+        draw(complete?: boolean): void;
     }
 }
 declare module spine.webgl {
@@ -1198,8 +1199,8 @@ declare module spine.webgl {
         gl: WebGLRenderingContext;
         canvas: HTMLCanvasElement;
         camera: OrthoCamera;
+        batcher: PolygonBatcher;
         private batcherShader;
-        private batcher;
         private shapes;
         private shapesShader;
         private activeRenderer;

spine-ts/build/spine-webgl.d.ts

@@ -988,6 +988,7 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
     class LoadingScreen {
+        static FADE_SECONDS: number;
         private static loaded;
         private static spinnerImg;
         private static logoImg;
@@ -995,15 +996,15 @@ declare module spine.webgl {
         private logo;
         private spinner;
         private angle;
+        private fadeOut;
         private timeKeeper;
         backgroundColor: Color;
-        static useDark: boolean;
+        private tempColor;
+        private firstDraw;
         private static SPINNER_DATA;
-        private static SPINNER_DARK_DATA;
         private static SPINE_LOGO_DATA;
-        private static SPINE_LOGO_DARK_DATA;
         constructor(renderer: SceneRenderer);
-        draw(): void;
+        draw(complete?: boolean): void;
     }
 }
 declare module spine.webgl {
@@ -1128,8 +1129,8 @@ declare module spine.webgl {
         gl: WebGLRenderingContext;
         canvas: HTMLCanvasElement;
         camera: OrthoCamera;
+        batcher: PolygonBatcher;
         private batcherShader;
-        private batcher;
         private shapes;
         private shapesShader;
         private activeRenderer;

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

@@ -988,6 +988,7 @@ declare module spine.webgl {
 }
 declare module spine.webgl {
     class LoadingScreen {
+        static FADE_SECONDS: number;
         private static loaded;
         private static spinnerImg;
         private static logoImg;
@@ -995,15 +996,15 @@ declare module spine.webgl {
         private logo;
         private spinner;
         private angle;
+        private fadeOut;
         private timeKeeper;
         backgroundColor: Color;
-        static useDark: boolean;
+        private tempColor;
+        private firstDraw;
         private static SPINNER_DATA;
-        private static SPINNER_DARK_DATA;
         private static SPINE_LOGO_DATA;
-        private static SPINE_LOGO_DARK_DATA;
         constructor(renderer: SceneRenderer);
-        draw(): void;
+        draw(complete?: boolean): void;
     }
 }
 declare module spine.webgl {
@@ -1128,8 +1129,8 @@ declare module spine.webgl {
         gl: WebGLRenderingContext;
         canvas: HTMLCanvasElement;
         camera: OrthoCamera;
+        batcher: PolygonBatcher;
         private batcherShader;
-        private batcher;
         private shapes;
         private shapesShader;
         private activeRenderer;

spine-ts/webgl/demos/hoverboard.js

@@ -31,7 +31,6 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
 		input = new spine.webgl.Input(canvas);
 		timeKeeper = new spine.TimeKeeper();		
 		loadingScreen = new spine.webgl.LoadingScreen(renderer);
-		loadingScreen.backgroundColor = bgColor;
 		requestAnimationFrame(load);
 	}
 
@@ -151,6 +150,8 @@ var hoverboardDemo = function(loadingComplete, bgColor) {
 		}
 		renderer.end();
 		gl.lineWidth(1);
+
+		loadingScreen.draw(true);
 	}
 
 	init();

spine-ts/webgl/demos/imagechanges.js

@@ -25,7 +25,6 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 		assetManager.loadJson(DEMO_NAME, "demos.json");		
 		timeKeeper = new spine.TimeKeeper();		
 		loadingScreen = new spine.webgl.LoadingScreen(renderer);
-		loadingScreen.backgroundColor = bgColor;
 		requestAnimationFrame(load);
 	}	
 
@@ -217,6 +216,8 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 		}
 
 		renderer.end();
+
+		loadingScreen.draw(true);
 	}
 
 	init();

spine-ts/webgl/demos/meshes.js

@@ -24,7 +24,6 @@ var meshesDemo = function(loadingComplete, bgColor) {
 		assetManager.loadJson(DEMO_NAME, "demos.json");	
 		timeKeeper = new spine.TimeKeeper();		
 		loadingScreen = new spine.webgl.LoadingScreen(renderer);
-		loadingScreen.backgroundColor = bgColor;
 		requestAnimationFrame(load);
 	}	
 
@@ -161,6 +160,8 @@ var meshesDemo = function(loadingComplete, bgColor) {
 		renderer.drawSkeleton(skeleton, true);
 		renderer.drawSkeletonDebug(skeleton);
 		renderer.end();
+
+		loadingScreen.draw(true);
 	}
 
 	init();

spine-ts/webgl/demos/skins.js

@@ -23,7 +23,6 @@ var skinsDemo = function(loadingComplete, bgColor) {
 		input = new spine.webgl.Input(canvas);
 		timeKeeper = new spine.TimeKeeper();		
 		loadingScreen = new spine.webgl.LoadingScreen(renderer);
-		loadingScreen.backgroundColor = bgColor;
 		requestAnimationFrame(load);
 	}
 
@@ -218,6 +217,8 @@ var skinsDemo = function(loadingComplete, bgColor) {
 		var height = scale * texture.getImage().height;
 		renderer.drawTexture(texture, offset.x + bounds.x + 190, offset.y + bounds.y / 2 - height / 2 - 5, width, height);		
 		renderer.end();
+
+		loadingScreen.draw(true);		
 	}
 
 	init();

spine-ts/webgl/demos/spritesheets.js

@@ -29,7 +29,6 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
 		timeKeeper = new spine.TimeKeeper();
 		input = new spine.webgl.Input(canvas);	
 		loadingScreen = new spine.webgl.LoadingScreen(renderer);
-		loadingScreen.backgroundColor = bgColor;
 		requestAnimationFrame(load);
 	}
 
@@ -151,6 +150,8 @@ var spritesheetsDemo = function(loadingComplete, bgColor) {
 		renderer.drawSkeleton(skeleton, true);
 		renderer.drawSkeleton(skeletonSeq, true);		
 		renderer.end();
+
+		loadingScreen.draw(true);
 	}
 
 	init();

spine-ts/webgl/demos/stretchyman.js

@@ -39,7 +39,6 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
 		assetManager.loadJson(DEMO_NAME, "demos.json");	
 		timeKeeper = new spine.TimeKeeper();		
 		loadingScreen = new spine.webgl.LoadingScreen(renderer);
-		loadingScreen.backgroundColor = bgColor;
 		requestAnimationFrame(load);
 	}
 
@@ -191,6 +190,8 @@ var stretchymanDemo = function(loadingComplete, bgColor) {
 		}
 		renderer.end();
 		gl.lineWidth(1);
+
+		loadingScreen.draw(true);
 	}
 
 	init();

spine-ts/webgl/demos/tank.js

@@ -21,7 +21,6 @@ var tankDemo = function(loadingComplete, bgColor) {
 		assetManager.loadJson(DEMO_NAME, "demos.json");
 		timeKeeper = new spine.TimeKeeper();		
 		loadingScreen = new spine.webgl.LoadingScreen(renderer);
-		loadingScreen.backgroundColor = bgColor;
 		requestAnimationFrame(load);
 	}
 
@@ -123,6 +122,8 @@ var tankDemo = function(loadingComplete, bgColor) {
 		renderer.drawSkeleton(skeleton, true);
 		renderer.drawSkeletonDebug(skeleton, true);		
 		renderer.end();
+
+		loadingScreen.draw(true);
 	}
 
 	init();

spine-ts/webgl/demos/transforms.js

@@ -33,7 +33,6 @@ var transformsDemo = function(loadingComplete, bgColor) {
 		input = new spine.webgl.Input(canvas);
 		timeKeeper = new spine.TimeKeeper();		
 		loadingScreen = new spine.webgl.LoadingScreen(renderer);
-		loadingScreen.backgroundColor = bgColor;
 		requestAnimationFrame(load);
 	}
 
@@ -181,6 +180,8 @@ var transformsDemo = function(loadingComplete, bgColor) {
 		}
 		gl.lineWidth(1);
 		renderer.end();
+
+		loadingScreen.draw(true);
 	}
 
 	init();

spine-ts/webgl/demos/transitions.js

@@ -30,7 +30,6 @@ var transitionsDemo = function(loadingComplete, bgColor) {
 		input = new spine.webgl.Input(canvas);
 		timeKeeper = new spine.TimeKeeper();		
 		loadingScreen = new spine.webgl.LoadingScreen(renderer);
-		loadingScreen.backgroundColor = bgColor;
 
 		requestAnimationFrame(load);	
 	}
@@ -142,6 +141,8 @@ var transitionsDemo = function(loadingComplete, bgColor) {
 		skeletonNoMix.x = size.x + 45;
 		renderer.drawSkeleton(skeletonNoMix, true);
 		renderer.end();
+
+		loadingScreen.draw(true);
 	}
 	init();
 	return render;

spine-ts/webgl/demos/vine.js

@@ -31,7 +31,6 @@ var vineDemo = function(loadingComplete, bgColor) {
 		assetManager.loadJson(DEMO_NAME, "demos.json");		
 		timeKeeper = new spine.TimeKeeper();		
 		loadingScreen = new spine.webgl.LoadingScreen(renderer);
-		loadingScreen.backgroundColor = bgColor;
 		requestAnimationFrame(load);
 	}
 
@@ -184,6 +183,8 @@ var vineDemo = function(loadingComplete, bgColor) {
 		}
 		gl.lineWidth(1);
 		renderer.end();
+
+		loadingScreen.draw(true);
 	}
 
 	init();

spine-ts/webgl/src/SceneRenderer.ts

@@ -34,8 +34,8 @@ module spine.webgl {
 		gl: WebGLRenderingContext;
 		canvas: HTMLCanvasElement;
 		camera: OrthoCamera;		
+		batcher: PolygonBatcher;
 		private batcherShader: Shader;
-		private batcher: PolygonBatcher;
 		private shapes: ShapeRenderer;
 		private shapesShader: Shader;
 		private activeRenderer: PolygonBatcher | ShapeRenderer | SkeletonDebugRenderer = null;