#834 align entity anchor point coordinates with (all) other renderables

examples/platformer/data/map/map1.tmx

@@ -1,16 +1,16 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<map version="1.0" orientation="orthogonal" renderorder="left-down" width="50" height="30" tilewidth="35" tileheight="35" backgroundcolor="#d0f4f7" nextobjectid="36">
+<map version="1.0" orientation="orthogonal" renderorder="left-down" width="50" height="30" tilewidth="35" tileheight="35" backgroundcolor="#d0f4f7" nextobjectid="37">
  <tileset firstgid="1" source="tileset.tsx"/>
  <imagelayer name="Background" y="538" offsetx="0" offsety="538">
-  <image source="../img/background.png"/>
+  <image source="../img/background.png" width="1024" height="512"/>
   <properties>
    <property name="anchorPoint" value="json:{&quot;x&quot;:0,&quot;y&quot;:1}"/>
    <property name="ratio" value="0.25"/>
    <property name="repeat" value="repeat-x"/>
   </properties>
  </imagelayer>
  <imagelayer name="Clouds" y="128" offsetx="0" offsety="128">
-  <image source="../img/clouds.png"/>
+  <image source="../img/clouds.png" width="512" height="512"/>
   <properties>
    <property name="ratio" value="0.5"/>
    <property name="repeat" value="repeat-x"/>
@@ -37,13 +37,13 @@
   </object>
   <object id="25" name="me.Entity" gid="46" x="910" y="1050" width="70" height="70">
    <properties>
-    <property name="anchorPoint" value="json:{&quot;x&quot;:0.5,&quot;y&quot;:1}"/>
+    <property name="anchorPoint" value="json:{&quot;x&quot;:0.0,&quot;y&quot;:0.35}"/>
     <property name="shapes" value="eval:[new me.Rect(0,35,70,35)]"/>
    </properties>
   </object>
-  <object id="26" name="me.Entity" gid="2147483694" x="770" y="1050" width="70" height="70">
+  <object id="26" name="me.Entity" gid="46" x="770" y="1050" width="70" height="70">
    <properties>
-    <property name="anchorPoint" value="json:{&quot;x&quot;:0.5,&quot;y&quot;:1}"/>
+    <property name="anchorPoint" value="json:{&quot;x&quot;:0.0,&quot;y&quot;:0.35}"/>
     <property name="shapes" value="eval:[new me.Rect(0,35,70,35)]"/>
    </properties>
   </object>

examples/platformer/js/entities/coin.js

@@ -11,7 +11,7 @@ game.CoinEntity = me.CollectableEntity.extend({
         this.renderable = game.texture.createSpriteFromName("coin.png");
 
         // set the renderable position to center
-        this.anchorPoint.set(0.5, 0.5);
+        this.renderable.anchorPoint.set(0.0, 0.0);
     },
 
     /**

examples/platformer/js/entities/enemies.js

@@ -43,6 +43,9 @@ game.PathEnemyEntity = me.Entity.extend({
 
         // a specific flag to recognize these enemies
         this.isMovingEnemy = true;
+
+        // set the renderable position to bottom center
+        this.anchorPoint.set(0.5, -0.25);
     },
 
 
@@ -129,10 +132,6 @@ game.SlimeEnemyEntity = game.PathEnemyEntity.extend({
 
         // set default one
         this.renderable.setCurrentAnimation("walk");
-
-        // set the renderable position to bottom center
-        this.anchorPoint.set(0.5, 1.0);
-
     }
 });
 
@@ -165,8 +164,5 @@ game.FlyEnemyEntity = game.PathEnemyEntity.extend({
 
         // set default one
         this.renderable.setCurrentAnimation("walk");
-
-        // set the renderable position to bottom center
-        this.anchorPoint.set(0.5, 1.0);
     }
 });

examples/platformer/js/entities/player.js

@@ -56,7 +56,7 @@ game.PlayerEntity = me.Entity.extend({
         this.renderable.setCurrentAnimation("walk");
 
         // set the renderable position to bottom center
-        this.anchorPoint.set(0.5, 1.0);
+        this.anchorPoint.set(0.5, 0.5);
     },
 
     /* -----

plugins/debug/debugPanel.js

@@ -379,16 +379,15 @@
 
                         if (this.renderable instanceof me.Renderable) {
                             renderer.translate(
-                                -this.anchorPoint.x * this.body.width,
-                                -this.anchorPoint.y * this.body.height
+                                this.anchorPoint.x * this.body.width,
+                                this.anchorPoint.y * this.body.height
                             );
                         }
 
                         // draw the bounding rect shape
                         renderer.setColor("orange");
                         renderer.drawShape(this.getBounds());
 
-
                         renderer.translate(
                             this.pos.x +  this.ancestor._absPos.x,
                             this.pos.y +  this.ancestor._absPos.y

src/entity/entity.js

@@ -271,12 +271,13 @@
             );
 
             if (this.renderable instanceof me.Renderable) {
+                var bounds = this.getBounds();
                 // draw the child renderable's anchorPoint at the entity's
                 // anchor point.  the entity's anchor point is a scale from
                 // body position to body width/height
                 renderer.translate(
-                    this.anchorPoint.x * this.body.width,
-                    this.anchorPoint.y * this.body.height
+                    -this.anchorPoint.x * bounds.width,
+                    -this.anchorPoint.y * bounds.height
                 );
             }
         },

src/video/canvas/texture.js

@@ -174,7 +174,10 @@
                     atlas[frame.filename] = {
                         name         : frame.filename, // frame name
                         offset       : new me.Vector2d(s.x, s.y),
-                        anchorPoint  : (hasTextureAnchorPoint) ? new me.Vector2d(originX / s.w, originY / s.h) : null,
+                        anchorPoint  : (hasTextureAnchorPoint) ? new me.Vector2d(
+                                        Math.abs(1 - (originX / s.w)),
+                                        Math.abs(1 - (originY / s.h))
+                                       ) : null,
                         width        : s.w,
                         height       : s.h,
                         angle        : (frame.rotated === true) ? nhPI : 0