Merge pull request #69 from opulisDynamics/spine-ts

Fix WebGL Rendering not taking camera into account. Cleanup example.

build/phaser-spine.d.ts

@@ -105,6 +105,10 @@ declare module PhaserSpine {
             currentShader: PIXI.PrimitiveShader;
             _currentId: number;
         }
+        interface IPIXIRectangle extends PIXI.Rectangle {
+            centerX: number;
+            centerY: number;
+        }
     }
 }
 declare module PhaserSpine {
@@ -119,7 +123,7 @@ declare module PhaserSpine {
             private debugShader;
             private shapes;
             constructor(game: Phaser.Game);
-            resize(bounds: PIXI.Rectangle, position: Phaser.Point, scale2: Phaser.Point, renderSession: IRenderSession): void;
+            resize(skeleton: spine.Skeleton, spriteBounds: IPIXIRectangle, scale2: Phaser.Point, renderSession: IRenderSession): void;
             draw(skeleton: spine.Skeleton, renderSession: IRenderSession): void;
         }
     }

example/index.html

@@ -33,12 +33,9 @@
 var spines = {};
 var names = ['spineboy', 'goblins', 'raptor', 'stretchyman', 'tank', 'vine', 'buddy'];
 
-// var renderer = Phaser[location.href.split('?')[1]] || Phaser.AUTO
-
 var game = new Phaser.Game({
 	width: window.innerWidth,
 	height: window.innerWidth / 4 * 3,
-	// renderer: Phaser.AUTO,
 	renderer: Phaser[location.href.split('?')[1]] || Phaser.AUTO,
 	parent: 'content',
 	transparent: true,

ts/Spine.ts

@@ -92,7 +92,7 @@ module PhaserSpine {
                     return;
                 }
 
-                (<WebGL.Renderer>this.renderer).resize(this.specialBounds, this.position, this.scale, renderSession);
+                (<WebGL.Renderer>this.renderer).resize(this.skeleton, <WebGL.IPIXIRectangle>this.getBounds(), this.scale, renderSession);
                 (<WebGL.Renderer>this.renderer).draw(this.skeleton, renderSession);
             }
         }

ts/WebGL/IRenderSession.ts

@@ -24,5 +24,10 @@ module PhaserSpine {
         	currentShader: PIXI.PrimitiveShader;
         	_currentId: number;
         }
+
+        export interface IPIXIRectangle extends PIXI.Rectangle {
+        	centerX: number;
+        	centerY: number;
+        }
     }
 }

ts/WebGL/Renderer.ts

@@ -37,24 +37,25 @@ module PhaserSpine {
                 this.shapes = new spine.webgl.ShapeRenderer(gl);
             }
 
-            public resize(bounds: PIXI.Rectangle, position: Phaser.Point, scale2: Phaser.Point, renderSession: IRenderSession): void {
+            public resize(skeleton: spine.Skeleton, spriteBounds: IPIXIRectangle, scale2: Phaser.Point, renderSession: IRenderSession): void {
                 var w = this.game.width;
                 var h = this.game.height;
-                var res = this.game.resolution;
+                var res = renderSession.resolution;
+
+                skeleton.flipX = scale2.x < 0;
+                skeleton.flipY = scale2.y < 0;
 
                 var scale = Math.max(scale2.x, scale2.y);
 
-                var signs = {
-                    x: scale2.x < 0 ? -1 : 1,
-                    y: scale2.y < 0 ? -1 : 1
-                }
+                var width = w / scale;
+                var height = h / scale;
+                var centerX = - spriteBounds.centerX;
+                var centerY = (-h + spriteBounds.centerY) * res + spriteBounds.height / 2;
 
-                var x = - position.x / scale * signs.x * res,
-                        y = (position.y - h) / scale * signs.y * res + bounds.height / 2,
-                        width = w / scale * signs.x * res,
-                        height = h / scale * signs.y * res;
+                var x = centerX / scale;
+                var y = centerY / scale;
 
-                this.mvp.ortho2d(x, y, width, height);
+                this.mvp.ortho2d(x * res, y, width * res, height * res);
                 renderSession.gl.viewport(0, 0, w * res, h * res);
             }