[webgl] Fixed css of canvases for standalone demos. On FF Android, the context limit is 2, so we adhere to that now, resulting in terrible artifacts. Using 5 preallocated contexts for other browsers.

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

@@ -399,6 +399,156 @@ declare module spine {
         newClippingAttachment(skin: Skin, name: string): ClippingAttachment;
     }
 }
+declare module spine {
+    abstract class Attachment {
+        name: string;
+        constructor(name: string);
+    }
+    abstract class VertexAttachment extends Attachment {
+        private static nextID;
+        id: number;
+        bones: Array<number>;
+        vertices: ArrayLike<number>;
+        worldVerticesLength: number;
+        constructor(name: string);
+        computeWorldVertices(slot: Slot, start: number, count: number, worldVertices: ArrayLike<number>, offset: number, stride: number): void;
+        applyDeform(sourceAttachment: VertexAttachment): boolean;
+    }
+}
+declare module spine {
+    interface AttachmentLoader {
+        newRegionAttachment(skin: Skin, name: string, path: string): RegionAttachment;
+        newMeshAttachment(skin: Skin, name: string, path: string): MeshAttachment;
+        newBoundingBoxAttachment(skin: Skin, name: string): BoundingBoxAttachment;
+        newPathAttachment(skin: Skin, name: string): PathAttachment;
+        newPointAttachment(skin: Skin, name: string): PointAttachment;
+        newClippingAttachment(skin: Skin, name: string): ClippingAttachment;
+    }
+}
+declare module spine {
+    enum AttachmentType {
+        Region = 0,
+        BoundingBox = 1,
+        Mesh = 2,
+        LinkedMesh = 3,
+        Path = 4,
+        Point = 5,
+    }
+}
+declare module spine {
+    class BoundingBoxAttachment extends VertexAttachment {
+        color: Color;
+        constructor(name: string);
+    }
+}
+declare module spine {
+    class ClippingAttachment extends VertexAttachment {
+        endSlot: SlotData;
+        color: Color;
+        constructor(name: string);
+    }
+}
+declare module spine {
+    class MeshAttachment extends VertexAttachment {
+        region: TextureRegion;
+        path: string;
+        regionUVs: ArrayLike<number>;
+        uvs: ArrayLike<number>;
+        triangles: Array<number>;
+        color: Color;
+        hullLength: number;
+        private parentMesh;
+        inheritDeform: boolean;
+        tempColor: Color;
+        constructor(name: string);
+        updateUVs(): void;
+        applyDeform(sourceAttachment: VertexAttachment): boolean;
+        getParentMesh(): MeshAttachment;
+        setParentMesh(parentMesh: MeshAttachment): void;
+    }
+}
+declare module spine {
+    class PathAttachment extends VertexAttachment {
+        lengths: Array<number>;
+        closed: boolean;
+        constantSpeed: boolean;
+        color: Color;
+        constructor(name: string);
+    }
+}
+declare module spine {
+    class PointAttachment extends VertexAttachment {
+        x: number;
+        y: number;
+        rotation: number;
+        color: Color;
+        constructor(name: string);
+        computeWorldPosition(bone: Bone, point: Vector2): Vector2;
+        computeWorldRotation(bone: Bone): number;
+    }
+}
+declare module spine {
+    class RegionAttachment extends Attachment {
+        static OX1: number;
+        static OY1: number;
+        static OX2: number;
+        static OY2: number;
+        static OX3: number;
+        static OY3: number;
+        static OX4: number;
+        static OY4: number;
+        static X1: number;
+        static Y1: number;
+        static C1R: number;
+        static C1G: number;
+        static C1B: number;
+        static C1A: number;
+        static U1: number;
+        static V1: number;
+        static X2: number;
+        static Y2: number;
+        static C2R: number;
+        static C2G: number;
+        static C2B: number;
+        static C2A: number;
+        static U2: number;
+        static V2: number;
+        static X3: number;
+        static Y3: number;
+        static C3R: number;
+        static C3G: number;
+        static C3B: number;
+        static C3A: number;
+        static U3: number;
+        static V3: number;
+        static X4: number;
+        static Y4: number;
+        static C4R: number;
+        static C4G: number;
+        static C4B: number;
+        static C4A: number;
+        static U4: number;
+        static V4: number;
+        x: number;
+        y: number;
+        scaleX: number;
+        scaleY: number;
+        rotation: number;
+        width: number;
+        height: number;
+        color: Color;
+        path: string;
+        rendererObject: any;
+        region: TextureRegion;
+        offset: ArrayLike<number>;
+        uvs: ArrayLike<number>;
+        tempColor: Color;
+        constructor(name: string);
+        updateOffset(): void;
+        setRegion(region: TextureRegion): void;
+        computeWorldVertices(bone: Bone, worldVertices: ArrayLike<number>, offset: number, stride: number): void;
+    }
+}
 declare module spine {
     enum BlendMode {
         Normal = 0,
@@ -1045,156 +1195,6 @@ declare module spine {
         end(): void;
     }
 }
-declare module spine {
-    abstract class Attachment {
-        name: string;
-        constructor(name: string);
-    }
-    abstract class VertexAttachment extends Attachment {
-        private static nextID;
-        id: number;
-        bones: Array<number>;
-        vertices: ArrayLike<number>;
-        worldVerticesLength: number;
-        constructor(name: string);
-        computeWorldVertices(slot: Slot, start: number, count: number, worldVertices: ArrayLike<number>, offset: number, stride: number): void;
-        applyDeform(sourceAttachment: VertexAttachment): boolean;
-    }
-}
-declare module spine {
-    interface AttachmentLoader {
-        newRegionAttachment(skin: Skin, name: string, path: string): RegionAttachment;
-        newMeshAttachment(skin: Skin, name: string, path: string): MeshAttachment;
-        newBoundingBoxAttachment(skin: Skin, name: string): BoundingBoxAttachment;
-        newPathAttachment(skin: Skin, name: string): PathAttachment;
-        newPointAttachment(skin: Skin, name: string): PointAttachment;
-        newClippingAttachment(skin: Skin, name: string): ClippingAttachment;
-    }
-}
-declare module spine {
-    enum AttachmentType {
-        Region = 0,
-        BoundingBox = 1,
-        Mesh = 2,
-        LinkedMesh = 3,
-        Path = 4,
-        Point = 5,
-    }
-}
-declare module spine {
-    class BoundingBoxAttachment extends VertexAttachment {
-        color: Color;
-        constructor(name: string);
-    }
-}
-declare module spine {
-    class ClippingAttachment extends VertexAttachment {
-        endSlot: SlotData;
-        color: Color;
-        constructor(name: string);
-    }
-}
-declare module spine {
-    class MeshAttachment extends VertexAttachment {
-        region: TextureRegion;
-        path: string;
-        regionUVs: ArrayLike<number>;
-        uvs: ArrayLike<number>;
-        triangles: Array<number>;
-        color: Color;
-        hullLength: number;
-        private parentMesh;
-        inheritDeform: boolean;
-        tempColor: Color;
-        constructor(name: string);
-        updateUVs(): void;
-        applyDeform(sourceAttachment: VertexAttachment): boolean;
-        getParentMesh(): MeshAttachment;
-        setParentMesh(parentMesh: MeshAttachment): void;
-    }
-}
-declare module spine {
-    class PathAttachment extends VertexAttachment {
-        lengths: Array<number>;
-        closed: boolean;
-        constantSpeed: boolean;
-        color: Color;
-        constructor(name: string);
-    }
-}
-declare module spine {
-    class PointAttachment extends VertexAttachment {
-        x: number;
-        y: number;
-        rotation: number;
-        color: Color;
-        constructor(name: string);
-        computeWorldPosition(bone: Bone, point: Vector2): Vector2;
-        computeWorldRotation(bone: Bone): number;
-    }
-}
-declare module spine {
-    class RegionAttachment extends Attachment {
-        static OX1: number;
-        static OY1: number;
-        static OX2: number;
-        static OY2: number;
-        static OX3: number;
-        static OY3: number;
-        static OX4: number;
-        static OY4: number;
-        static X1: number;
-        static Y1: number;
-        static C1R: number;
-        static C1G: number;
-        static C1B: number;
-        static C1A: number;
-        static U1: number;
-        static V1: number;
-        static X2: number;
-        static Y2: number;
-        static C2R: number;
-        static C2G: number;
-        static C2B: number;
-        static C2A: number;
-        static U2: number;
-        static V2: number;
-        static X3: number;
-        static Y3: number;
-        static C3R: number;
-        static C3G: number;
-        static C3B: number;
-        static C3A: number;
-        static U3: number;
-        static V3: number;
-        static X4: number;
-        static Y4: number;
-        static C4R: number;
-        static C4G: number;
-        static C4B: number;
-        static C4A: number;
-        static U4: number;
-        static V4: number;
-        x: number;
-        y: number;
-        scaleX: number;
-        scaleY: number;
-        rotation: number;
-        width: number;
-        height: number;
-        color: Color;
-        path: string;
-        rendererObject: any;
-        region: TextureRegion;
-        offset: ArrayLike<number>;
-        uvs: ArrayLike<number>;
-        tempColor: Color;
-        constructor(name: string);
-        updateOffset(): void;
-        setRegion(region: TextureRegion): void;
-        computeWorldVertices(bone: Bone, worldVertices: ArrayLike<number>, offset: number, stride: number): void;
-    }
-}
 declare module spine {
     class JitterEffect implements VertexEffect {
         jitterX: number;
@@ -1311,22 +1311,22 @@ declare module spine.webgl {
     }
 }
 declare module spine.webgl {
-    const M00 = 0;
-    const M01 = 4;
-    const M02 = 8;
-    const M03 = 12;
-    const M10 = 1;
-    const M11 = 5;
-    const M12 = 9;
-    const M13 = 13;
-    const M20 = 2;
-    const M21 = 6;
-    const M22 = 10;
-    const M23 = 14;
-    const M30 = 3;
-    const M31 = 7;
-    const M32 = 11;
-    const M33 = 15;
+    const M00: number;
+    const M01: number;
+    const M02: number;
+    const M03: number;
+    const M10: number;
+    const M11: number;
+    const M12: number;
+    const M13: number;
+    const M20: number;
+    const M21: number;
+    const M22: number;
+    const M23: number;
+    const M30: number;
+    const M31: number;
+    const M32: number;
+    const M33: number;
     class Matrix4 {
         temp: Float32Array;
         values: Float32Array;

spine-ts/webgl/demos/clipping.html

@@ -9,7 +9,7 @@
 <body>
 
 <center>
-<div class="aspect"></div>
+<div class="aspect standalone"></div>
 <div id="clipping-playbutton"></div>
 <div id="clipping-timeline" class="slider"></div>
 <input id="clipping-drawtriangles" type="checkbox"></input> Draw triangles

spine-ts/webgl/demos/demos.css

@@ -29,6 +29,11 @@ canvas {
 	width: 100%;
 }
 
+.standalone {
+	width: 640px;
+	height: 480px;
+}
+
 .demo {
 	clear: both;
 }

spine-ts/webgl/demos/hoverboard.html

@@ -9,7 +9,7 @@
 <body>
 
 <center>
-<div class="aspect"></div>
+        <div class="aspect standalone"></div>
 <input id="hoverboard-drawbones" type="checkbox"></input> Display Bones<br>
 <input id="hoverboard-aim" type="checkbox"></input> Aim<br>
 <button id="hoverboard-shoot">Shoot</button>

spine-ts/webgl/demos/imagechanges.html

@@ -9,7 +9,7 @@
 <body>
 
 <center>
-<div class="aspect"></div>
+<div class="aspect standalone"></div>
 <div id="imagechanges-timeline" class="slider"></div>
 <input id="imagechanges-playbutton" type="button" value="Pause"></input><br>
 <select id="imagechanges-skeleton" size="2"></select>

spine-ts/webgl/demos/meshes.html

@@ -9,7 +9,7 @@
 <body>
 
 <center>
-<div class="aspect"></div>
+<div class="aspect standalone"></div>
 <div id="meshes-timeline" class="slider"></div>
 <input id="meshes-playbutton" type="button" value="Pause"></input><br>
 <select id="meshes-skeleton" size="3"></select><br>

spine-ts/webgl/demos/skins.html

@@ -9,7 +9,7 @@
 <body>
 
 <center>
-<div class="aspect"></div>
+<div class="aspect standalone"></div>
 <select id="skins-skin"></select><br>
 <button id="skins-randomizeattachments">Random Attachments</button>
 <button id="skins-swingsword">Swing Sword</button><br>

spine-ts/webgl/demos/spritesheets.html

@@ -9,7 +9,7 @@
 <body>
 
 <center>
-<div class="aspect"></div>
+<div class="aspect standalone"></div>
 <button id="spritesheets-roar">Roar</button>
 <button id="spritesheets-jump">Jump</button><br>
 Time multiplier

spine-ts/webgl/demos/stretchyman.html

@@ -9,7 +9,7 @@
 <body>
 
 <center>
-<div class="aspect"></div>
+<div class="aspect standalone"></div>
 <input id="stretchyman-drawbones" type="checkbox"></input> Display bones
 </center>
 

spine-ts/webgl/demos/tank.html

@@ -9,7 +9,7 @@
 <body>
 
 <center>
-<div class="aspect"></div>
+<div class="aspect standalone"></div>
 <div id="tank-timeline" class="slider"></div>
 <input id="tank-playbutton" type="button" value="Pause"></input><br>
 <input id="tank-drawbones" type="checkbox"></input> Display bones

spine-ts/webgl/demos/transforms.html

@@ -9,7 +9,7 @@
 <body>
 
 <center>
-<div class="aspect"></div>
+<div class="aspect standalone"></div>
 Rotation offset
 <div id="transforms-rotationoffset" class="slider filled"></div><br>
 Translation mix

spine-ts/webgl/demos/transitions.html

@@ -9,7 +9,7 @@
 <body>
 
 <center>
-<div class="aspect"></div>
+<div class="aspect standalone"></div>
 Time multiplier
 <div id="transitions-timeslider" class="slider filled"></div><br>
 <button id="transitions-die">Die</button>

spine-ts/webgl/demos/utils.js

@@ -8,6 +8,27 @@ var spineDemos = {
 	loopRunning: false,
 	canvases: []
 };
+
+window.onerror = function (msg, url, lineNo, columnNo, error) {
+    var string = msg.toLowerCase();
+    var substring = "script error";
+    if (string.indexOf(substring) > -1){
+        alert('Script Error: See Browser Console for Detail');
+    } else {
+        var message = [
+            'Message: ' + msg,
+            'URL: ' + url,
+            'Line: ' + lineNo,
+            'Column: ' + columnNo,
+            'Error object: ' + JSON.stringify(error)
+        ].join(' - ');
+
+        alert(message);
+    }
+
+    return false;
+};
+
 (function () {
 	var timeKeeper = new spine.TimeKeeper();
 	function loop () {
@@ -61,14 +82,19 @@ var spineDemos = {
 	function createCanvases (numCanvases) {
 		for (var i = 0; i < numCanvases; i++) {
 			var canvas = document.createElement("canvas");
+			canvas.width = 1; canvas.height = 1;
 			canvas.ctx = new spine.webgl.ManagedWebGLRenderingContext(canvas, { alpha: false });
-			canvas.id = "canvas-" + i;
+			canvas.id = "canvas-" + i;		
 			spineDemos.canvases.push(canvas);
 		}
 	}
 
 	spineDemos.init = function () {
-		createCanvases(4);
+		var numCanvases = 5;
+		var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+		var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1;
+		if (isFirefox && isAndroid) numCanvases = 2;
+		createCanvases(numCanvases);
 		loadSliders();
 		requestAnimationFrame(loop);
 	}

spine-ts/webgl/demos/vine.html

@@ -9,7 +9,7 @@
 <body>
 
 <center>
-<div class="aspect"></div>
+<div class="aspect standalone"></div>
 <div id="vine-timeline" class="slider"></div>
 <input id="vine-playbutton" type="button" value="Pause"></input><br>
 <input id="vine-drawbones" type="checkbox"></input> Display bones &amp; path