So the Canvas renderer now appears to correct adhere to positioning/a…

…nchoring.

By default the anchor of the Spine is set to the rootbone location, this can be overwritten and also reset with resetAnchorToRootBonePosition().

Refs #72

build/phaser-spine.d.ts

@@ -109,6 +109,7 @@ declare module PhaserSpine {
         setSkinByName(skinName: string): void;
         setSkin(skin: spine.Skin): void;
         setToSetupPose(): void;
+        resetAnchorToRootBonePosition(): void;
         createCombinedSkin(newSkinName: string, ...skinNames: string[]): spine.Skin;
     }
 }

example/goblins.html

@@ -18,7 +18,7 @@
 
     var buddy, game;
 
-    game = new Phaser.Game(400, 400, Phaser.CANVAS, '', {init: init, preload: preload, create: create});
+    game = new Phaser.Game(400, 400, Phaser.CANVAS, '', {init: init, preload: preload, create: create, render: render});
 
     function init() {
         this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
@@ -27,7 +27,7 @@
     function preload() {
         game.plugins.add(PhaserSpine.SpinePlugin, {
             triangleRendering: true,
-            debugRendering: true
+            debugRendering: false
         });
         game.stage.disableVisibilityChange = true;
 
@@ -38,7 +38,7 @@
 
     function create() {
         //create the spine object
-        goblin = game.add.spine(200, 200, "goblin");
+        goblin = game.add.spine(200, 400, "goblin");
         goblin.setAnimationByName(0, "walk", true);
         goblin.setSkinByName("goblin");
         goblin.setToSetupPose();
@@ -54,6 +54,11 @@
             goblin.setToSetupPose();
         });
     }
+
+    function render() {
+//        game.debug.spriteBounds(goblin);
+//        game.debug.spriteInfo(goblin, 20, 20);
+    }
 </script>
 
 </body>

example/spineboy.html

@@ -37,8 +37,8 @@
 
     function create() {
         //create the spine object
-        spineboy = game.add.spine(200, 200, "spineboy", true);
-//        spineboy.scale.set(0.5);
+        spineboy = game.add.spine(200, 400, "spineboy", true);
+        spineboy.scale.set(0.5);
         // set up the mixes!
         spineboy.setMixByName("run", "jump", 0.2);
         spineboy.setMixByName("jump", "run", 0.4);

ts/Canvas/Renderer.ts

@@ -22,43 +22,25 @@ module PhaserSpine {
             }
 
             public resize(phaserSpine: Spine,  renderSession: IRenderSession): void {
-                // let res = renderSession.resolution;
-                // let scale = phaserSpine.scale;
-                let bounds = phaserSpine.getBounds();
-
-                // magic
-                var centerX = phaserSpine.offset.x + phaserSpine.size.x / 2;
-                var centerY = phaserSpine.offset.y + phaserSpine.size.y / 2;
-                var scaleX = phaserSpine.size.x / this.game.width;
-                var scaleY = phaserSpine.size.y / this.game.height;
-                var scale = 1;
-                if (scale < 1) scale = 1;
-                var width = this.game.width * scale;
-                var height = this.game.height * scale;
-                renderSession.context.setTransform(1, 0, 0, 1, 0, 0);
-                renderSession.context.scale(1 / scale, 1 / scale);
+                let res = renderSession.resolution;
+                let scale = phaserSpine.scale;
+                let offset = phaserSpine.offset;
+                let anchor = phaserSpine.anchor;
+                let position = phaserSpine.position;
 
-                //Offset to spine's rootbone position
-                renderSession.context.translate(-centerX, -centerY);
+                renderSession.context.setTransform(1, 0, 0, 1, 0, 0);
 
                 //Offset to Phaser's position
-                renderSession.context.translate(bounds.x, bounds.y);
-
-                //Calculate the x/y positions
-                //
-                // renderSession.context.setTransform(1, 0, 0, 1, 0, 0);;
-                // //Scale the animation
-                // renderSession.context.scale(scale.x * res, scale.y * res);
-                // //Offset to model's center
-                // renderSession.context.translate(
-                //     phaserSpine.offset.x + phaserSpine.size.x / 2,
-                //     phaserSpine.offset.y + phaserSpine.size.y / 2
-                // );
-                // // if(res > 1){
-                // //     renderSession.context.translate(0, bounds.height / scale.y / res / 2);
-                // // }
-                // //Offset to center of screen
-                // renderSession.context.translate(this.game.width / 2, this.game.height / 2);
+                renderSession.context.translate(position.x, position.y);
+
+                //Offset to spine's rootbone position taking anchor in account
+                renderSession.context.translate(
+                    -(offset.x * scale.x + phaserSpine.width * anchor.x),
+                    -(offset.y * scale.y + phaserSpine.height * anchor.y)
+                );
+
+                //Now adjust for scale, let's not include Phaser.Bounds translations because it already takes scale into account
+                renderSession.context.scale(scale.x * res, scale.y * res);
             }
 
             public drawImages (phaserSpine: Spine, renderSession: IRenderSession) {

ts/Spine.ts

@@ -79,6 +79,8 @@ module PhaserSpine {
             } else {
                 this.renderer = new PhaserSpine.WebGL.Renderer(this.game);
             }
+
+            this.resetAnchorToRootBonePosition();
         }
 
         public destroy(destroyChildren: boolean): void {
@@ -277,6 +279,13 @@ module PhaserSpine {
             this.skeleton.setToSetupPose();
         }
 
+        public resetAnchorToRootBonePosition(): void {
+            this.anchor.set(
+                Math.abs(this.offset.x) / this.size.x,
+                Math.abs(this.offset.y) / this.size.y
+            );
+        }
+
         /**
          * You can combine skins here by supplying a name for the new skin, and then a nummer of existing skins names that needed to be combined in the new skin
          * If the skins that will be combined contain any double attachment, only the first attachment will be added to the newskin.