[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);
 	}	
 
@@ -216,7 +215,9 @@ var imageChangesDemo = function(loadingComplete, bgColor) {
 			}			
 		}
 
-		renderer.end();		
+		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);
 	}	
 
@@ -160,7 +159,9 @@ var meshesDemo = function(loadingComplete, bgColor) {
 		renderer.begin();				
 		renderer.drawSkeleton(skeleton, true);
 		renderer.drawSkeletonDebug(skeleton);
-		renderer.end();		
+		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);
 	}
 
@@ -217,7 +216,9 @@ var skinsDemo = function(loadingComplete, bgColor) {
 		var scale = width / texture.getImage().width;
 		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();		
+		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);
 	}
 
@@ -122,7 +121,9 @@ var tankDemo = function(loadingComplete, bgColor) {
 		renderer.begin();				
 		renderer.drawSkeleton(skeleton, true);
 		renderer.drawSkeletonDebug(skeleton, true);		
-		renderer.end();		
+		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);
 	}
 
@@ -180,7 +179,9 @@ var transformsDemo = function(loadingComplete, bgColor) {
 			renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);			
 		}
 		gl.lineWidth(1);
-		renderer.end();		
+		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);	
 	}
@@ -141,7 +140,9 @@ var transitionsDemo = function(loadingComplete, bgColor) {
 		skeletonNoMix.updateWorldTransform();
 		skeletonNoMix.x = size.x + 45;
 		renderer.drawSkeleton(skeletonNoMix, true);
-		renderer.end();		
+		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);
 	}
 
@@ -183,7 +182,9 @@ var vineDemo = function(loadingComplete, bgColor) {
 			renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);			
 		}
 		gl.lineWidth(1);
-		renderer.end();				
+		renderer.end();
+
+		loadingScreen.draw(true);
 	}
 
 	init();

spine-ts/webgl/src/GLTexture.ts

@@ -61,7 +61,7 @@ module spine.webgl {
 			this.bind();
 			gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, this._image);
 			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, useMipMaps? gl.LINEAR_MIPMAP_LINEAR: gl.LINEAR);
+			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, useMipMaps ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR);
 			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 			gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 			if (useMipMaps) gl.generateMipmap(gl.TEXTURE_2D);

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;
@@ -52,7 +52,7 @@ module spine.webgl {
 
 		constructor (canvas: HTMLCanvasElement, gl: WebGLRenderingContext) {
 			this.canvas = canvas;
-			this.gl = gl;			
+			this.gl = gl;
 			this.camera = new OrthoCamera(canvas.width, canvas.height);
 			this.batcherShader = Shader.newColoredTextured(gl);
 			this.batcher = new PolygonBatcher(gl);