✨ Add global transform to Oject2Ds

pandora/game_objects/2d_objects/AnimatedSprite2D.js

@@ -201,6 +201,23 @@ class AnimatedSprite2D extends Sprite2D
      */
     update(delta)
     {
+        // Update global transform.
+        if (!this.parented || !(this.parent instanceof Object2D))
+        {
+            this.globalPosition = this.position;
+            this.globalRotationDegrees = this.rotationDegrees;
+            this.globalScale = this.globalScale;
+        }
+        else
+        {
+            this.globalPosition.x = this.parent.globalPosition.x + this.position.x;
+            this.globalPosition.y = this.parent.globalPosition.y + this.position.y;
+            this.globalRotationDegrees = this.parent.globalRotationDegrees + this.rotationDegrees;
+            this.globalScale.x = this.parent.globalScale.x + this.scale.x;
+            this.globalScale.y = this.parent.globalScale.y + this.scale.y;
+        }
+
+        // Forwards the animation.
         if (this.playing)
         {
             this.timeSinceLastFrame += delta;
@@ -210,8 +227,9 @@ class AnimatedSprite2D extends Sprite2D
                 this.timeSinceLastFrame = 0;
             }
         }
-
         this.P5Image = this.getCurrentFrame();
+
+        // Callbacks
         this._update(delta);
         for (let i = 0; i < this.children.length; i++)
             this.children[i].update(delta);

pandora/game_objects/2d_objects/Area2D.js

@@ -94,9 +94,26 @@ class Area2D extends Object2D
      */
     update(delta)
     {
+        // Updates global transform
+        if (!this.parented || !(this.parent instanceof Object2D))
+        {
+            this.globalPosition = this.position;
+            this.globalRotationDegrees = this.rotationDegrees;
+            this.globalScale = this.globalScale;
+        }
+        else
+        {
+            this.globalPosition.x = this.parent.globalPosition.x + this.position.x;
+            this.globalPosition.y = this.parent.globalPosition.y + this.position.y;
+            this.globalRotationDegrees = this.parent.globalRotationDegrees + this.rotationDegrees;
+            this.globalScale.x = this.parent.globalScale.x + this.scale.x;
+            this.globalScale.y = this.parent.globalScale.y + this.scale.y;
+        }
+
+        // Checks collision with mouse
         if (this.listenToMouse)
         {
-            if (this.shape.isIn(GameHandler.mouseX - this.position.x, GameHandler.mouseY - this.position.y))
+            if (this.shape.isIn(GameHandler.mouseX - this.globalPosition.x, GameHandler.mouseY - this.globalPosition.y))
             {
                 if (!this.mouseIn)
                     this.emitSignal("mouseEntered");
@@ -110,6 +127,7 @@ class Area2D extends Object2D
             }
         }
 
+        // Callbacks
         this._update(delta);
         for (let i = 0; i < this.children.length; i++)
             this.children[i].update(delta);

pandora/game_objects/2d_objects/Object2D.js

@@ -48,6 +48,10 @@ class Object2D extends GameObject
         this.rotationDegrees = 0; // This Object2D's rotation degrees on the secondary buffer.
         this.scale = Vector2.ONE(); // This Object2D's scale on the secondary buffer.
         this.visible = true; // Is this Object2D visible at the moment?
+
+        this.globalPosition = Vector2.ZERO(); // This Object2D's global position on the secondary buffer.
+        this.globalRotationDegrees = 0; // This Object2D's global rotation degrees on the secondary buffer.
+        this.globalScale = Vector2.ONE(); // This Object2D's global scale on the secondary buffer.
     }
 
     /**
@@ -119,6 +123,40 @@ class Object2D extends GameObject
         return this.visible;
     }
 
+    /**
+     * Updates this Object2D's global transform and recursively calls the _update(delta)
+     * callback for this GameObject and all of it's children.
+     * 
+     * @param {number} delta    number of ellapsed seconds since the last frame.
+     * 
+     * @override
+     */
+    update(delta)
+    {
+        // Update global transform
+        if (!this.parented || !(this.parent instanceof Object2D))
+        {
+            this.globalPosition = this.position;
+            this.globalRotationDegrees = this.rotationDegrees;
+            this.globalScale = this.globalScale;
+        }
+        else
+        {
+            this.globalPosition.x = this.parent.globalPosition.x + this.position.x;
+            this.globalPosition.y = this.parent.globalPosition.y + this.position.y;
+            this.globalRotationDegrees = this.parent.globalRotationDegrees + this.rotationDegrees;
+            this.globalScale.x = this.parent.globalScale.x + this.scale.x;
+            this.globalScale.y = this.parent.globalScale.y + this.scale.y;
+        }
+
+        // Callbacks
+        this._update(delta);
+        for (let i = 0; i < this.children.length; i++)
+        {
+            this.children[i].update(delta);
+        }
+    }
+
     /**
      * Applies this Object2D's transform before calling this GameObject's _draw() callback
      * and recursively calls the same callback on all of it's children. This results in the

src/sketch.js

@@ -1,11 +1,11 @@
-let test, but;
+let test, test2, but;
 
-class TestObj extends GameObject
+class TestObj extends Object2D
 {
     _setup()
     {
-        this.getParent().connect("mouseEntered", this, "_onMouseEntered");
-        this.getParent().connect("mouseExited", this, "_onMouseExited");
+        this.getChildByIndex(0).connect("mouseEntered", this, "_onMouseEntered");
+        this.getChildByIndex(0).connect("mouseExited", this, "_onMouseExited");
     }
 
     _onMouseEntered()
@@ -34,7 +34,8 @@ GameHandler._setup = function()
     textFont(AssetHandler.getP5FontByName("Lato"));
 
     test = new Area2D("myTest", SHAPES.ELLIPSE, new Ellipse(200, 400), true, true);
-    test.setPosition(600, 600);
-    GameHandler.addRootObject(test);
-    test.addChild(new TestObj("myDummy"));
+    test2 = new TestObj("myDummy");
+    test2.setPosition(600, 600);
+    test2.addChild(test);
+    GameHandler.addRootObject(test2);
 }