Added ability to detect if a given point is within a sprite or not, taking rotation and scaling into account.

Author: photonstorm

Phaser/components/Transform.ts

@@ -10,8 +10,8 @@ module Phaser.Components {
     export class Transform {
 
         /**
-         * Creates a new Sprite Transform component
-         * @param parent The Sprite using this transform
+         * Creates a new Transform component
+         * @param parent The game object using this transform
          */
         constructor(parent) {
 
@@ -57,14 +57,39 @@ module Phaser.Components {
         private _distance: number;
         private _prevRotation: number;
 
+        /**
+         * The center of the Sprite in world coordinates, after taking scaling and rotation into consideration
+         */
         public center: Phaser.Point;
+
+        /**
+         * The upper-left corner of the Sprite in world coordinates, after taking scaling and rotation into consideration
+         */
         public upperLeft: Phaser.Point;
+
+        /**
+         * The upper-right corner of the Sprite in world coordinates, after taking scaling and rotation into consideration
+         */
         public upperRight: Phaser.Point;
+
+        /**
+         * The bottom-left corner of the Sprite in world coordinates, after taking scaling and rotation into consideration
+         */
         public bottomLeft: Phaser.Point;
+
+        /**
+         * The bottom-right corner of the Sprite in world coordinates, after taking scaling and rotation into consideration
+         */
         public bottomRight: Phaser.Point;
 
+        /**
+         * The local transform matrix
+         */
         public local: Mat3;
 
+        /**
+         * Populates the transform cache. Called by the parent object on creation.
+         */
         public setCache() {
 
             this._pos.x = this.parent.x;
@@ -96,14 +121,22 @@ module Phaser.Components {
                 this._sc.y = 1;
             }
 
-            this.center.setTo(this.center.x, this.center.y);
+            this.center.x = this.parent.x + this._distance * this._scA.y;
+            this.center.y = this.parent.y + this._distance * this._scA.x;
+
             this.upperLeft.setTo(this.center.x - this._halfSize.x * this._sc.y + this._halfSize.y * this._sc.x, this.center.y - this._halfSize.y * this._sc.y - this._halfSize.x * this._sc.x);
             this.upperRight.setTo(this.center.x + this._halfSize.x * this._sc.y + this._halfSize.y * this._sc.x, this.center.y - this._halfSize.y * this._sc.y + this._halfSize.x * this._sc.x);
             this.bottomLeft.setTo(this.center.x - this._halfSize.x * this._sc.y - this._halfSize.y * this._sc.x, this.center.y + this._halfSize.y * this._sc.y - this._halfSize.x * this._sc.x);
             this.bottomRight.setTo(this.center.x + this._halfSize.x * this._sc.y - this._halfSize.y * this._sc.x, this.center.y + this._halfSize.y * this._sc.y + this._halfSize.x * this._sc.x);
 
+            this._pos.x = this.parent.x;
+            this._pos.y = this.parent.y;
+
         }
 
+        /**
+         * Updates the local transform matrix and the cache values if anything has changed in the parent.
+         */
         public update() {
 
             //  Check cache
@@ -156,8 +189,6 @@ module Phaser.Components {
                 this.center.x = this.parent.x + this._distance * this._scA.y;
                 this.center.y = this.parent.y + this._distance * this._scA.x;
 
-                this.center.setTo(this.center.x, this.center.y);
-
                 this.upperLeft.setTo(this.center.x - this._halfSize.x * this._sc.y + this._halfSize.y * this._sc.x, this.center.y - this._halfSize.y * this._sc.y - this._halfSize.x * this._sc.x);
                 this.upperRight.setTo(this.center.x + this._halfSize.x * this._sc.y + this._halfSize.y * this._sc.x, this.center.y - this._halfSize.y * this._sc.y + this._halfSize.x * this._sc.x);
                 this.bottomLeft.setTo(this.center.x - this._halfSize.x * this._sc.y - this._halfSize.y * this._sc.x, this.center.y + this._halfSize.y * this._sc.y - this._halfSize.x * this._sc.x);
@@ -282,23 +313,15 @@ module Phaser.Components {
         }
 
         /**
-         * The center of the Sprite in world coordinates, after taking scaling and rotation into consideration
-         */
-        //public get centerX(): number {
-        //    return this.center.x;
-        //}
-
-        /**
-         * The center of the Sprite in world coordinates, after taking scaling and rotation into consideration
+         * The equivalent of Math.sin(rotation + rotationOffset)
          */
-        //public get centerY(): number {
-        //    return this.center.y;
-        //}
-
         public get sin(): number {
             return this._sc.x;
         }
 
+        /**
+         * The equivalent of Math.cos(rotation + rotationOffset)
+         */
         public get cos(): number {
             return this._sc.y;
         }

Phaser/renderers/CanvasRenderer.ts

@@ -221,8 +221,7 @@ module Phaser {
                 return true;
             }
 
-            return true;
-            //return RectangleUtils.intersects(sprite.cameraView, camera.screenView);
+            return RectangleUtils.intersects(sprite.cameraView, camera.screenView);
 
         }
 

Phaser/utils/SpriteUtils.ts

@@ -60,42 +60,11 @@ module Phaser {
                 }
                 else
                 {
-                    //var left:Number = Math.min(topLeft.x, topRight.x, bottomRight.x, bottomLeft.x);
-                    //var top:Number = Math.min(topLeft.y, topRight.y, bottomRight.y, bottomLeft.y);
-                    //var right:Number = Math.max(topLeft.x, topRight.x, bottomRight.x, bottomLeft.x);
-                    //var bottom:Number = Math.max(topLeft.y, topRight.y, bottomRight.y, bottomLeft.y);
-                    //return new Rectangle(left, top, right - left, bottom - top);
-
-                    var minX: number = Math.min(sprite.transform.upperLeft.x, sprite.transform.upperRight.x, sprite.transform.bottomLeft.x, sprite.transform.bottomRight.x);
-                    var minY: number = Math.min(sprite.transform.upperLeft.y, sprite.transform.upperRight.y, sprite.transform.bottomLeft.y, sprite.transform.bottomRight.y);
-                    var maxX: number = Math.max(sprite.transform.upperLeft.x, sprite.transform.upperRight.x, sprite.transform.bottomLeft.x, sprite.transform.bottomRight.x);
-                    var maxY: number = Math.max(sprite.transform.upperLeft.y, sprite.transform.upperRight.y, sprite.transform.bottomLeft.y, sprite.transform.bottomRight.y);
-
-                    //  (min_x,min_y), (min_x,max_y), (max_x,max_y), (max_x,min_y)
-
-                    sprite.cameraView.x = minX;
-                    sprite.cameraView.y = minY;
-                    sprite.cameraView.width = maxX - minX;
-                    sprite.cameraView.height = maxY - minY;
-
-                    /*
-                        //  Useful to get the maximum AABB size of any given rect
-
-                        If you want a single box that covers all angles, just take the half-diagonal of your existing box as the radius of a circle.
-                        The new box has to contain this circle, so it should be a square with side-length equal to twice the radius 
-                        (equiv. the diagonal of the original AABB) and with the same center as the original.
-                    */
-
+                    sprite.cameraView.x = Math.min(sprite.transform.upperLeft.x, sprite.transform.upperRight.x, sprite.transform.bottomLeft.x, sprite.transform.bottomRight.x);
+                    sprite.cameraView.y = Math.min(sprite.transform.upperLeft.y, sprite.transform.upperRight.y, sprite.transform.bottomLeft.y, sprite.transform.bottomRight.y);
+                    sprite.cameraView.width = Math.max(sprite.transform.upperLeft.x, sprite.transform.upperRight.x, sprite.transform.bottomLeft.x, sprite.transform.bottomRight.x) - sprite.cameraView.x;
+                    sprite.cameraView.height = Math.max(sprite.transform.upperLeft.y, sprite.transform.upperRight.y, sprite.transform.bottomLeft.y, sprite.transform.bottomRight.y) - sprite.cameraView.y;
                 }
-
-            }
-
-            if (sprite.animations.currentFrame !== null && sprite.animations.currentFrame.trimmed)
-            {
-                //sprite.cameraView.x += sprite.animations.currentFrame.spriteSourceSizeX;
-                //sprite.cameraView.y += sprite.animations.currentFrame.spriteSourceSizeY;
-                //this._dw = sprite.animations.currentFrame.spriteSourceSizeW;
-                //this._dh = sprite.animations.currentFrame.spriteSourceSizeH;
             }
 
             return sprite.cameraView;
@@ -174,92 +143,60 @@ module Phaser {
         }
         */
 
+
         /**
-        * Checks to see if this <code>GameObject</code> were located at the given position, would it overlap the <code>GameObject</code> or <code>Group</code>?
-        * This is distinct from overlapsPoint(), which just checks that point, rather than taking the object's size numbero account.
-        * WARNING: Currently tilemaps do NOT support screen space overlap checks!
+        * Checks to see if the given x and y coordinates overlaps this <code>Sprite</code>, taking scaling and rotation into account.
+        * The coordinates must be given in world space, not local or camera space.
         *
-        * @param X {number} The X position you want to check.  Pretends this object (the caller, not the parameter) is located here.
-        * @param Y {number} The Y position you want to check.  Pretends this object (the caller, not the parameter) is located here.
-        * @param objectOrGroup {object} The object or group being tested.
-        * @param inScreenSpace {boolean} Whether to take scroll factors numbero account when checking for overlap.  Default is false, or "only compare in world space."
-        * @param camera {Camera} Specify which game camera you want.  If null getScreenXY() will just grab the first global camera.
+        * @param sprite {Sprite} The Sprite to check. It will take scaling and rotation into account.
+        * @param x {Number} The x coordinate in world space.
+        * @param y {Number} The y coordinate in world space.
         *
-        * @return {boolean} Whether or not the two objects overlap.
+        * @return   Whether or not the point overlaps this object.
         */
-        /*
-        static overlapsAt(X: number, Y: number, objectOrGroup, inScreenSpace: bool = false, camera: Camera = null): bool {
+        static overlapsXY(sprite: Phaser.Sprite, x: number, y: number): bool {
 
-            if (objectOrGroup.isGroup)
+            //  if rotation == 0 then just do a rect check instead!
+            if (sprite.transform.rotation == 0)
             {
-                var results: bool = false;
-                var basic;
-                var i: number = 0;
-                var members = objectOrGroup.members;
-
-                while (i < length)
-                {
-                    if (this.overlapsAt(X, Y, members[i++], inScreenSpace, camera))
-                    {
-                        results = true;
-                    }
-                }
+                return Phaser.RectangleUtils.contains(sprite.cameraView, x, y);
+            }
 
-                return results;
+            if ((x - sprite.transform.upperLeft.x) * (sprite.transform.upperRight.x - sprite.transform.upperLeft.x) + (y - sprite.transform.upperLeft.y) * (sprite.transform.upperRight.y - sprite.transform.upperLeft.y) < 0)
+            {
+                return false;
             }
 
-            if (!inScreenSpace)
+            if ((x - sprite.transform.upperRight.x) * (sprite.transform.upperRight.x - sprite.transform.upperLeft.x) + (y - sprite.transform.upperRight.y) * (sprite.transform.upperRight.y - sprite.transform.upperLeft.y) > 0)
             {
-                return (objectOrGroup.x + objectOrGroup.width > X) && (objectOrGroup.x < X + this.width) &&
-                        (objectOrGroup.y + objectOrGroup.height > Y) && (objectOrGroup.y < Y + this.height);
+                return false;
             }
 
-            if (camera == null)
+            if ((x - sprite.transform.upperLeft.x) * (sprite.transform.bottomLeft.x - sprite.transform.upperLeft.x) + (y - sprite.transform.upperLeft.y) * (sprite.transform.bottomLeft.y - sprite.transform.upperLeft.y) < 0)
             {
-                camera = this._game.camera;
+                return false;
             }
 
-            var objectScreenPos: Point = objectOrGroup.getScreenXY(null, Camera);
+            if ((x - sprite.transform.bottomLeft.x) * (sprite.transform.bottomLeft.x - sprite.transform.upperLeft.x) + (y - sprite.transform.bottomLeft.y) * (sprite.transform.bottomLeft.y - sprite.transform.upperLeft.y) > 0)
+            {
+                return false;
+            }
 
-            this._point.x = X - camera.scroll.x * this.transform.scrollFactor.x; //copied from getScreenXY()
-            this._point.y = Y - camera.scroll.y * this.transform.scrollFactor.y;
-            this._point.x += (this._point.x > 0) ? 0.0000001 : -0.0000001;
-            this._point.y += (this._point.y > 0) ? 0.0000001 : -0.0000001;
+            return true;
 
-            return (objectScreenPos.x + objectOrGroup.width > this._point.x) && (objectScreenPos.x < this._point.x + this.width) &&
-                (objectScreenPos.y + objectOrGroup.height > this._point.y) && (objectScreenPos.y < this._point.y + this.height);
         }
-        */
 
         /**
-        * Checks to see if a point in 2D world space overlaps this <code>GameObject</code>.
+        * Checks to see if the given point overlaps this <code>Sprite</code>, taking scaling and rotation into account.
+        * The point must be given in world space, not local or camera space.
         *
+        * @param sprite {Sprite} The Sprite to check. It will take scaling and rotation into account.
         * @param point {Point} The point in world space you want to check.
-        * @param inScreenSpace {boolean} Whether to take scroll factors into account when checking for overlap.
-        * @param camera {Camera} Specify which game camera you want.  If null getScreenXY() will just grab the first global camera.
         *
         * @return   Whether or not the point overlaps this object.
         */
-        static overlapsPoint(sprite: Sprite, point: Point, inScreenSpace: bool = false, camera: Camera = null): bool {
-
-            if (!inScreenSpace)
-            {
-                return Phaser.RectangleUtils.containsPoint(sprite.body.bounds, point);
-                //return (point.x > sprite.x) && (point.x < sprite.x + sprite.width) && (point.y > sprite.y) && (point.y < sprite.y + sprite.height);
-            }
-
-            if (camera == null)
-            {
-                camera = sprite.game.camera;
-            }
-
-            //var x: number = point.x - camera.scroll.x;
-            //var y: number = point.y - camera.scroll.y;
-
-            //this.getScreenXY(this._point, camera);
-
-            //return (x > this._point.x) && (X < this._point.x + this.width) && (Y > this._point.y) && (Y < this._point.y + this.height);
-
+        static overlapsPoint(sprite: Sprite, point: Point): bool {
+            return overlapsXY(sprite, point.x, point.y);
         }
 
         /**
@@ -346,19 +283,6 @@ module Phaser {
 
         }
 
-        static setOriginToCenter(sprite: Sprite, fromFrameBounds: bool = true, fromBody?: bool = false) {
-
-            if (fromFrameBounds)
-            {
-                sprite.transform.origin.setTo(sprite.width / 2, sprite.height / 2);
-            }
-            else if (fromBody)
-            {
-                sprite.transform.origin.setTo(sprite.body.bounds.halfWidth, sprite.body.bounds.halfHeight);
-            }
-
-        }
-
         /**
         * Set the world bounds that this GameObject can exist within. By default a GameObject can exist anywhere
         * in the world. But by setting the bounds (which are given in world dimensions, not screen dimensions)

README.md

@@ -26,30 +26,28 @@ TODO:
 * Investigate why tweens don't restart after the game pauses
 * Fix bug in Tween yoyo + loop combo
 * Apply Sprite scaling to Body.bounds
-* When you modify the sprite x/y directly the body position doesn't update, which leads to weird results. Need to work out who controls who.
 * Check that tween pausing works with the new performance.now
 * Game.Time should monitor pause duration
 * Investigate bug re: tilemap collision and animation frames
 * Update tests that use arrow keys and include touch/mouse support (FlxControlHandler style)
-* Polygon geom primitive
 * If the Camera is larger than the Stage size then the rotation offset isn't correct
 * Texture Repeat doesn't scroll, because it's part of the camera not the world, need to think about this more
 * Bug: Sprite x/y gets shifted if dynamic from the original value
 * Input CSS cursor those little 4-way arrows on drag?
 * Stage CSS3 transforms!!! Color tints, sepia, greyscale, all of those cool things :)
-* Cameras should have option to be input disabled + Pointers should check which camera they are over before doing Sprite selection
-* Added JSON Texture Atlas object support.
-* RenderOrderID won't work across cameras - but then neither do Pointers yet anyway
+* Add JSON Texture Atlas object support.
 * Swap to using time based motion (like the tweens) rather than delta timer - it just doesn't work well on slow phones
 * Pointer.getWorldX(camera) needs to take camera scale into consideration
 * Add a 'click to bring to top' demo (+ Group feature?)
 * If stage.clear set to false and game pauses, when it unpauses you still see the pause arrow - resolve this
-
 * Add clip support + shape options to Texture Component.
+* Make sure I'm using Point and not Vec2 when it's not a directional vector I need
+* Bug with setting scale or anything on a Sprite inside a Group, or maybe group.addNewSprite issue
 
-Make sure I'm using Point and not Vec2 when it's not a directional vector I need
-
-
+* Make input check use the rotated sprite check
+* Sprite collision events
+* See which functions in the input component can move elsewhere (utils)
+* Move all of the renderDebugInfo methods to the DebugUtils class
 
 V1.0.0
 
@@ -98,7 +96,7 @@ V1.0.0
 * Added optional frame parameter to Phaser.Sprite (and game.add.sprite) so you can set a frame ID or frame name on construction.
 * Fixed bug where passing a texture atlas string would incorrectly skip the frames array.
 * Added AnimationManager.autoUpdateBounds to control if a new frame should change the physics bounds of a sprite body or not.
-* Added StageScaleMode.pageAlignHorizontally and pageAlignVertically booleans. When on Phaser will set the margin-left and top of the canvas element so that it is positioned in the middle of the page (based on window.innerWidth).
+* Added StageScaleMode.pageAlignHorizontally and pageAlignVertically booleans. When true Phaser will set the margin-left and top of the canvas element so that it is positioned in the middle of the page (based only on window.innerWidth).
 * Added support for globalCompositeOperation, opaque and backgroundColor to the Sprite.Texture and Camera.Texture components.
 * Added ability for a Camera to skew and rotate around an origin.
 * Moved the Camera rendering into CanvasRenderer to keep things consistent.
@@ -109,8 +107,12 @@ V1.0.0
 * Added CameraManager.swap and CameraManager.sort methods and added a z-index property to Camera to control render order.
 * Added World.postUpdate loop + Group and Camera postUpdate methods.
 * Fixed issue stopping Pointer from working in world coordinates and fixed the world drag example.
-* For consistency renamed input.scaledX/Y = input.scale.
+* For consistency renamed input.scaledX/Y to input.scale.
 * Added input.activePointer which contains a reference to the most recently active pointer.
+* Sprite.Transform now has upperLeft, upperRight, bottomLeft and bottomRight Point properties and lots of useful coordinate related methods.
+* Camera.inCamera check now uses the Sprite.worldView which finally accurately updates regardless of scale, rotation or rotation origin.
+* Added Math.Mat3 for Matrix3 operations (which Sprite.Transform uses) and Math.Mat3Utils for lots of use Mat3 related methods.
+* Added SpriteUtils.overlapsXY and overlapsPoint to check if a point is within a sprite, taking scale and rotation into account.