[#854] some further fix (see description)

- panel position, and bounding box drawing (now that "preDraw" functions
are already translating to the correct coordinates, we don't need to do
it again in the debugPanel)
- entity position, but this is still wrong in some cases, probably
because anchorPoint are not set or set somewhere else (Tiled vs the
world). Also entity in Tild use (0, 0), but Tile Object use (0,
tileheight).

plugins/debug/debugPanel.js

@@ -260,6 +260,8 @@
 
             //patch patch patch !
             this.patchSystemFn();
+
+            this.anchorPoint.set(0, 0);
         },
 
         /**
@@ -322,14 +324,11 @@
                 // draw the sprite rectangle
                 if (me.debug.renderHitBox) {
                     var bounds = this.getBounds();
-                    var x = - (this.anchorPoint.x * this.width) - ((bounds.width - this.width) / 2);
-                    var y = - (this.anchorPoint.y * this.height) - ((bounds.height - this.height) / 2);
+                    var color  = renderer.getColor();
 
-                    renderer.save();
                     renderer.setColor("green");
-                    renderer.translate(x, y);
                     renderer.drawShape(bounds);
-                    renderer.restore();
+                    renderer.setColor(color);
                 }
             });
 
@@ -408,14 +407,14 @@
                     bounds.copy(this.getBounds());
                     bounds.pos.sub(this.ancestor._absPos);
                     // draw entity current velocity
-                    var x = ~~(bounds.pos.x + (bounds.width / 2));
-                    var y = ~~(bounds.pos.y + (bounds.height / 2));
+                    var x = bounds.width / 2;
+                    var y = bounds.height / 2;
 
                     renderer.save();
                     renderer.setLineWidth(1);
 
                     renderer.setColor("blue");
-                    renderer.translate(x, y);
+                    renderer.translate(-x, -y);
                     renderer.strokeLine(0, 0, ~~(this.body.vel.x * (bounds.width / 2)), ~~(this.body.vel.y * (bounds.height / 2)));
                     _this.counters.inc("velocity");
 

src/entity/entity.js

@@ -149,7 +149,8 @@
             // disable for entities
             this.autoTransform = false;
 
-            // tiled default coordinates are top-left
+            // Tiled used top-left coordinates
+            this.anchorPoint.set(0, 0);
         },
 
         /**
@@ -263,6 +264,29 @@
             bounds.resize(w, h);
         },
 
+        preDraw : function (renderer) {
+            if (this.renderable) {
+                // 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
+                var ax = this.anchorPoint.x * this.body.width,
+                    ay = this.anchorPoint.y * this.body.height;
+
+                var x = this.pos.x + this.body.pos.x + ax,
+                    y = this.pos.y + this.body.pos.y + ay;
+
+                renderer.save();
+
+                renderer.translate(x, y);
+            }
+        },
+
+        postDraw : function (renderer) {
+            if (this.renderable) {
+                renderer.restore();
+            }
+        },
+
         /**
          * object draw<br>
          * not to be called by the end user<br>