added sprite offsets relative to centre of mass, closes #153

Author: liabru

src/body/Body.js

@@ -75,7 +75,9 @@ var Axes = require('../geometry/Axes');
                 visible: true,
                 sprite: {
                     xScale: 1,
-                    yScale: 1
+                    yScale: 1,
+                    xOffset: 0,
+                    yOffset: 0
                 },
                 lineWidth: 1.5
             }
@@ -151,6 +153,8 @@ var Axes = require('../geometry/Axes');
             defaultStrokeStyle = Common.shadeColor(defaultFillStyle, -20);
         body.render.fillStyle = body.render.fillStyle || defaultFillStyle;
         body.render.strokeStyle = body.render.strokeStyle || defaultStrokeStyle;
+        body.render.sprite.xOffset += -(body.bounds.min.x - body.position.x) / (body.bounds.max.x - body.bounds.min.x);
+        body.render.sprite.yOffset += -(body.bounds.min.y - body.position.y) / (body.bounds.max.y - body.bounds.min.y);
     };
 
     /**
@@ -1025,6 +1029,22 @@ var Axes = require('../geometry/Axes');
      * @default 1
      */
 
+     /**
+      * A `Number` that defines the offset in the x-axis for the sprite (normalised by texture width).
+      *
+      * @property render.sprite.xOffset
+      * @type number
+      * @default 0
+      */
+
+     /**
+      * A `Number` that defines the offset in the y-axis for the sprite (normalised by texture height).
+      *
+      * @property render.sprite.yOffset
+      * @type number
+      * @default 0
+      */
+
     /**
      * A `Number` that defines the line width to use when rendering the body outline (if a sprite is not defined).
      * A value of `0` means no outline will be rendered.

src/render/Render.js

@@ -445,8 +445,13 @@ var Vector = require('../geometry/Vector');
                     c.translate(part.position.x, part.position.y); 
                     c.rotate(part.angle);
 
-                    c.drawImage(texture, texture.width * -0.5 * sprite.xScale, texture.height * -0.5 * sprite.yScale, 
-                                texture.width * sprite.xScale, texture.height * sprite.yScale);
+                    c.drawImage(
+                        texture,
+                        texture.width * -sprite.xOffset * sprite.xScale, 
+                        texture.height * -sprite.yOffset * sprite.yScale, 
+                        texture.width * sprite.xScale, 
+                        texture.height * sprite.yScale
+                    );
 
                     // revert translation, hopefully faster than save / restore
                     c.rotate(-part.angle);

src/render/RenderPixi.js

@@ -360,8 +360,8 @@ var Common = require('../core/Common');
             texture = _getTexture(render, texturePath),
             sprite = new PIXI.Sprite(texture);
 
-        sprite.anchor.x = 0.5;
-        sprite.anchor.y = 0.5;
+        sprite.anchor.x = body.render.sprite.xOffset;
+        sprite.anchor.y = body.render.sprite.yOffset;
 
         return sprite;
     };