Added the new Button game object and various other input and tilemap fixes.

Phaser/Game.ts

@@ -130,17 +130,35 @@ module Phaser {
         public onCreateCallback = null;
 
         /**
-         * This will be called when update states.
+         * This will be called when State is updated, this doesn't happen during load (see onLoadUpdateCallback)
          * @type {function}
          */
         public onUpdateCallback = null;
 
         /**
-         * This will be called when render states.
+         * This will be called when the State is rendered, this doesn't happen during load (see onLoadRenderCallback)
          * @type {function}
          */
         public onRenderCallback = null;
 
+        /**
+         * This will be called before the State is rendered and before the stage is cleared
+         * @type {function}
+         */
+        public onPreRenderCallback = null;
+
+        /**
+         * This will be called when the State is updated but only during the load process
+         * @type {function}
+         */
+        public onLoadUpdateCallback = null;
+
+        /**
+         * This will be called when the State is rendered but only during the load process
+         * @type {function}
+         */
+        public onLoadRenderCallback = null;
+
         /**
          * This will be called when states paused.
          * @type {function}
@@ -351,9 +369,7 @@ module Phaser {
          * Called when the load has finished after init was run.
          */
         private loadComplete() {
-
             this._loadComplete = true;
-
         }
 
         /**
@@ -398,15 +414,28 @@ module Phaser {
             {
                 this.onUpdateCallback.call(this.callbackContext);
             }
+            else if (this._loadComplete == false && this.onLoadUpdateCallback)
+            {
+                this.onLoadUpdateCallback.call(this.callbackContext);
+            }
 
             this.world.postUpdate();
 
+            if (this._loadComplete && this.onPreRenderCallback)
+            {
+                this.onPreRenderCallback.call(this.callbackContext);
+            }
+
             this.renderer.render();
 
             if (this._loadComplete && this.onRenderCallback)
             {
                 this.onRenderCallback.call(this.callbackContext);
             }
+            else if (this._loadComplete == false && this.onLoadRenderCallback)
+            {
+                this.onLoadRenderCallback.call(this.callbackContext);
+            }
 
         }
 
@@ -446,7 +475,7 @@ module Phaser {
         }
 
         /**
-         * Set all state callbacks (init, create, update, render).
+         * Set the most common state callbacks (init, create, update, render).
          * @param initCallback {function} Init callback invoked when init state.
          * @param createCallback {function} Create callback invoked when create state.
          * @param updateCallback {function} Update callback invoked when update state.
@@ -497,9 +526,12 @@ module Phaser {
                 this.callbackContext = this.state;
 
                 this.onInitCallback = null;
+                this.onLoadRenderCallback = null;
+                this.onLoadUpdateCallback = null;
                 this.onCreateCallback = null;
                 this.onUpdateCallback = null;
                 this.onRenderCallback = null;
+                this.onPreRenderCallback = null;
                 this.onPausedCallback = null;
                 this.onDestroyCallback = null;
 
@@ -509,6 +541,16 @@ module Phaser {
                     this.onInitCallback = this.state['init'];
                 }
 
+                if (this.state['loadRender'])
+                {
+                    this.onLoadRenderCallback = this.state['loadRender'];
+                }
+
+                if (this.state['loadUpdate'])
+                {
+                    this.onLoadUpdateCallback = this.state['loadUpdate'];
+                }
+
                 if (this.state['create'])
                 {
                     this.onCreateCallback = this.state['create'];
@@ -519,6 +561,11 @@ module Phaser {
                     this.onUpdateCallback = this.state['update'];
                 }
 
+                if (this.state['preRender'])
+                {
+                    this.onPreRenderCallback = this.state['preRender'];
+                }
+
                 if (this.state['render'])
                 {
                     this.onRenderCallback = this.state['render'];
@@ -562,6 +609,8 @@ module Phaser {
 
             this.callbackContext = null;
             this.onInitCallback = null;
+            this.onLoadRenderCallback = null;
+            this.onLoadUpdateCallback = null;
             this.onCreateCallback = null;
             this.onUpdateCallback = null;
             this.onRenderCallback = null;

Phaser/Phaser.csproj

@@ -92,6 +92,10 @@
       <DependentUpon>CameraFX.ts</DependentUpon>
     </Content>
     <TypeScriptCompile Include="components\ScrollRegion.ts" />
+    <TypeScriptCompile Include="gameobjects\Button.ts" />
+    <Content Include="gameobjects\Button.js">
+      <DependentUpon>Button.ts</DependentUpon>
+    </Content>
     <Content Include="gameobjects\DynamicTexture.js">
       <DependentUpon>DynamicTexture.ts</DependentUpon>
     </Content>

Phaser/Statics.ts

@@ -17,6 +17,7 @@ module Phaser {
         static EMITTER: number = 4;
         static TILEMAP: number = 5;
         static SCROLLZONE: number = 6;
+        static BUTTON: number = 7;
 
         static GEOM_POINT: number = 0;
         static GEOM_CIRCLE: number = 1;

Phaser/cameras/Camera.ts

@@ -36,6 +36,9 @@ module Phaser {
             this.ID = id;
             this.z = id;
 
+            width = this.game.math.clamp(width, this.game.stage.width, 1);
+            height = this.game.math.clamp(height, this.game.stage.height, 1);
+
             //  The view into the world we wish to render (by default the full game world size)
             //  The size of this Rect is the same as screenView, but the values are all in world coordinates instead of screen coordinates
             this.worldView = new Rectangle(0, 0, width, height);

Phaser/components/animation/Animation.ts

@@ -171,8 +171,13 @@ module Phaser {
             this._timeNextFrame = this._game.time.now + this.delay;
 
             this._frameIndex = 0;
+
             this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
 
+            this._parent.events.onAnimationStart.dispatch(this._parent, this);
+
+            return this;
+
         }
 
         /**
@@ -216,6 +221,7 @@ module Phaser {
                     {
                         this._frameIndex = 0;
                         this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
+                        this._parent.events.onAnimationLoop.dispatch(this._parent, this);
                     }
                     else
                     {
@@ -258,7 +264,8 @@ module Phaser {
 
             this.isPlaying = false;
             this.isFinished = true;
-            //  callback goes here
+            
+            this._parent.events.onAnimationComplete.dispatch(this._parent, this);
 
         }
 

Phaser/components/animation/AnimationManager.ts

@@ -25,18 +25,18 @@ module Phaser.Components {
         constructor(parent: Phaser.Sprite) {
 
             this._parent = parent;
-            this._game = parent.game;
+            this.game = parent.game;
             this._anims = {};
 
         }
 
         /**
-         * Local private reference to game.
+         * Reference to Phaser.Game
          */
-        private _game: Game;
+        public game: Game;
 
         /**
-         * Local private reference to its owner sprite.
+         * Local private reference to its parent game object.
          */
         private _parent: Phaser.Sprite;
 
@@ -103,6 +103,14 @@ module Phaser.Components {
                 return;
             }
 
+            //  Create the signals the AnimationManager will emit
+            if (this._parent.events.onAnimationStart == null)
+            {
+                this._parent.events.onAnimationStart = new Phaser.Signal;
+                this._parent.events.onAnimationComplete = new Phaser.Signal;
+                this._parent.events.onAnimationLoop = new Phaser.Signal;
+            }
+
             if (frames == null)
             {
                 frames = this._frameData.getFrameIndexes();
@@ -121,7 +129,7 @@ module Phaser.Components {
                 frames = this._frameData.getFrameIndexesByName(frames);
             }
 
-            this._anims[name] = new Animation(this._game, this._parent, this._frameData, name, frames, frameRate, loop);
+            this._anims[name] = new Animation(this.game, this._parent, this._frameData, name, frames, frameRate, loop);
 
             this.currentAnim = this._anims[name];
             this.currentFrame = this.currentAnim.currentFrame;
@@ -166,7 +174,7 @@ module Phaser.Components {
          * @param frameRate {number} FrameRate you want to specify instead of using default.
          * @param loop {boolean} Whether or not the animation is looped or just plays once.
          */
-        public play(name: string, frameRate?: number = null, loop?: bool) {
+        public play(name: string, frameRate?: number = null, loop?: bool): Animation {
 
             if (this._anims[name])
             {
@@ -174,13 +182,13 @@ module Phaser.Components {
                 {
                     if (this.currentAnim.isPlaying == false)
                     {
-                        this.currentAnim.play(frameRate, loop);
+                        return this.currentAnim.play(frameRate, loop);
                     }
                 }
                 else
                 {
                     this.currentAnim = this._anims[name];
-                    this.currentAnim.play(frameRate, loop);
+                    return this.currentAnim.play(frameRate, loop);
                 }
             }
 
@@ -236,7 +244,7 @@ module Phaser.Components {
 
         public set frame(value: number) {
 
-            if (this._frameData.getFrame(value) !== null)
+            if (this._frameData && this._frameData.getFrame(value) !== null)
             {
                 this.currentFrame = this._frameData.getFrame(value);
 
@@ -260,7 +268,7 @@ module Phaser.Components {
 
         public set frameName(value: string) {
 
-            if (this._frameData.getFrameByName(value) !== null)
+            if (this._frameData.getFrameByName(value))
             {
                 this.currentFrame = this._frameData.getFrameByName(value);
 

Phaser/components/sprite/Events.ts

@@ -11,27 +11,19 @@ module Phaser.Components.Sprite {
     export class Events {
 
         /**
-         * The Events component is a collection of events fired by the parent Sprite and its other components.
+         * The Events component is a collection of events fired by the parent game object and its components.
-         * @param parent The Sprite using this Input component
+         * @param parent The game object using this Input component
          */
         constructor(parent: Phaser.Sprite) {
 
             this.game = parent.game;
-            this.sprite = parent;
+            this._parent = parent;
 
             this.onAddedToGroup = new Phaser.Signal;
             this.onRemovedFromGroup = new Phaser.Signal;
             this.onKilled = new Phaser.Signal;
             this.onRevived = new Phaser.Signal;
 
-            //  Only create these if Sprite input is enabled?
-            this.onInputOver = new Phaser.Signal;
-            this.onInputOut = new Phaser.Signal;
-            this.onInputDown = new Phaser.Signal;
-            this.onInputUp = new Phaser.Signal;
-            this.onDragStart = new Phaser.Signal;
-            this.onDragStop = new Phaser.Signal;
-
         }
 
         /**
@@ -40,9 +32,9 @@ module Phaser.Components.Sprite {
         public game: Game;
 
         /**
-         * Reference to the Image stored in the Game.Cache that is used as the texture for the Sprite.
+         * Local private reference to its parent game object.
          */
-        private sprite: Phaser.Sprite;
+        private _parent: Phaser.Sprite;
 
         /**
          * Dispatched by the Group this Sprite is added to.
@@ -94,7 +86,20 @@ module Phaser.Components.Sprite {
          */
         public onDragStop: Phaser.Signal;
 
+        /**
+         * Dispatched by the Animation component when the Sprite starts being animated
+         */
+        public onAnimationStart: Phaser.Signal;
 
+        /**
+         * Dispatched by the Animation component when the Sprite animation completes
+         */
+        public onAnimationComplete: Phaser.Signal;
+
+        /**
+         * Dispatched by the Animation component when the Sprite animation loops
+         */
+        public onAnimationLoop: Phaser.Signal;
 
         public onOutOfBounds: Phaser.Signal;
 

Phaser/components/sprite/Input.ts

@@ -20,7 +20,7 @@ module Phaser.Components.Sprite {
         constructor(parent: Phaser.Sprite) {
 
             this.game = parent.game;
-            this.sprite = parent;
+            this._parent = parent;
             this.enabled = false;
 
         }
@@ -31,9 +31,9 @@ module Phaser.Components.Sprite {
         public game: Game;
 
         /**
-         * Reference to the Image stored in the Game.Cache that is used as the texture for the Sprite.
+         * Local private reference to its parent game object.
          */
-        private sprite: Phaser.Sprite;
+        private _parent: Phaser.Sprite;
 
         private _pointerData;
 
@@ -104,6 +104,13 @@ module Phaser.Components.Sprite {
          */
         public useHandCursor: bool;
 
+        /**
+         * If this object is set to consume the pointer event then it will stop all propogation from this object on.
+         * For example if you had a stack of 6 sprites with the same priority IDs and one consumed the event, none of the others would receive it.
+         * @type {Boolean}
+         */
+        public consumePointerEvent: bool = false;
+
         /**
          * The x coordinate of the Input pointer, relative to the top-left of the parent Sprite.
          * This value is only set when the pointer is over this Sprite.
@@ -222,10 +229,22 @@ module Phaser.Components.Sprite {
                 this.snapOffset = new Point;
 		        this.enabled = true;
 
-		        this.game.input.addGameObject(this.sprite);
+		        this.game.input.addGameObject(this._parent);
+
+                //  Create the signals the Input component will emit
+		        if (this._parent.events.onInputOver == null)
+		        {
+		            this._parent.events.onInputOver = new Phaser.Signal;
+		            this._parent.events.onInputOut = new Phaser.Signal;
+		            this._parent.events.onInputDown = new Phaser.Signal;
+		            this._parent.events.onInputUp = new Phaser.Signal;
+		            this._parent.events.onDragStart = new Phaser.Signal;
+		            this._parent.events.onDragStop = new Phaser.Signal;
+		        }
+
 		    }
 
-            return this.sprite;
+            return this._parent;
 
 		}
 
@@ -274,13 +293,13 @@ module Phaser.Components.Sprite {
          */
 		public checkPointerOver(pointer: Phaser.Pointer): bool {
 
-		    if (this.enabled == false || this.sprite.visible == false)
+		    if (this.enabled == false || this._parent.visible == false)
 		    {
 		        return false;
 		    }
 		    else
 		    {
-                return SpriteUtils.overlapsXY(this.sprite, pointer.worldX(), pointer.worldY());
+                return SpriteUtils.overlapsXY(this._parent, pointer.worldX(), pointer.worldY());
 		    }
 
 		}
@@ -290,7 +309,7 @@ module Phaser.Components.Sprite {
          */
         public update(pointer: Phaser.Pointer): bool {
 
-            if (this.enabled == false || this.sprite.visible == false)
+            if (this.enabled == false || this._parent.visible == false)
             {
                 return false;
             }
@@ -301,10 +320,10 @@ module Phaser.Components.Sprite {
             }
             else if (this._pointerData[pointer.id].isOver == true)
             {
-                if (SpriteUtils.overlapsXY(this.sprite, pointer.worldX(), pointer.worldY()))
+                if (SpriteUtils.overlapsXY(this._parent, pointer.worldX(), pointer.worldY()))
                 {
-                    this._pointerData[pointer.id].x = pointer.x - this.sprite.x;
+                    this._pointerData[pointer.id].x = pointer.x - this._parent.x;
-                    this._pointerData[pointer.id].y = pointer.y - this.sprite.y;
+                    this._pointerData[pointer.id].y = pointer.y - this._parent.y;
                     return true;
                 }
                 else
@@ -325,15 +344,15 @@ module Phaser.Components.Sprite {
                 this._pointerData[pointer.id].isOver = true;
                 this._pointerData[pointer.id].isOut = false;
                 this._pointerData[pointer.id].timeOver = this.game.time.now;
-                this._pointerData[pointer.id].x = pointer.x - this.sprite.x;
+                this._pointerData[pointer.id].x = pointer.x - this._parent.x;
-                this._pointerData[pointer.id].y = pointer.y - this.sprite.y;
+                this._pointerData[pointer.id].y = pointer.y - this._parent.y;
 
                 if (this.useHandCursor && this._pointerData[pointer.id].isDragged == false)
                 {
                     this.game.stage.canvas.style.cursor = "pointer";
                 }
 
-                this.sprite.events.onInputOver.dispatch(this.sprite, pointer);
+                this._parent.events.onInputOver.dispatch(this._parent, pointer);
             }
 
         }
@@ -349,12 +368,10 @@ module Phaser.Components.Sprite {
                 this.game.stage.canvas.style.cursor = "default";
             }
 
-            this.sprite.events.onInputOut.dispatch(this.sprite, pointer);
+            this._parent.events.onInputOut.dispatch(this._parent, pointer);
 
         }
 
-        public consumePointerEvent: bool = false;
-
         public _touchedHandler(pointer: Pointer): bool {
 
             if (this._pointerData[pointer.id].isDown == false && this._pointerData[pointer.id].isOver == true)
@@ -363,7 +380,7 @@ module Phaser.Components.Sprite {
                 this._pointerData[pointer.id].isUp = false;
                 this._pointerData[pointer.id].timeDown = this.game.time.now;
 
-                this.sprite.events.onInputDown.dispatch(this.sprite, pointer);
+                this._parent.events.onInputDown.dispatch(this._parent, pointer);
 
                 //  Start drag
                 //if (this.draggable && this.isDragged == false && pointer.targetObject == null)
@@ -374,7 +391,7 @@ module Phaser.Components.Sprite {
 
                 if (this.bringToTop)
                 {
-                    this.sprite.group.bringToTop(this.sprite);
+                    this._parent.group.bringToTop(this._parent);
                 }
 
             }
@@ -386,7 +403,7 @@ module Phaser.Components.Sprite {
 
         public _releasedHandler(pointer: Pointer) {
 
-            //  If was previously touched by this Pointer, check if still is
+            //  If was previously touched by this Pointer, check if still is AND still over this item
             if (this._pointerData[pointer.id].isDown && pointer.isUp)
             {
                 this._pointerData[pointer.id].isDown = false;
@@ -394,7 +411,19 @@ module Phaser.Components.Sprite {
                 this._pointerData[pointer.id].timeUp = this.game.time.now;
                 this._pointerData[pointer.id].downDuration = this._pointerData[pointer.id].timeUp - this._pointerData[pointer.id].timeDown;
 
-                this.sprite.events.onInputUp.dispatch(this.sprite, pointer);
+                //  Only release the InputUp signal if the pointer is still over this sprite
+                if (SpriteUtils.overlapsXY(this._parent, pointer.worldX(), pointer.worldY()))
+                {
+                    this._parent.events.onInputUp.dispatch(this._parent, pointer);
+                }
+                else
+                {
+                    //  Pointer outside the sprite? Reset the cursor
+                    if (this.useHandCursor)
+                    {
+                        this.game.stage.canvas.style.cursor = "default";
+                    }
+                }
 
                 //  Stop drag
                 if (this.draggable && this.isDragged && this._draggedPointerID == pointer.id)
@@ -402,10 +431,6 @@ module Phaser.Components.Sprite {
                     this.stopDrag(pointer);
                 }
 
-                if (this.useHandCursor)
-                {
-                    this.game.stage.canvas.style.cursor = "default";
-                }
             }
 
         }
@@ -423,12 +448,12 @@ module Phaser.Components.Sprite {
 
 			if (this.allowHorizontalDrag)
 			{
-			    this.sprite.x = pointer.x + this._dragPoint.x + this.dragOffset.x;
+			    this._parent.x = pointer.x + this._dragPoint.x + this.dragOffset.x;
 			}
 			
 			if (this.allowVerticalDrag)
 			{
-			    this.sprite.y = pointer.y + this._dragPoint.y + this.dragOffset.y;
+			    this._parent.y = pointer.y + this._dragPoint.y + this.dragOffset.y;
 			}
 			
 			if (this.boundsRect)
@@ -443,8 +468,8 @@ module Phaser.Components.Sprite {
 			
 			if (this.snapOnDrag)
 			{
-				this.sprite.x = Math.floor(this.sprite.x / this.snapX) * this.snapX;
+				this._parent.x = Math.floor(this._parent.x / this.snapX) * this.snapX;
-				this.sprite.y = Math.floor(this.sprite.y / this.snapY) * this.snapY;
+				this._parent.y = Math.floor(this._parent.y / this.snapY) * this.snapY;
 			}
 
 			return true;
@@ -579,23 +604,23 @@ module Phaser.Components.Sprite {
             if (this.dragFromCenter)
             {
                 //	Move the sprite to the middle of the pointer
-                //this._dragPoint.setTo(-this.sprite.worldView.halfWidth, -this.sprite.worldView.halfHeight);
+                //this._dragPoint.setTo(-this._parent.worldView.halfWidth, -this._parent.worldView.halfHeight);
-                //this._dragPoint.setTo(this.sprite.transform.center.x, this.sprite.transform.center.y);
+                //this._dragPoint.setTo(this._parent.transform.center.x, this._parent.transform.center.y);
-                this._dragPoint.setTo(this.sprite.x - pointer.x, this.sprite.y - pointer.y);
+                this._dragPoint.setTo(this._parent.x - pointer.x, this._parent.y - pointer.y);
             }
             else
             {
-                this._dragPoint.setTo(this.sprite.x - pointer.x, this.sprite.y - pointer.y);
+                this._dragPoint.setTo(this._parent.x - pointer.x, this._parent.y - pointer.y);
             }
 
             this.updateDrag(pointer);
 
             if (this.bringToTop)
             {
-                this.sprite.group.bringToTop(this.sprite);
+                this._parent.group.bringToTop(this._parent);
             }
 
-            this.sprite.events.onDragStart.dispatch(this.sprite, pointer);
+            this._parent.events.onDragStart.dispatch(this._parent, pointer);
 
 		}
 
@@ -610,11 +635,12 @@ module Phaser.Components.Sprite {
 			
 			if (this.snapOnRelease)
 			{
-				this.sprite.x = Math.floor(this.sprite.x / this.snapX) * this.snapX;
+				this._parent.x = Math.floor(this._parent.x / this.snapX) * this.snapX;
-				this.sprite.y = Math.floor(this.sprite.y / this.snapY) * this.snapY;
+				this._parent.y = Math.floor(this._parent.y / this.snapY) * this.snapY;
 			}
 
-            this.sprite.events.onDragStop.dispatch(this.sprite, pointer);
+            this._parent.events.onDragStop.dispatch(this._parent, pointer);
+            this._parent.events.onInputUp.dispatch(this._parent, pointer);
 		}
 
 		/**
@@ -660,22 +686,22 @@ module Phaser.Components.Sprite {
 		 */
 		private checkBoundsRect():void
 		{
-			if (this.sprite.x < this.boundsRect.left)
+			if (this._parent.x < this.boundsRect.left)
 			{
-				this.sprite.x = this.boundsRect.x;
+				this._parent.x = this.boundsRect.x;
 			}
-			else if ((this.sprite.x + this.sprite.width) > this.boundsRect.right)
+			else if ((this._parent.x + this._parent.width) > this.boundsRect.right)
 			{
-				this.sprite.x = this.boundsRect.right - this.sprite.width;
+				this._parent.x = this.boundsRect.right - this._parent.width;
 			}
 			
-			if (this.sprite.y < this.boundsRect.top)
+			if (this._parent.y < this.boundsRect.top)
 			{
-				this.sprite.y = this.boundsRect.top;
+				this._parent.y = this.boundsRect.top;
 			}
-			else if ((this.sprite.y + this.sprite.height) > this.boundsRect.bottom)
+			else if ((this._parent.y + this._parent.height) > this.boundsRect.bottom)
 			{
-				this.sprite.y = this.boundsRect.bottom - this.sprite.height;
+				this._parent.y = this.boundsRect.bottom - this._parent.height;
 			}
 		}
 		
@@ -684,22 +710,22 @@ module Phaser.Components.Sprite {
 		 */
 		private checkBoundsSprite():void
 		{
-			if (this.sprite.x < this.boundsSprite.x)
+			if (this._parent.x < this.boundsSprite.x)
 			{
-				this.sprite.x = this.boundsSprite.x;
+				this._parent.x = this.boundsSprite.x;
 			}
-			else if ((this.sprite.x + this.sprite.width) > (this.boundsSprite.x + this.boundsSprite.width))
+			else if ((this._parent.x + this._parent.width) > (this.boundsSprite.x + this.boundsSprite.width))
 			{
-				this.sprite.x = (this.boundsSprite.x + this.boundsSprite.width) - this.sprite.width;
+				this._parent.x = (this.boundsSprite.x + this.boundsSprite.width) - this._parent.width;
 			}
 			
-			if (this.sprite.y < this.boundsSprite.y)
+			if (this._parent.y < this.boundsSprite.y)
 			{
-				this.sprite.y = this.boundsSprite.y;
+				this._parent.y = this.boundsSprite.y;
 			}
-			else if ((this.sprite.y + this.sprite.height) > (this.boundsSprite.y + this.boundsSprite.height))
+			else if ((this._parent.y + this._parent.height) > (this.boundsSprite.y + this.boundsSprite.height))
 			{
-				this.sprite.y = (this.boundsSprite.y + this.boundsSprite.height) - this.sprite.height;
+				this._parent.y = (this.boundsSprite.y + this.boundsSprite.height) - this._parent.height;
 			}
 		}
 
@@ -711,13 +737,13 @@ module Phaser.Components.Sprite {
          */
         public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') {
 
-            this.sprite.texture.context.font = '14px Courier';
+            this._parent.texture.context.font = '14px Courier';
-            this.sprite.texture.context.fillStyle = color;
+            this._parent.texture.context.fillStyle = color;
-            this.sprite.texture.context.fillText('Sprite Input: (' + this.sprite.worldView.width + ' x ' + this.sprite.worldView.height + ')', x, y);
+            this._parent.texture.context.fillText('Sprite Input: (' + this._parent.worldView.width + ' x ' + this._parent.worldView.height + ')', x, y);
-            this.sprite.texture.context.fillText('x: ' + this.pointerX().toFixed(1) + ' y: ' + this.pointerY().toFixed(1), x, y + 14);
+            this._parent.texture.context.fillText('x: ' + this.pointerX().toFixed(1) + ' y: ' + this.pointerY().toFixed(1), x, y + 14);
-            this.sprite.texture.context.fillText('over: ' + this.pointerOver() + ' duration: ' + this.overDuration().toFixed(0), x, y + 28);
+            this._parent.texture.context.fillText('over: ' + this.pointerOver() + ' duration: ' + this.overDuration().toFixed(0), x, y + 28);
-            this.sprite.texture.context.fillText('down: ' + this.pointerDown() + ' duration: ' + this.downDuration().toFixed(0), x, y + 42);
+            this._parent.texture.context.fillText('down: ' + this.pointerDown() + ' duration: ' + this.downDuration().toFixed(0), x, y + 42);
-            this.sprite.texture.context.fillText('just over: ' + this.justOver() + ' just out: ' + this.justOut(), x, y + 56);
+            this._parent.texture.context.fillText('just over: ' + this.justOver() + ' just out: ' + this.justOut(), x, y + 56);
 
         }
 

Phaser/gameobjects/Button.ts

@@ -0,0 +1,211 @@
+/// <reference path="../Game.ts" />
+/// <reference path="../math/Vec2.ts" />
+/// <reference path="../geom/Rectangle.ts" />
+/// <reference path="../components/animation/AnimationManager.ts" />
+/// <reference path="../components/Texture.ts" />
+/// <reference path="../components/Transform.ts" />
+/// <reference path="../components/sprite/Input.ts" />
+/// <reference path="../components/sprite/Events.ts" />
+
+/**
+* Phaser - Button
+*/
+
+module Phaser {
+
+    export class Button extends Sprite {
+
+        /**
+         * Create a new <code>Button</code> object.
+         *
+         * @param game {Phaser.Game} Current game instance.
+         * @param [x] {number} the initial x position of the button.
+         * @param [y] {number} the initial y position of the button.
+         * @param [key] {string} Key of the graphic you want to load for this button.
+         */
+        constructor(game: Game, x?: number = 0, y?: number = 0, key?: string = null, callback? = null, callbackContext? = null, overFrame? = null, outFrame? = null, downFrame? = null) {
+
+            super(game, x, y, key, outFrame);
+
+            this.type = Phaser.Types.BUTTON;
+
+            if (typeof overFrame == 'string')
+            {
+                this._onOverFrameName = overFrame;
+            }
+            else
+            {
+                this._onOverFrameID = overFrame;
+            }
+
+            if (typeof outFrame == 'string')
+            {
+                this._onOutFrameName = outFrame;
+                this._onUpFrameName = outFrame;
+            }
+            else
+            {
+                this._onOutFrameID = outFrame;
+                this._onUpFrameID = outFrame;
+            }
+
+            if (typeof downFrame == 'string')
+            {
+                this._onDownFrameName = downFrame;
+            }
+            else
+            {
+                this._onDownFrameID = downFrame;
+            }
+
+            //  These are the signals the game will subscribe to
+            this.onInputOver = new Phaser.Signal;
+            this.onInputOut = new Phaser.Signal;
+            this.onInputDown = new Phaser.Signal;
+            this.onInputUp = new Phaser.Signal;
+
+            //  Set a default signal for them
+            if (callback)
+            {
+                this.onInputUp.add(callback, callbackContext);
+            }
+
+            this.input.start(0, false, true);
+
+            //  Redirect the input events to here so we can handle animation updates, etc
+            this.events.onInputOver.add(this.onInputOverHandler, this);
+            this.events.onInputOut.add(this.onInputOutHandler, this);
+            this.events.onInputDown.add(this.onInputDownHandler, this);
+            this.events.onInputUp.add(this.onInputUpHandler, this);
+
+            //  By default we'll position it using screen space, not world space.
+            this.transform.scrollFactor.setTo(0, 0);
+
+        }
+
+        private _onOverFrameName = null;
+        private _onOutFrameName = null;
+        private _onDownFrameName = null;
+        private _onUpFrameName = null;
+        private _onOverFrameID = null;
+        private _onOutFrameID = null;
+        private _onDownFrameID = null;
+        private _onUpFrameID = null;
+
+        /**
+         * Dispatched when a pointer moves over an Input enabled sprite.
+         */
+        public onInputOver: Phaser.Signal;
+
+        /**
+         * Dispatched when a pointer moves out of an Input enabled sprite.
+         */
+        public onInputOut: Phaser.Signal;
+
+        /**
+         * Dispatched when a pointer is pressed down on an Input enabled sprite.
+         */
+        public onInputDown: Phaser.Signal;
+
+        /**
+         * Dispatched when a pointer is released over an Input enabled sprite
+         */
+        public onInputUp: Phaser.Signal;
+
+        //  TODO
+        //public tabIndex: number;
+        //public tabEnabled: bool;
+
+        //  ENTER or SPACE can activate this button if it has focus
+
+        private onInputOverHandler(pointer:Phaser.Pointer) {
+            
+            if (this._onOverFrameName != null)
+            {
+                this.frameName = this._onOverFrameName;
+            }
+            else if (this._onOverFrameID != null)
+            {
+                this.frame = this._onOverFrameID;
+            }
+
+            if (this.onInputOver)
+            {
+                this.onInputOver.dispatch(this, pointer);
+            }
+
+        }
+
+        private onInputOutHandler(pointer:Phaser.Pointer) {
+
+            if (this._onOutFrameName != null)
+            {
+                this.frameName = this._onOutFrameName;
+            }
+            else if (this._onOutFrameID != null)
+            {
+                this.frame = this._onOutFrameID;
+            }
+
+            if (this.onInputOut)
+            {
+                this.onInputOut.dispatch(this, pointer);
+            }
+
+        }
+
+        private onInputDownHandler(pointer:Phaser.Pointer) {
+
+            if (this._onDownFrameName != null)
+            {
+                this.frameName = this._onDownFrameName;
+            }
+            else if (this._onDownFrameID != null)
+            {
+                this.frame = this._onDownFrameID;
+            }
+
+            if (this.onInputDown)
+            {
+                this.onInputDown.dispatch(this, pointer);
+            }
+
+        }
+
+        private onInputUpHandler(pointer:Phaser.Pointer) {
+
+            if (this._onUpFrameName != null)
+            {
+                this.frameName = this._onUpFrameName;
+            }
+            else if (this._onUpFrameID != null)
+            {
+                this.frame = this._onUpFrameID;
+            }
+
+            if (this.onInputUp)
+            {
+                this.onInputUp.dispatch(this, pointer);
+            }
+
+        }
+
+        public set priorityID(value: number) {
+            this.input.priorityID = value;
+        }
+
+        public get priorityID(): number {
+            return this.input.priorityID;
+        }
+
+        public set useHandCursor(value: bool) {
+            this.input.useHandCursor = value;
+        }
+
+        public get useHandCursor(): bool {
+            return this.input.useHandCursor;
+        }
+
+    }
+
+}

Phaser/gameobjects/DynamicTexture.ts

@@ -77,6 +77,14 @@ module Phaser {
          */
         public context: CanvasRenderingContext2D;
 
+        /**
+         * You can set a globalCompositeOperation that will be applied before the render method is called on this Sprite.
+         * This is useful if you wish to apply an effect like 'lighten'.
+         * If this value is set it will call a canvas context save and restore before and after the render pass, so use it sparingly.
+         * Set to null to disable.
+         */
+        public globalCompositeOperation: string = null;
+
         /**
          * Get a color of a specific pixel.
          * @param x {number} X position of the pixel in this texture.
@@ -252,12 +260,15 @@ module Phaser {
          * Given an array of Sprites it will update each of them so that their canvas/contexts reference this DynamicTexture
          * @param objects {Array} An array of GameObjects, or objects that inherit from it such as Sprites
          */
-        public assignCanvasToGameObjects(objects: IGameObject[]) {
+        public assignCanvasToGameObjects(objects) {
 
             for (var i = 0; i < objects.length; i++)
             {
-                objects[i].texture.canvas = this.canvas;
+                if (objects[i].texture)
-                objects[i].texture.context = this.context;
+                {
+                    objects[i].texture.canvas = this.canvas;
+                    objects[i].texture.context = this.context;
+                }
             }
 
         }
@@ -278,7 +289,20 @@ module Phaser {
         * @param y {number} The Y coordinate to render on the stage to (given in screen coordinates, not world)
         */
         public render(x?: number = 0, y?: number = 0) {
+
+            if (this.globalCompositeOperation)
+            {
+                this.game.stage.context.save();
+                this.game.stage.context.globalCompositeOperation = this.globalCompositeOperation;
+            }
+
             this.game.stage.context.drawImage(this.canvas, x, y);
+
+            if (this.globalCompositeOperation)
+            {
+                this.game.stage.context.restore();
+            }
+
         }
 
         public get width(): number {

Phaser/gameobjects/GameObjectFactory.ts

@@ -3,6 +3,7 @@
 /// <reference path="../gameobjects/Emitter.ts" />
 /// <reference path="../gameobjects/Particle.ts" />
 /// <reference path="../gameobjects/Sprite.ts" />
+/// <reference path="../gameobjects/Button.ts" />
 /// <reference path="../gameobjects/ScrollZone.ts" />
 /// <reference path="../gameobjects/DynamicTexture.ts" />
 /// <reference path="../gameobjects/Tilemap.ts" />
@@ -62,6 +63,23 @@ module Phaser {
         //    return <GeomSprite> this._world.group.add(new GeomSprite(this._game, x, y));
         //}
 
+        /**
+         * Create a new Button game object.
+         *
+         * @param [x] {number} X position of the button.
+         * @param [y] {number} Y position of the button.
+         * @param [key] {string} The image key as defined in the Game.Cache to use as the texture for this button.
+         * @param [callback] {function} The function to call when this button is pressed
+         * @param [callbackContext] {object} The context in which the callback will be called (usually 'this')
+         * @param [overFrame] {string|number} This is the frame or frameName that will be set when this button is in an over state. Give either a number to use a frame ID or a string for a frame name.
+         * @param [outFrame] {string|number} This is the frame or frameName that will be set when this button is in an out state. Give either a number to use a frame ID or a string for a frame name.
+         * @param [downFrame] {string|number} This is the frame or frameName that will be set when this button is in a down state. Give either a number to use a frame ID or a string for a frame name.
+         * @returns {Button} The newly created button object.
+         */
+        public button(x?: number = 0, y?: number = 0, key?: string = null, callback? = null, callbackContext? = null, overFrame? = null, outFrame? = null, downFrame? = null): Button {
+            return <Button> this._world.group.add(new Button(this._game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame));
+        }
+
         /**
          * Create a new Sprite with specific position and sprite sheet key.
          *

Phaser/gameobjects/IGameObject.ts

@@ -54,6 +54,21 @@ module Phaser {
          */
         visible: bool;
 
+        /**
+         * The animation manager component
+         */
+        animations: Phaser.Components.AnimationManager;
+
+        /**
+         * Associated events
+         */
+        events;
+
+        /**
+         * The input component
+         */
+        input;
+
         /**
          * The texture used to render.
          */

Phaser/gameobjects/Sprite.ts

@@ -42,9 +42,9 @@ module Phaser {
             this.group = null;
             this.name = '';
 
+            this.events = new Phaser.Components.Sprite.Events(this);
             this.animations = new Phaser.Components.AnimationManager(this);
             this.input = new Phaser.Components.Sprite.Input(this);
-            this.events = new Phaser.Components.Sprite.Events(this);
             this.texture = new Phaser.Components.Texture(this);
             this.transform = new Phaser.Components.Transform(this);
 
@@ -224,17 +224,26 @@ module Phaser {
         */
         public scale: Phaser.Vec2;
 
-        /**
-        * The alpha of the Sprite between 0 and 1, a value of 1 being fully opaque.
-        */
-        public alpha: number;
-
         /**
         * The origin of the Sprite around which rotation and positioning takes place.
         * This is a reference to Sprite.transform.origin
         */
         public origin: Phaser.Vec2;
 
+        /**
+        * The alpha of the Sprite between 0 and 1, a value of 1 being fully opaque.
+        */
+        public set alpha(value: number) {
+            this.texture.alpha = value;
+        }
+
+        /**
+        * The alpha of the Sprite between 0 and 1, a value of 1 being fully opaque.
+        */
+        public get alpha(): number {
+            return this.texture.alpha;
+        }
+
         /**
         * Set the animation frame by frame number.
         */

Phaser/gameobjects/Tilemap.ts

@@ -206,6 +206,9 @@ module Phaser {
         public postUpdate() {
         }
 
+        public destroy() {
+        }
+
         /**
          * Parset csv map data and generate tiles.
          * @param data {string} CSV map data.

Phaser/input/Input.ts

@@ -507,7 +507,6 @@ module Phaser {
 
             if (this.inputObjects[index])
             {
-                console.log('object removed from the input manager', index);
                 this.inputObjects[index] = null;
             }
 
@@ -580,7 +579,10 @@ module Phaser {
 
                 for (var i = 0; i < this.totalTrackedObjects; i++)
                 {
-                    this.inputObjects[i].input.reset();
+                    if (this.inputObjects[i] && this.inputObjects[i].input)
+                    {
+                        this.inputObjects[i].input.reset();
+                    }
                 }
 
                 this.inputObjects.length = 0;

Phaser/input/Pointer.ts

@@ -371,6 +371,10 @@ module Phaser {
 
         }
 
+        private _highestRenderOrderID: number;
+        private _highestRenderObject: number;
+        private _highestInputPriorityID: number;
+
         /**
         * Called when the Pointer is moved on the touchscreen
         * @method move
@@ -407,35 +411,73 @@ module Phaser {
                 this.game.input.circle.y = this.game.input.y;
             }
 
-            if (this.targetObject !== null)
+            //  Easy out if we're dragging something and it still exists
+            if (this.targetObject !== null && this.targetObject.input && this.targetObject.input.isDragged == true)
             {
                 if (this.targetObject.input.update(this) == false)
                 {
                     this.targetObject = null;
                 }
+                return this;
+            }
+
+            //  Work out which object is on the top
+            this._highestRenderOrderID = -1;
+            this._highestRenderObject = -1;
+            this._highestInputPriorityID = -1;
+
+            for (var i = 0; i < this.game.input.totalTrackedObjects; i++)
+            {
+                if (this.game.input.inputObjects[i] && this.game.input.inputObjects[i].input && this.game.input.inputObjects[i].input.checkPointerOver(this))
+                {
+                    //  If the object has a higher Input.PriorityID OR if the priority ID is the same as the current highest AND it has a higher renderOrderID, then set it to the top
+                    if (this.game.input.inputObjects[i].input.priorityID > this._highestInputPriorityID || (this.game.input.inputObjects[i].input.priorityID == this._highestInputPriorityID && this.game.input.inputObjects[i].renderOrderID > this._highestRenderOrderID))
+                    {
+                        this._highestRenderOrderID = this.game.input.inputObjects[i].renderOrderID;
+                        this._highestRenderObject = i;
+                        this._highestInputPriorityID = this.game.input.inputObjects[i].input.priorityID;
+                    }
+                }
+            }
+
+            if (this._highestRenderObject == -1)
+            {
+                //  The pointer isn't over anything, check if we've got a lingering previous target
+                if (this.targetObject !== null)
+                {
+                    this.targetObject.input._pointerOutHandler(this);
+                    this.targetObject = null;
+                }
             }
             else
             {
-                //  Build our temporary click stack
+                if (this.targetObject == null)
-                var _highestRenderID = -1;
-                var _highestRenderObject: number = -1;
-
-                for (var i = 0; i < this.game.input.totalTrackedObjects; i++)
                 {
-                    if (this.game.input.inputObjects[i] !== null && this.game.input.inputObjects[i].input.checkPointerOver(this) && this.game.input.inputObjects[i].renderOrderID > _highestRenderID)
+                    //  And now set the new one
-                    {
+                    this.targetObject = this.game.input.inputObjects[this._highestRenderObject];
-                        _highestRenderID = this.game.input.inputObjects[i].renderOrderID;
-                        _highestRenderObject = i;
-                    }
-                }
-
-                if (_highestRenderObject !== -1)
-                {
-                    //console.log('setting target');
-                    this.targetObject = this.game.input.inputObjects[_highestRenderObject];
                     this.targetObject.input._pointerOverHandler(this);
                 }
+                else
+                {
+                    //  We've got a target from the last update
+                    if (this.targetObject == this.game.input.inputObjects[this._highestRenderObject])
+                    {
+                        //  Same target as before, so update it
+                        if (this.targetObject.input.update(this) == false)
+                        {
+                            this.targetObject = null;
+                        }
+                    }
+                    else
+                    {
+                        //  The target has changed, so tell the old one we've left it
+                        this.targetObject.input._pointerOutHandler(this);
 
+                        //  And now set the new one
+                        this.targetObject = this.game.input.inputObjects[this._highestRenderObject];
+                        this.targetObject.input._pointerOverHandler(this);
+                    }
+                }
             }
 
             return this;
@@ -510,7 +552,7 @@ module Phaser {
 
             for (var i = 0; i < this.game.input.totalTrackedObjects; i++)
             {
-                if (this.game.input.inputObjects[i] !== null && this.game.input.inputObjects[i].input.enabled)
+                if (this.game.input.inputObjects[i] && this.game.input.inputObjects[i].input && this.game.input.inputObjects[i].input.enabled)
                 {
                     this.game.input.inputObjects[i].input._releasedHandler(this);
                 }
@@ -584,7 +626,7 @@ module Phaser {
             this._history.length = 0;
             this._stateReset = true;
 
-            if (this.targetObject)
+            if (this.targetObject && this.targetObject.input)
             {
                 this.targetObject.input._releasedHandler(this);
             }

Phaser/loader/AnimationLoader.ts

@@ -44,6 +44,7 @@ module Phaser {
             //  Zero or smaller than frame sizes?
             if (width == 0 || height == 0 || width < frameWidth || height < frameHeight || total === 0)
             {
+                throw new Error("AnimationLoader.parseSpriteSheet: width/height zero or width/height < given frameWidth/frameHeight");
                 return null;
             }
 

Phaser/loader/Cache.ts

@@ -312,6 +312,22 @@ module Phaser {
 
         }
 
+        public removeCanvas(key: string) {
+            delete this._canvases[key];
+        }
+
+        public removeImage(key: string) {
+            delete this._images[key];
+        }
+
+        public removeSound(key: string) {
+            delete this._sounds[key];
+        }
+
+        public removeText(key: string) {
+            delete this._text[key];
+        }
+
         /**
          * Clean up cache memory.
          */

Phaser/loader/Loader.ts

@@ -71,7 +71,7 @@ module Phaser {
         public hasLoaded: bool;
 
         /**
-         * Loading progress (from 0 to 1)
+         * Loading progress (from 0 to 100)
          * @type {number}
          */
         public progress: number;
@@ -97,9 +97,7 @@ module Phaser {
         }
 
         public get queueSize(): number {
-
             return this._queueSize;
-
         }
 
         /**
@@ -107,9 +105,9 @@ module Phaser {
          * @param key {string} Unique asset key of this image file.
          * @param url {string} URL of image file.
          */
-        public image(key: string, url: string) {
+        public image(key: string, url: string, overwrite: bool = false) {
 
-            if (this.checkKeyExists(key) === false)
+            if (overwrite == true || this.checkKeyExists(key) == false)
             {
                 this._queueSize++;
                 this._fileList[key] = { type: 'image', key: key, url: url, data: null, error: false, loaded: false };
@@ -294,7 +292,7 @@ module Phaser {
             }
             else
             {
-                this.progress = 1;
+                this.progress = 100;
                 this.hasLoaded = true;
                 this._gameCreateComplete.call(this._game);
 

Phaser/renderers/CanvasRenderer.ts

@@ -72,7 +72,7 @@ module Phaser {
 
         public renderGameObject(object) {
 
-            if (object.type == Types.SPRITE)
+            if (object.type == Types.SPRITE || object.type == Types.BUTTON)
             {
                 this.renderSprite(this._camera, object);
             }

README.md

@@ -30,12 +30,9 @@ TODO:
 * 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)
-* 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
 * Stage CSS3 transforms!!! Color tints, sepia, greyscale, all of those cool things :)
 * 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
 * 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.
@@ -54,13 +51,12 @@ TODO:
 * QuadTree.physics.checkHullIntersection
 * Fix the Motion methods for the new physics system
 * Move findShapeByPoint etc from Space to Manager (or at least add a proxy to them)
-* Make onInput events created only if input component is started
-* Add button mode linked to sprite frames
 * Add visible toggle if tween property is alpha <> 01
 * Camera.isHidden uses an array and length check, faster to swap for a single counter, also try to remove indexOf check
 * Tilemap.render - move layers length to var
 * Camera control method (touch/keyboard)
-
+* Tilemap.destroy needs doing
+* Look at the input targetObject - it doesn't seem to get cleared down all the time, maybe just a priority/alpha issue (check vis/alpha?)
 
 V1.0.0
 
@@ -136,6 +132,16 @@ V1.0.0
 * Moved 'facing' property from Sprite.body to Sprite.texture (may move to Sprite core)
 * Added Sprite.events.onDragStart and onDragStop
 * A tilemap can now be loaded without a tile sheet, should you just want to get the tile data from it and not render.
+* Added new Sprite.events: onAnimationStart, onAnimationComplete, onAnimationLoop
+* Added in support for the Input component PriorityID value and refactored Input.Pointer to respect it. Rollovers are perfect now :)
+* Added 2 new State functions: loadRender and loadUpdate, are called the same as render and update but only during the load process
+* Fixed Input.stopDrag so it fires an onInputUp event as well from the sprite.
+* Added support for a preRender state - very useful for certain types of special effects.
+* Cameras are now limited so they can never be larger than the Game.Stage size.
+* Added a new Button Game Object for easily creating in-game UI and menu systems.
+* Fixed bug where Sprite.alpha wasn't properly reflecting Sprite.texture.alpha.
+* Fixed bug where the hand cursor would be reset on input up, even if the mouse was still over the sprite.
+* Fixed bug where pressing down then moving out of the sprite area wouldn't properly reset the input state next time you moved over the sprite.
 
 
 V0.9.6

Tests/Tests.csproj

@@ -54,6 +54,18 @@
   </PropertyGroup>
   <ItemGroup>
     <TypeScriptCompile Include="cameras\basic camera 1.ts" />
+    <TypeScriptCompile Include="buttons\basic button.ts" />
+    <TypeScriptCompile Include="buttons\basic button 2.ts" />
+    <Content Include="buttons\basic button 2.js">
+      <DependentUpon>basic button 2.ts</DependentUpon>
+    </Content>
+    <Content Include="buttons\basic button.js">
+      <DependentUpon>basic button.ts</DependentUpon>
+    </Content>
+    <TypeScriptCompile Include="buttons\rotated buttons.ts" />
+    <Content Include="buttons\rotated buttons.js">
+      <DependentUpon>rotated buttons.ts</DependentUpon>
+    </Content>
     <Content Include="cameras\basic camera 1.js">
       <DependentUpon>basic camera 1.ts</DependentUpon>
     </Content>
@@ -206,6 +218,10 @@
       <DependentUpon>skewed scroller.ts</DependentUpon>
     </Content>
     <TypeScriptCompile Include="sprites\atlas 1.ts" />
+    <TypeScriptCompile Include="sprites\alpha.ts" />
+    <Content Include="sprites\alpha.js">
+      <DependentUpon>alpha.ts</DependentUpon>
+    </Content>
     <Content Include="sprites\atlas 1.js">
       <DependentUpon>atlas 1.ts</DependentUpon>
     </Content>

Tests/assets/buttons/button_texture_atlas.json

@@ -0,0 +1,36 @@
+{"frames": [
+
+{
+	"filename": "down",
+	"frame": {"x":0,"y":142,"w":193,"h":71},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":193,"h":71},
+	"sourceSize": {"w":193,"h":71}
+},
+{
+	"filename": "out",
+	"frame": {"x":0,"y":71,"w":193,"h":71},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":193,"h":71},
+	"sourceSize": {"w":193,"h":71}
+},
+{
+	"filename": "over",
+	"frame": {"x":0,"y":0,"w":193,"h":71},
+	"rotated": false,
+	"trimmed": false,
+	"spriteSourceSize": {"x":0,"y":0,"w":193,"h":71},
+	"sourceSize": {"w":193,"h":71}
+}],
+"meta": {
+	"app": "http://www.texturepacker.com",
+	"version": "1.0",
+	"image": "button_texture_atlas.png",
+	"format": "RGBA8888",
+	"size": {"w":193,"h":213},
+	"scale": "1",
+	"smartupdate": "$TexturePacker:SmartUpdate:94df81041404a206a4e9cd597a1e3495$"
+}
+}

Tests/buttons/basic button 2.js

@@ -0,0 +1,33 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/Button.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create);
+    function init() {
+        game.load.image('beast', 'assets/pics/shadow_of_the_beast2_other_world.png');
+        game.load.atlas('button', 'assets/buttons/button_texture_atlas.png', 'assets/buttons/button_texture_atlas.json');
+        game.load.start();
+    }
+    image:
+Phaser.Sprite
+    button:
+Phaser.Button
+    function create() {
+        //  This is just an image that we'll toggle the display of when you click the button
+        this.image = game.add.sprite(game.stage.centerX, 0, 'beast');
+        this.image.transform.origin.setTo(0.5, 0);
+        //  This button is created from a texture atlas.
+        //  Instead of frame IDs (like with a sprite sheet) we can tell it to use frame names instead.
+        //  In this case our atlast frame names were called 'over', 'out' and 'down', but they could be anything you want.
+        //  The function "clickedIt" will be called when the button is clicked or touched
+        this.button = game.add.button(game.stage.centerX, 400, 'button', clickedIt, this, 'over', 'out', 'down');
+        //  Just makes the button origin set to the middle, we only do this to center the button on-screen, no other reason
+        this.button.transform.origin.setTo(0.5, 0.5);
+    }
+    function clickedIt() {
+        if(this.image.visible == true) {
+            this.image.visible = false;
+        } else {
+            this.image.visible = true;
+        }
+    }
+})();

Tests/buttons/basic button 2.ts

@@ -0,0 +1,49 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/Button.ts" />
+
+(function () {
+
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create);
+
+    function init() {
+
+        game.load.image('beast', 'assets/pics/shadow_of_the_beast2_other_world.png');
+        game.load.atlas('button', 'assets/buttons/button_texture_atlas.png', 'assets/buttons/button_texture_atlas.json');
+        game.load.start();
+
+    }
+
+    image: Phaser.Sprite;
+    button: Phaser.Button;
+
+    function create() {
+
+        //  This is just an image that we'll toggle the display of when you click the button
+        this.image = game.add.sprite(game.stage.centerX, 0, 'beast');
+        this.image.transform.origin.setTo(0.5, 0);
+
+        //  This button is created from a texture atlas.
+        //  Instead of frame IDs (like with a sprite sheet) we can tell it to use frame names instead.
+        //  In this case our atlast frame names were called 'over', 'out' and 'down', but they could be anything you want.
+        //  The function "clickedIt" will be called when the button is clicked or touched
+        this.button = game.add.button(game.stage.centerX, 400, 'button', clickedIt, this, 'over', 'out', 'down');
+
+        //  Just makes the button origin set to the middle, we only do this to center the button on-screen, no other reason
+        this.button.transform.origin.setTo(0.5, 0.5);
+
+    }
+
+    function clickedIt() {
+
+        if (this.image.visible == true)
+        {
+            this.image.visible = false;
+        }
+        else
+        {
+            this.image.visible = true;
+        }
+
+    }
+
+})();

Tests/buttons/basic button.js

@@ -0,0 +1,34 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/Button.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create);
+    function init() {
+        game.load.image('beast', 'assets/pics/shadow_of_the_beast2_karamoon.png');
+        game.load.spritesheet('button', 'assets/buttons/button_sprite_sheet.png', 193, 71);
+        game.load.start();
+    }
+    image:
+Phaser.Sprite
+    button:
+Phaser.Button
+    function create() {
+        //  This is just an image that we'll toggle the display of when you click the button
+        this.image = game.add.sprite(game.stage.centerX, 0, 'beast');
+        this.image.transform.origin.setTo(0.5, 0);
+        //  This button is created from a sprite sheet.
+        //  Frame 0 = the 'down' state
+        //  Frame 1 = the 'out' state
+        //  Frame 2 = the 'over' state
+        //  The function "clickedIt" will be called when the button is clicked or touched
+        this.button = game.add.button(game.stage.centerX, 400, 'button', clickedIt, this, 2, 1, 0);
+        //  Just makes the button origin set to the middle, we only do this to center the button on-screen, no other reason
+        this.button.transform.origin.setTo(0.5, 0.5);
+    }
+    function clickedIt() {
+        if(this.image.visible == true) {
+            this.image.visible = false;
+        } else {
+            this.image.visible = true;
+        }
+    }
+})();

Tests/buttons/basic button.ts

@@ -0,0 +1,50 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/Button.ts" />
+
+(function () {
+
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create);
+
+    function init() {
+
+        game.load.image('beast', 'assets/pics/shadow_of_the_beast2_karamoon.png');
+        game.load.spritesheet('button', 'assets/buttons/button_sprite_sheet.png', 193, 71);
+        game.load.start();
+
+    }
+
+    image: Phaser.Sprite;
+    button: Phaser.Button;
+
+    function create() {
+
+        //  This is just an image that we'll toggle the display of when you click the button
+        this.image = game.add.sprite(game.stage.centerX, 0, 'beast');
+        this.image.transform.origin.setTo(0.5, 0);
+
+        //  This button is created from a sprite sheet.
+        //  Frame 0 = the 'down' state
+        //  Frame 1 = the 'out' state
+        //  Frame 2 = the 'over' state
+        //  The function "clickedIt" will be called when the button is clicked or touched
+        this.button = game.add.button(game.stage.centerX, 400, 'button', clickedIt, this, 2, 1, 0);
+
+        //  Just makes the button origin set to the middle, we only do this to center the button on-screen, no other reason
+        this.button.transform.origin.setTo(0.5, 0.5);
+
+    }
+
+    function clickedIt() {
+
+        if (this.image.visible == true)
+        {
+            this.image.visible = false;
+        }
+        else
+        {
+            this.image.visible = true;
+        }
+
+    }
+
+})();

Tests/buttons/rotated buttons.js

@@ -0,0 +1,37 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/Button.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+    function init() {
+        game.load.image('beast', 'assets/pics/shadow_of_the_beast2_other_world.png');
+        game.load.atlas('button', 'assets/buttons/button_texture_atlas.png', 'assets/buttons/button_texture_atlas.json');
+        game.load.start();
+    }
+    image:
+Phaser.Sprite
+    button:
+Phaser.Button
+    function create() {
+        //  This is just an image that we'll toggle the display of when you click the button
+        this.image = game.add.sprite(game.stage.centerX, 0, 'beast');
+        this.image.transform.origin.setTo(0.5, 0);
+        //  This button is created from a texture atlas.
+        //  Instead of frame IDs (like with a sprite sheet) we can tell it to use frame names instead.
+        //  In this case our atlast frame names were called 'over', 'out' and 'down', but they could be anything you want.
+        //  The function "clickedIt" will be called when the button is clicked or touched
+        this.button = game.add.button(game.stage.centerX, 400, 'button', clickedIt, this, 'over', 'out', 'down');
+        //  Makes the button origin set to the middle
+        this.button.transform.origin.setTo(0.5, 0.5);
+    }
+    function update() {
+        //  Rotate the button each frame, the button states will still work and respond.
+        this.button.rotation += 1;
+    }
+    function clickedIt() {
+        if(this.image.visible == true) {
+            this.image.visible = false;
+        } else {
+            this.image.visible = true;
+        }
+    }
+})();

Tests/buttons/rotated buttons.ts

@@ -0,0 +1,56 @@
+/// <reference path="../../Phaser/Game.ts" />
+/// <reference path="../../Phaser/gameobjects/Button.ts" />
+
+(function () {
+
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create, update);
+
+    function init() {
+
+        game.load.image('beast', 'assets/pics/shadow_of_the_beast2_other_world.png');
+        game.load.atlas('button', 'assets/buttons/button_texture_atlas.png', 'assets/buttons/button_texture_atlas.json');
+        game.load.start();
+
+    }
+
+    image: Phaser.Sprite;
+    button: Phaser.Button;
+
+    function create() {
+
+        //  This is just an image that we'll toggle the display of when you click the button
+        this.image = game.add.sprite(game.stage.centerX, 0, 'beast');
+        this.image.transform.origin.setTo(0.5, 0);
+
+        //  This button is created from a texture atlas.
+        //  Instead of frame IDs (like with a sprite sheet) we can tell it to use frame names instead.
+        //  In this case our atlast frame names were called 'over', 'out' and 'down', but they could be anything you want.
+        //  The function "clickedIt" will be called when the button is clicked or touched
+        this.button = game.add.button(game.stage.centerX, 400, 'button', clickedIt, this, 'over', 'out', 'down');
+
+        //  Makes the button origin set to the middle
+        this.button.transform.origin.setTo(0.5, 0.5);
+
+    }
+
+    function update() {
+
+        //  Rotate the button each frame, the button states will still work and respond.
+        this.button.rotation += 1;
+
+    }
+
+    function clickedIt() {
+
+        if (this.image.visible == true)
+        {
+            this.image.visible = false;
+        }
+        else
+        {
+            this.image.visible = true;
+        }
+
+    }
+
+})();

Tests/phaser.js

@@ -1274,6 +1274,7 @@ var Phaser;
         Types.EMITTER = 4;
         Types.TILEMAP = 5;
         Types.SCROLLZONE = 6;
+        Types.BUTTON = 7;
         Types.GEOM_POINT = 0;
         Types.GEOM_CIRCLE = 1;
         Types.GEOM_Rectangle = 2;
@@ -1987,6 +1988,13 @@ var Phaser;
             this._dy = 0;
             this._dw = 0;
             this._dh = 0;
+            /**
+            * You can set a globalCompositeOperation that will be applied before the render method is called on this Sprite.
+            * This is useful if you wish to apply an effect like 'lighten'.
+            * If this value is set it will call a canvas context save and restore before and after the render pass, so use it sparingly.
+            * Set to null to disable.
+            */
+            this.globalCompositeOperation = null;
             this.game = game;
             this.type = Phaser.Types.GEOMSPRITE;
             this.canvas = document.createElement('canvas');
@@ -2133,8 +2141,10 @@ var Phaser;
         */
         function (objects) {
             for(var i = 0; i < objects.length; i++) {
-                objects[i].texture.canvas = this.canvas;
+                if(objects[i].texture) {
-                objects[i].texture.context = this.context;
+                    objects[i].texture.canvas = this.canvas;
+                    objects[i].texture.context = this.context;
+                }
             }
         };
         DynamicTexture.prototype.clear = /**
@@ -2152,7 +2162,14 @@ var Phaser;
         function (x, y) {
             if (typeof x === "undefined") { x = 0; }
             if (typeof y === "undefined") { y = 0; }
+            if(this.globalCompositeOperation) {
+                this.game.stage.context.save();
+                this.game.stage.context.globalCompositeOperation = this.globalCompositeOperation;
+            }
             this.game.stage.context.drawImage(this.canvas, x, y);
+            if(this.globalCompositeOperation) {
+                this.game.stage.context.restore();
+            }
         };
         Object.defineProperty(DynamicTexture.prototype, "width", {
             get: function () {
@@ -2206,6 +2223,7 @@ var Phaser;
             }
             //  Zero or smaller than frame sizes?
             if(width == 0 || height == 0 || width < frameWidth || height < frameHeight || total === 0) {
+                throw new Error("AnimationLoader.parseSpriteSheet: width/height zero or width/height < given frameWidth/frameHeight");
                 return null;
             }
             //  Let's create some frames then
@@ -2345,6 +2363,8 @@ var Phaser;
             this._timeNextFrame = this._game.time.now + this.delay;
             this._frameIndex = 0;
             this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
+            this._parent.events.onAnimationStart.dispatch(this._parent, this);
+            return this;
         };
         Animation.prototype.restart = /**
         * Play this animation from the first frame.
@@ -2374,6 +2394,7 @@ var Phaser;
                     if(this.looped) {
                         this._frameIndex = 0;
                         this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
+                        this._parent.events.onAnimationLoop.dispatch(this._parent, this);
                     } else {
                         this.onComplete();
                     }
@@ -2403,8 +2424,8 @@ var Phaser;
         function () {
             this.isPlaying = false;
             this.isFinished = true;
-            //  callback goes here
+            this._parent.events.onAnimationComplete.dispatch(this._parent, this);
-                    };
+        };
         return Animation;
     })();
     Phaser.Animation = Animation;    
@@ -2657,7 +2678,7 @@ var Phaser;
                 */
                 this.currentFrame = null;
                 this._parent = parent;
-                this._game = parent.game;
+                this.game = parent.game;
                 this._anims = {
                 };
             }
@@ -2686,6 +2707,12 @@ var Phaser;
                 if(this._frameData == null) {
                     return;
                 }
+                //  Create the signals the AnimationManager will emit
+                if(this._parent.events.onAnimationStart == null) {
+                    this._parent.events.onAnimationStart = new Phaser.Signal();
+                    this._parent.events.onAnimationComplete = new Phaser.Signal();
+                    this._parent.events.onAnimationLoop = new Phaser.Signal();
+                }
                 if(frames == null) {
                     frames = this._frameData.getFrameIndexes();
                 } else {
@@ -2697,7 +2724,7 @@ var Phaser;
                 if(useNumericIndex == false) {
                     frames = this._frameData.getFrameIndexesByName(frames);
                 }
-                this._anims[name] = new Phaser.Animation(this._game, this._parent, this._frameData, name, frames, frameRate, loop);
+                this._anims[name] = new Phaser.Animation(this.game, this._parent, this._frameData, name, frames, frameRate, loop);
                 this.currentAnim = this._anims[name];
                 this.currentFrame = this.currentAnim.currentFrame;
                 return this._anims[name];
@@ -2733,11 +2760,11 @@ var Phaser;
                 if(this._anims[name]) {
                     if(this.currentAnim == this._anims[name]) {
                         if(this.currentAnim.isPlaying == false) {
-                            this.currentAnim.play(frameRate, loop);
+                            return this.currentAnim.play(frameRate, loop);
                         }
                     } else {
                         this.currentAnim = this._anims[name];
-                        this.currentAnim.play(frameRate, loop);
+                        return this.currentAnim.play(frameRate, loop);
                     }
                 }
             };
@@ -2784,7 +2811,7 @@ var Phaser;
                     return this._frameIndex;
                 },
                 set: function (value) {
-                    if(this._frameData.getFrame(value) !== null) {
+                    if(this._frameData && this._frameData.getFrame(value) !== null) {
                         this.currentFrame = this._frameData.getFrame(value);
                         this._parent.texture.width = this.currentFrame.width;
                         this._parent.texture.height = this.currentFrame.height;
@@ -2803,7 +2830,7 @@ var Phaser;
                     return this.currentFrame.name;
                 },
                 set: function (value) {
-                    if(this._frameData.getFrameByName(value) !== null) {
+                    if(this._frameData.getFrameByName(value)) {
                         this.currentFrame = this._frameData.getFrameByName(value);
                         this._parent.texture.width = this.currentFrame.width;
                         this._parent.texture.height = this.currentFrame.height;
@@ -3372,9 +3399,14 @@ var Phaser;
                     * @default null
                     */
                     this.boundsSprite = null;
+                    /**
+                    * If this object is set to consume the pointer event then it will stop all propogation from this object on.
+                    * For example if you had a stack of 6 sprites with the same priority IDs and one consumed the event, none of the others would receive it.
+                    * @type {Boolean}
+                    */
                     this.consumePointerEvent = false;
                     this.game = parent.game;
-                    this.sprite = parent;
+                    this._parent = parent;
                     this.enabled = false;
                 }
                 Input.prototype.pointerX = /**
@@ -3505,9 +3537,18 @@ var Phaser;
                         }
                         this.snapOffset = new Phaser.Point();
                         this.enabled = true;
-                        this.game.input.addGameObject(this.sprite);
+                        this.game.input.addGameObject(this._parent);
+                        //  Create the signals the Input component will emit
+                        if(this._parent.events.onInputOver == null) {
+                            this._parent.events.onInputOver = new Phaser.Signal();
+                            this._parent.events.onInputOut = new Phaser.Signal();
+                            this._parent.events.onInputDown = new Phaser.Signal();
+                            this._parent.events.onInputUp = new Phaser.Signal();
+                            this._parent.events.onDragStart = new Phaser.Signal();
+                            this._parent.events.onDragStop = new Phaser.Signal();
+                        }
                     }
-                    return this.sprite;
+                    return this._parent;
                 };
                 Input.prototype.reset = function () {
                     this.enabled = false;
@@ -3552,25 +3593,25 @@ var Phaser;
                 * Checks if the given pointer is over this Sprite. All checks are done in world coordinates.
                 */
                 function (pointer) {
-                    if(this.enabled == false || this.sprite.visible == false) {
+                    if(this.enabled == false || this._parent.visible == false) {
                         return false;
                     } else {
-                        return Phaser.SpriteUtils.overlapsXY(this.sprite, pointer.worldX(), pointer.worldY());
+                        return Phaser.SpriteUtils.overlapsXY(this._parent, pointer.worldX(), pointer.worldY());
                     }
                 };
                 Input.prototype.update = /**
                 * Update
                 */
                 function (pointer) {
-                    if(this.enabled == false || this.sprite.visible == false) {
+                    if(this.enabled == false || this._parent.visible == false) {
                         return false;
                     }
                     if(this.draggable && this._draggedPointerID == pointer.id) {
                         return this.updateDrag(pointer);
                     } else if(this._pointerData[pointer.id].isOver == true) {
-                        if(Phaser.SpriteUtils.overlapsXY(this.sprite, pointer.worldX(), pointer.worldY())) {
+                        if(Phaser.SpriteUtils.overlapsXY(this._parent, pointer.worldX(), pointer.worldY())) {
-                            this._pointerData[pointer.id].x = pointer.x - this.sprite.x;
+                            this._pointerData[pointer.id].x = pointer.x - this._parent.x;
-                            this._pointerData[pointer.id].y = pointer.y - this.sprite.y;
+                            this._pointerData[pointer.id].y = pointer.y - this._parent.y;
                             return true;
                         } else {
                             this._pointerOutHandler(pointer);
@@ -3584,12 +3625,12 @@ var Phaser;
                         this._pointerData[pointer.id].isOver = true;
                         this._pointerData[pointer.id].isOut = false;
                         this._pointerData[pointer.id].timeOver = this.game.time.now;
-                        this._pointerData[pointer.id].x = pointer.x - this.sprite.x;
+                        this._pointerData[pointer.id].x = pointer.x - this._parent.x;
-                        this._pointerData[pointer.id].y = pointer.y - this.sprite.y;
+                        this._pointerData[pointer.id].y = pointer.y - this._parent.y;
                         if(this.useHandCursor && this._pointerData[pointer.id].isDragged == false) {
                             this.game.stage.canvas.style.cursor = "pointer";
                         }
-                        this.sprite.events.onInputOver.dispatch(this.sprite, pointer);
+                        this._parent.events.onInputOver.dispatch(this._parent, pointer);
                     }
                 };
                 Input.prototype._pointerOutHandler = function (pointer) {
@@ -3599,41 +3640,46 @@ var Phaser;
                     if(this.useHandCursor && this._pointerData[pointer.id].isDragged == false) {
                         this.game.stage.canvas.style.cursor = "default";
                     }
-                    this.sprite.events.onInputOut.dispatch(this.sprite, pointer);
+                    this._parent.events.onInputOut.dispatch(this._parent, pointer);
                 };
                 Input.prototype._touchedHandler = function (pointer) {
                     if(this._pointerData[pointer.id].isDown == false && this._pointerData[pointer.id].isOver == true) {
                         this._pointerData[pointer.id].isDown = true;
                         this._pointerData[pointer.id].isUp = false;
                         this._pointerData[pointer.id].timeDown = this.game.time.now;
-                        this.sprite.events.onInputDown.dispatch(this.sprite, pointer);
+                        this._parent.events.onInputDown.dispatch(this._parent, pointer);
                         //  Start drag
                         //if (this.draggable && this.isDragged == false && pointer.targetObject == null)
                         if(this.draggable && this.isDragged == false) {
                             this.startDrag(pointer);
                         }
                         if(this.bringToTop) {
-                            this.sprite.group.bringToTop(this.sprite);
+                            this._parent.group.bringToTop(this._parent);
                         }
                     }
                     //  Consume the event?
                     return this.consumePointerEvent;
                 };
                 Input.prototype._releasedHandler = function (pointer) {
-                    //  If was previously touched by this Pointer, check if still is
+                    //  If was previously touched by this Pointer, check if still is AND still over this item
                     if(this._pointerData[pointer.id].isDown && pointer.isUp) {
                         this._pointerData[pointer.id].isDown = false;
                         this._pointerData[pointer.id].isUp = true;
                         this._pointerData[pointer.id].timeUp = this.game.time.now;
                         this._pointerData[pointer.id].downDuration = this._pointerData[pointer.id].timeUp - this._pointerData[pointer.id].timeDown;
-                        this.sprite.events.onInputUp.dispatch(this.sprite, pointer);
+                        //  Only release the InputUp signal if the pointer is still over this sprite
+                        if(Phaser.SpriteUtils.overlapsXY(this._parent, pointer.worldX(), pointer.worldY())) {
+                            this._parent.events.onInputUp.dispatch(this._parent, pointer);
+                        } else {
+                            //  Pointer outside the sprite? Reset the cursor
+                            if(this.useHandCursor) {
+                                this.game.stage.canvas.style.cursor = "default";
+                            }
+                        }
                         //  Stop drag
                         if(this.draggable && this.isDragged && this._draggedPointerID == pointer.id) {
                             this.stopDrag(pointer);
                         }
-                        if(this.useHandCursor) {
-                            this.game.stage.canvas.style.cursor = "default";
-                        }
                     }
                 };
                 Input.prototype.updateDrag = /**
@@ -3645,10 +3691,10 @@ var Phaser;
                         return false;
                     }
                     if(this.allowHorizontalDrag) {
-                        this.sprite.x = pointer.x + this._dragPoint.x + this.dragOffset.x;
+                        this._parent.x = pointer.x + this._dragPoint.x + this.dragOffset.x;
                     }
                     if(this.allowVerticalDrag) {
-                        this.sprite.y = pointer.y + this._dragPoint.y + this.dragOffset.y;
+                        this._parent.y = pointer.y + this._dragPoint.y + this.dragOffset.y;
                     }
                     if(this.boundsRect) {
                         this.checkBoundsRect();
@@ -3657,8 +3703,8 @@ var Phaser;
                         this.checkBoundsSprite();
                     }
                     if(this.snapOnDrag) {
-                        this.sprite.x = Math.floor(this.sprite.x / this.snapX) * this.snapX;
+                        this._parent.x = Math.floor(this._parent.x / this.snapX) * this.snapX;
-                        this.sprite.y = Math.floor(this.sprite.y / this.snapY) * this.snapY;
+                        this._parent.y = Math.floor(this._parent.y / this.snapY) * this.snapY;
                     }
                     return true;
                 };
@@ -3777,17 +3823,17 @@ var Phaser;
                     this._pointerData[pointer.id].isDragged = true;
                     if(this.dragFromCenter) {
                         //	Move the sprite to the middle of the pointer
-                        //this._dragPoint.setTo(-this.sprite.worldView.halfWidth, -this.sprite.worldView.halfHeight);
+                        //this._dragPoint.setTo(-this._parent.worldView.halfWidth, -this._parent.worldView.halfHeight);
-                        //this._dragPoint.setTo(this.sprite.transform.center.x, this.sprite.transform.center.y);
+                        //this._dragPoint.setTo(this._parent.transform.center.x, this._parent.transform.center.y);
-                        this._dragPoint.setTo(this.sprite.x - pointer.x, this.sprite.y - pointer.y);
+                        this._dragPoint.setTo(this._parent.x - pointer.x, this._parent.y - pointer.y);
                     } else {
-                        this._dragPoint.setTo(this.sprite.x - pointer.x, this.sprite.y - pointer.y);
+                        this._dragPoint.setTo(this._parent.x - pointer.x, this._parent.y - pointer.y);
                     }
                     this.updateDrag(pointer);
                     if(this.bringToTop) {
-                        this.sprite.group.bringToTop(this.sprite);
+                        this._parent.group.bringToTop(this._parent);
                     }
-                    this.sprite.events.onDragStart.dispatch(this.sprite, pointer);
+                    this._parent.events.onDragStart.dispatch(this._parent, pointer);
                 };
                 Input.prototype.stopDrag = /**
                 * Called by Pointer when drag is stopped on this Sprite. Should not usually be called directly.
@@ -3797,10 +3843,11 @@ var Phaser;
                     this._draggedPointerID = -1;
                     this._pointerData[pointer.id].isDragged = false;
                     if(this.snapOnRelease) {
-                        this.sprite.x = Math.floor(this.sprite.x / this.snapX) * this.snapX;
+                        this._parent.x = Math.floor(this._parent.x / this.snapX) * this.snapX;
-                        this.sprite.y = Math.floor(this.sprite.y / this.snapY) * this.snapY;
+                        this._parent.y = Math.floor(this._parent.y / this.snapY) * this.snapY;
                     }
-                    this.sprite.events.onDragStop.dispatch(this.sprite, pointer);
+                    this._parent.events.onDragStop.dispatch(this._parent, pointer);
+                    this._parent.events.onInputUp.dispatch(this._parent, pointer);
                 };
                 Input.prototype.setDragLock = /**
                 * Restricts this sprite to drag movement only on the given axis. Note: If both are set to false the sprite will never move!
@@ -3842,30 +3889,30 @@ var Phaser;
                 * Bounds Rect check for the sprite drag
                 */
                 function () {
-                    if(this.sprite.x < this.boundsRect.left) {
+                    if(this._parent.x < this.boundsRect.left) {
-                        this.sprite.x = this.boundsRect.x;
+                        this._parent.x = this.boundsRect.x;
-                    } else if((this.sprite.x + this.sprite.width) > this.boundsRect.right) {
+                    } else if((this._parent.x + this._parent.width) > this.boundsRect.right) {
-                        this.sprite.x = this.boundsRect.right - this.sprite.width;
+                        this._parent.x = this.boundsRect.right - this._parent.width;
                     }
-                    if(this.sprite.y < this.boundsRect.top) {
+                    if(this._parent.y < this.boundsRect.top) {
-                        this.sprite.y = this.boundsRect.top;
+                        this._parent.y = this.boundsRect.top;
-                    } else if((this.sprite.y + this.sprite.height) > this.boundsRect.bottom) {
+                    } else if((this._parent.y + this._parent.height) > this.boundsRect.bottom) {
-                        this.sprite.y = this.boundsRect.bottom - this.sprite.height;
+                        this._parent.y = this.boundsRect.bottom - this._parent.height;
                     }
                 };
                 Input.prototype.checkBoundsSprite = /**
                 * Parent Sprite Bounds check for the sprite drag
                 */
                 function () {
-                    if(this.sprite.x < this.boundsSprite.x) {
+                    if(this._parent.x < this.boundsSprite.x) {
-                        this.sprite.x = this.boundsSprite.x;
+                        this._parent.x = this.boundsSprite.x;
-                    } else if((this.sprite.x + this.sprite.width) > (this.boundsSprite.x + this.boundsSprite.width)) {
+                    } else if((this._parent.x + this._parent.width) > (this.boundsSprite.x + this.boundsSprite.width)) {
-                        this.sprite.x = (this.boundsSprite.x + this.boundsSprite.width) - this.sprite.width;
+                        this._parent.x = (this.boundsSprite.x + this.boundsSprite.width) - this._parent.width;
                     }
-                    if(this.sprite.y < this.boundsSprite.y) {
+                    if(this._parent.y < this.boundsSprite.y) {
-                        this.sprite.y = this.boundsSprite.y;
+                        this._parent.y = this.boundsSprite.y;
-                    } else if((this.sprite.y + this.sprite.height) > (this.boundsSprite.y + this.boundsSprite.height)) {
+                    } else if((this._parent.y + this._parent.height) > (this.boundsSprite.y + this.boundsSprite.height)) {
-                        this.sprite.y = (this.boundsSprite.y + this.boundsSprite.height) - this.sprite.height;
+                        this._parent.y = (this.boundsSprite.y + this.boundsSprite.height) - this._parent.height;
                     }
                 };
                 Input.prototype.renderDebugInfo = /**
@@ -3876,13 +3923,13 @@ var Phaser;
                 */
                 function (x, y, color) {
                     if (typeof color === "undefined") { color = 'rgb(255,255,255)'; }
-                    this.sprite.texture.context.font = '14px Courier';
+                    this._parent.texture.context.font = '14px Courier';
-                    this.sprite.texture.context.fillStyle = color;
+                    this._parent.texture.context.fillStyle = color;
-                    this.sprite.texture.context.fillText('Sprite Input: (' + this.sprite.worldView.width + ' x ' + this.sprite.worldView.height + ')', x, y);
+                    this._parent.texture.context.fillText('Sprite Input: (' + this._parent.worldView.width + ' x ' + this._parent.worldView.height + ')', x, y);
-                    this.sprite.texture.context.fillText('x: ' + this.pointerX().toFixed(1) + ' y: ' + this.pointerY().toFixed(1), x, y + 14);
+                    this._parent.texture.context.fillText('x: ' + this.pointerX().toFixed(1) + ' y: ' + this.pointerY().toFixed(1), x, y + 14);
-                    this.sprite.texture.context.fillText('over: ' + this.pointerOver() + ' duration: ' + this.overDuration().toFixed(0), x, y + 28);
+                    this._parent.texture.context.fillText('over: ' + this.pointerOver() + ' duration: ' + this.overDuration().toFixed(0), x, y + 28);
-                    this.sprite.texture.context.fillText('down: ' + this.pointerDown() + ' duration: ' + this.downDuration().toFixed(0), x, y + 42);
+                    this._parent.texture.context.fillText('down: ' + this.pointerDown() + ' duration: ' + this.downDuration().toFixed(0), x, y + 42);
-                    this.sprite.texture.context.fillText('just over: ' + this.justOver() + ' just out: ' + this.justOut(), x, y + 56);
+                    this._parent.texture.context.fillText('just over: ' + this.justOver() + ' just out: ' + this.justOut(), x, y + 56);
                 };
                 return Input;
             })();
@@ -3904,23 +3951,16 @@ var Phaser;
         (function (Sprite) {
             var Events = (function () {
                 /**
-                * The Events component is a collection of events fired by the parent Sprite and its other components.
+                * The Events component is a collection of events fired by the parent game object and its components.
-                * @param parent The Sprite using this Input component
+                * @param parent The game object using this Input component
                 */
                 function Events(parent) {
                     this.game = parent.game;
-                    this.sprite = parent;
+                    this._parent = parent;
                     this.onAddedToGroup = new Phaser.Signal();
                     this.onRemovedFromGroup = new Phaser.Signal();
                     this.onKilled = new Phaser.Signal();
                     this.onRevived = new Phaser.Signal();
-                    //  Only create these if Sprite input is enabled?
-                    this.onInputOver = new Phaser.Signal();
-                    this.onInputOut = new Phaser.Signal();
-                    this.onInputDown = new Phaser.Signal();
-                    this.onInputUp = new Phaser.Signal();
-                    this.onDragStart = new Phaser.Signal();
-                    this.onDragStop = new Phaser.Signal();
                 }
                 return Events;
             })();
@@ -7168,9 +7208,9 @@ var Phaser;
             this.z = -1;
             this.group = null;
             this.name = '';
+            this.events = new Phaser.Components.Sprite.Events(this);
             this.animations = new Phaser.Components.AnimationManager(this);
             this.input = new Phaser.Components.Sprite.Input(this);
-            this.events = new Phaser.Components.Sprite.Events(this);
             this.texture = new Phaser.Components.Texture(this);
             this.transform = new Phaser.Components.Transform(this);
             if(key !== null) {
@@ -7218,6 +7258,22 @@ var Phaser;
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(Sprite.prototype, "alpha", {
+            get: /**
+            * The alpha of the Sprite between 0 and 1, a value of 1 being fully opaque.
+            */
+            function () {
+                return this.texture.alpha;
+            },
+            set: /**
+            * The alpha of the Sprite between 0 and 1, a value of 1 being fully opaque.
+            */
+            function (value) {
+                this.texture.alpha = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(Sprite.prototype, "frame", {
             get: /**
             * Get the animation frame number.
@@ -7658,7 +7714,7 @@ var Phaser;
                 */
                 this.loaded = false;
                 /**
-                * Whether the Sprite background is opaque or not. If set to true the Sprite is filled with
+                * Whether the texture background is opaque or not. If set to true the object is filled with
                 * the value of Texture.backgroundColor every frame. Normally you wouldn't enable this but
                 * for some effects it can be handy.
                 * @type {boolean}
@@ -8957,8 +9013,9 @@ var Phaser;
         * @param key {string} Unique asset key of this image file.
         * @param url {string} URL of image file.
         */
-        function (key, url) {
+        function (key, url, overwrite) {
-            if(this.checkKeyExists(key) === false) {
+            if (typeof overwrite === "undefined") { overwrite = false; }
+            if(overwrite == true || this.checkKeyExists(key) == false) {
                 this._queueSize++;
                 this._fileList[key] = {
                     type: 'image',
@@ -9154,7 +9211,7 @@ var Phaser;
                 this._progressChunk = 100 / this._keys.length;
                 this.loadFile();
             } else {
-                this.progress = 1;
+                this.progress = 100;
                 this.hasLoaded = true;
                 this._gameCreateComplete.call(this._game);
                 if(this._onComplete !== null) {
@@ -9580,6 +9637,18 @@ var Phaser;
             }
             return output;
         };
+        Cache.prototype.removeCanvas = function (key) {
+            delete this._canvases[key];
+        };
+        Cache.prototype.removeImage = function (key) {
+            delete this._images[key];
+        };
+        Cache.prototype.removeSound = function (key) {
+            delete this._sounds[key];
+        };
+        Cache.prototype.removeText = function (key) {
+            delete this._text[key];
+        };
         Cache.prototype.destroy = /**
         * Clean up cache memory.
         */
@@ -10959,6 +11028,8 @@ var Phaser;
             this.game = game;
             this.ID = id;
             this.z = id;
+            width = this.game.math.clamp(width, this.game.stage.width, 1);
+            height = this.game.math.clamp(height, this.game.stage.height, 1);
             //  The view into the world we wish to render (by default the full game world size)
             //  The size of this Rect is the same as screenView, but the values are all in world coordinates instead of screen coordinates
             this.worldView = new Phaser.Rectangle(0, 0, width, height);
@@ -12413,6 +12484,151 @@ var Phaser;
     Phaser.Emitter = Emitter;    
 })(Phaser || (Phaser = {}));
 /// <reference path="../Game.ts" />
+/// <reference path="../math/Vec2.ts" />
+/// <reference path="../geom/Rectangle.ts" />
+/// <reference path="../components/animation/AnimationManager.ts" />
+/// <reference path="../components/Texture.ts" />
+/// <reference path="../components/Transform.ts" />
+/// <reference path="../components/sprite/Input.ts" />
+/// <reference path="../components/sprite/Events.ts" />
+/**
+* Phaser - Button
+*/
+var Phaser;
+(function (Phaser) {
+    var Button = (function (_super) {
+        __extends(Button, _super);
+        /**
+        * Create a new <code>Button</code> object.
+        *
+        * @param game {Phaser.Game} Current game instance.
+        * @param [x] {number} the initial x position of the button.
+        * @param [y] {number} the initial y position of the button.
+        * @param [key] {string} Key of the graphic you want to load for this button.
+        */
+        function Button(game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame) {
+            if (typeof x === "undefined") { x = 0; }
+            if (typeof y === "undefined") { y = 0; }
+            if (typeof key === "undefined") { key = null; }
+            if (typeof callback === "undefined") { callback = null; }
+            if (typeof callbackContext === "undefined") { callbackContext = null; }
+            if (typeof overFrame === "undefined") { overFrame = null; }
+            if (typeof outFrame === "undefined") { outFrame = null; }
+            if (typeof downFrame === "undefined") { downFrame = null; }
+                _super.call(this, game, x, y, key, outFrame);
+            this._onOverFrameName = null;
+            this._onOutFrameName = null;
+            this._onDownFrameName = null;
+            this._onUpFrameName = null;
+            this._onOverFrameID = null;
+            this._onOutFrameID = null;
+            this._onDownFrameID = null;
+            this._onUpFrameID = null;
+            this.type = Phaser.Types.BUTTON;
+            if(typeof overFrame == 'string') {
+                this._onOverFrameName = overFrame;
+            } else {
+                this._onOverFrameID = overFrame;
+            }
+            if(typeof outFrame == 'string') {
+                this._onOutFrameName = outFrame;
+                this._onUpFrameName = outFrame;
+            } else {
+                this._onOutFrameID = outFrame;
+                this._onUpFrameID = outFrame;
+            }
+            if(typeof downFrame == 'string') {
+                this._onDownFrameName = downFrame;
+            } else {
+                this._onDownFrameID = downFrame;
+            }
+            //  These are the signals the game will subscribe to
+            this.onInputOver = new Phaser.Signal();
+            this.onInputOut = new Phaser.Signal();
+            this.onInputDown = new Phaser.Signal();
+            this.onInputUp = new Phaser.Signal();
+            //  Set a default signal for them
+            if(callback) {
+                this.onInputUp.add(callback, callbackContext);
+            }
+            this.input.start(0, false, true);
+            //  Redirect the input events to here so we can handle animation updates, etc
+            this.events.onInputOver.add(this.onInputOverHandler, this);
+            this.events.onInputOut.add(this.onInputOutHandler, this);
+            this.events.onInputDown.add(this.onInputDownHandler, this);
+            this.events.onInputUp.add(this.onInputUpHandler, this);
+            //  By default we'll position it using screen space, not world space.
+            this.transform.scrollFactor.setTo(0, 0);
+        }
+        Button.prototype.onInputOverHandler = //  TODO
+        //public tabIndex: number;
+        //public tabEnabled: bool;
+        //  ENTER or SPACE can activate this button if it has focus
+        function (pointer) {
+            if(this._onOverFrameName != null) {
+                this.frameName = this._onOverFrameName;
+            } else if(this._onOverFrameID != null) {
+                this.frame = this._onOverFrameID;
+            }
+            if(this.onInputOver) {
+                this.onInputOver.dispatch(this, pointer);
+            }
+        };
+        Button.prototype.onInputOutHandler = function (pointer) {
+            if(this._onOutFrameName != null) {
+                this.frameName = this._onOutFrameName;
+            } else if(this._onOutFrameID != null) {
+                this.frame = this._onOutFrameID;
+            }
+            if(this.onInputOut) {
+                this.onInputOut.dispatch(this, pointer);
+            }
+        };
+        Button.prototype.onInputDownHandler = function (pointer) {
+            if(this._onDownFrameName != null) {
+                this.frameName = this._onDownFrameName;
+            } else if(this._onDownFrameID != null) {
+                this.frame = this._onDownFrameID;
+            }
+            if(this.onInputDown) {
+                this.onInputDown.dispatch(this, pointer);
+            }
+        };
+        Button.prototype.onInputUpHandler = function (pointer) {
+            if(this._onUpFrameName != null) {
+                this.frameName = this._onUpFrameName;
+            } else if(this._onUpFrameID != null) {
+                this.frame = this._onUpFrameID;
+            }
+            if(this.onInputUp) {
+                this.onInputUp.dispatch(this, pointer);
+            }
+        };
+        Object.defineProperty(Button.prototype, "priorityID", {
+            get: function () {
+                return this.input.priorityID;
+            },
+            set: function (value) {
+                this.input.priorityID = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Button.prototype, "useHandCursor", {
+            get: function () {
+                return this.input.useHandCursor;
+            },
+            set: function (value) {
+                this.input.useHandCursor = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        return Button;
+    })(Phaser.Sprite);
+    Phaser.Button = Button;    
+})(Phaser || (Phaser = {}));
+/// <reference path="../Game.ts" />
 /// <reference path="../geom/Rectangle.ts" />
 /// <reference path="../math/Vec2.ts" />
 /**
@@ -13247,6 +13463,8 @@ var Phaser;
         };
         Tilemap.prototype.postUpdate = function () {
         };
+        Tilemap.prototype.destroy = function () {
+        };
         Tilemap.prototype.parseCSV = /**
         * Parset csv map data and generate tiles.
         * @param data {string} CSV map data.
@@ -13497,6 +13715,7 @@ var Phaser;
 /// <reference path="../gameobjects/Emitter.ts" />
 /// <reference path="../gameobjects/Particle.ts" />
 /// <reference path="../gameobjects/Sprite.ts" />
+/// <reference path="../gameobjects/Button.ts" />
 /// <reference path="../gameobjects/ScrollZone.ts" />
 /// <reference path="../gameobjects/DynamicTexture.ts" />
 /// <reference path="../gameobjects/Tilemap.ts" />
@@ -13528,7 +13747,7 @@ var Phaser;
         function (x, y, width, height) {
             return this._world.cameras.addCamera(x, y, width, height);
         };
-        GameObjectFactory.prototype.sprite = /**
+        GameObjectFactory.prototype.button = /**
         * Create a new GeomSprite with specific position.
         *
         * @param x {number} X position of the new geom sprite.
@@ -13539,6 +13758,30 @@ var Phaser;
         //    return <GeomSprite> this._world.group.add(new GeomSprite(this._game, x, y));
         //}
         /**
+        * Create a new Button game object.
+        *
+        * @param [x] {number} X position of the button.
+        * @param [y] {number} Y position of the button.
+        * @param [key] {string} The image key as defined in the Game.Cache to use as the texture for this button.
+        * @param [callback] {function} The function to call when this button is pressed
+        * @param [callbackContext] {object} The context in which the callback will be called (usually 'this')
+        * @param [overFrame] {string|number} This is the frame or frameName that will be set when this button is in an over state. Give either a number to use a frame ID or a string for a frame name.
+        * @param [outFrame] {string|number} This is the frame or frameName that will be set when this button is in an out state. Give either a number to use a frame ID or a string for a frame name.
+        * @param [downFrame] {string|number} This is the frame or frameName that will be set when this button is in a down state. Give either a number to use a frame ID or a string for a frame name.
+        * @returns {Button} The newly created button object.
+        */
+        function (x, y, key, callback, callbackContext, overFrame, outFrame, downFrame) {
+            if (typeof x === "undefined") { x = 0; }
+            if (typeof y === "undefined") { y = 0; }
+            if (typeof key === "undefined") { key = null; }
+            if (typeof callback === "undefined") { callback = null; }
+            if (typeof callbackContext === "undefined") { callbackContext = null; }
+            if (typeof overFrame === "undefined") { overFrame = null; }
+            if (typeof outFrame === "undefined") { outFrame = null; }
+            if (typeof downFrame === "undefined") { downFrame = null; }
+            return this._world.group.add(new Phaser.Button(this._game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame));
+        };
+        GameObjectFactory.prototype.sprite = /**
         * Create a new Sprite with specific position and sprite sheet key.
         *
         * @param x {number} X position of the new sprite.
@@ -16533,24 +16776,52 @@ var Phaser;
                 this.game.input.circle.x = this.game.input.x;
                 this.game.input.circle.y = this.game.input.y;
             }
-            if(this.targetObject !== null) {
+            //  Easy out if we're dragging something and it still exists
+            if(this.targetObject !== null && this.targetObject.input && this.targetObject.input.isDragged == true) {
                 if(this.targetObject.input.update(this) == false) {
                     this.targetObject = null;
                 }
-            } else {
+                return this;
-                //  Build our temporary click stack
+            }
-                var _highestRenderID = -1;
+            //  Work out which object is on the top
-                var _highestRenderObject = -1;
+            this._highestRenderOrderID = -1;
-                for(var i = 0; i < this.game.input.totalTrackedObjects; i++) {
+            this._highestRenderObject = -1;
-                    if(this.game.input.inputObjects[i] !== null && this.game.input.inputObjects[i].input.checkPointerOver(this) && this.game.input.inputObjects[i].renderOrderID > _highestRenderID) {
+            this._highestInputPriorityID = -1;
-                        _highestRenderID = this.game.input.inputObjects[i].renderOrderID;
+            for(var i = 0; i < this.game.input.totalTrackedObjects; i++) {
-                        _highestRenderObject = i;
+                if(this.game.input.inputObjects[i] && this.game.input.inputObjects[i].input && this.game.input.inputObjects[i].input.checkPointerOver(this)) {
+                    //  If the object has a higher Input.PriorityID OR if the priority ID is the same as the current highest AND it has a higher renderOrderID, then set it to the top
+                    if(this.game.input.inputObjects[i].input.priorityID > this._highestInputPriorityID || (this.game.input.inputObjects[i].input.priorityID == this._highestInputPriorityID && this.game.input.inputObjects[i].renderOrderID > this._highestRenderOrderID)) {
+                        this._highestRenderOrderID = this.game.input.inputObjects[i].renderOrderID;
+                        this._highestRenderObject = i;
+                        this._highestInputPriorityID = this.game.input.inputObjects[i].input.priorityID;
                     }
                 }
-                if(_highestRenderObject !== -1) {
+            }
-                    //console.log('setting target');
+            if(this._highestRenderObject == -1) {
-                    this.targetObject = this.game.input.inputObjects[_highestRenderObject];
+                //  The pointer isn't over anything, check if we've got a lingering previous target
+                if(this.targetObject !== null) {
+                    this.targetObject.input._pointerOutHandler(this);
+                    this.targetObject = null;
+                }
+            } else {
+                if(this.targetObject == null) {
+                    //  And now set the new one
+                    this.targetObject = this.game.input.inputObjects[this._highestRenderObject];
                     this.targetObject.input._pointerOverHandler(this);
+                } else {
+                    //  We've got a target from the last update
+                    if(this.targetObject == this.game.input.inputObjects[this._highestRenderObject]) {
+                        //  Same target as before, so update it
+                        if(this.targetObject.input.update(this) == false) {
+                            this.targetObject = null;
+                        }
+                    } else {
+                        //  The target has changed, so tell the old one we've left it
+                        this.targetObject.input._pointerOutHandler(this);
+                        //  And now set the new one
+                        this.targetObject = this.game.input.inputObjects[this._highestRenderObject];
+                        this.targetObject.input._pointerOverHandler(this);
+                    }
                 }
             }
             return this;
@@ -16601,7 +16872,7 @@ var Phaser;
                 this.game.input.currentPointers--;
             }
             for(var i = 0; i < this.game.input.totalTrackedObjects; i++) {
-                if(this.game.input.inputObjects[i] !== null && this.game.input.inputObjects[i].input.enabled) {
+                if(this.game.input.inputObjects[i] && this.game.input.inputObjects[i].input && this.game.input.inputObjects[i].input.enabled) {
                     this.game.input.inputObjects[i].input._releasedHandler(this);
                 }
             }
@@ -16654,7 +16925,7 @@ var Phaser;
             this._holdSent = false;
             this._history.length = 0;
             this._stateReset = true;
-            if(this.targetObject) {
+            if(this.targetObject && this.targetObject.input) {
                 this.targetObject.input._releasedHandler(this);
             }
             this.targetObject = null;
@@ -17675,7 +17946,6 @@ var Phaser;
         **/
         function (index) {
             if(this.inputObjects[index]) {
-                console.log('object removed from the input manager', index);
                 this.inputObjects[index] = null;
             }
         };
@@ -17750,7 +18020,9 @@ var Phaser;
                 this.onTap = new Phaser.Signal();
                 this.onHold = new Phaser.Signal();
                 for(var i = 0; i < this.totalTrackedObjects; i++) {
-                    this.inputObjects[i].input.reset();
+                    if(this.inputObjects[i] && this.inputObjects[i].input) {
+                        this.inputObjects[i].input.reset();
+                    }
                 }
                 this.inputObjects.length = 0;
                 this.totalTrackedObjects = 0;
@@ -18103,7 +18375,7 @@ var Phaser;
             this.renderTotal = this._count;
         };
         CanvasRenderer.prototype.renderGameObject = function (object) {
-            if(object.type == Phaser.Types.SPRITE) {
+            if(object.type == Phaser.Types.SPRITE || object.type == Phaser.Types.BUTTON) {
                 this.renderSprite(this._camera, object);
             } else if(object.type == Phaser.Types.SCROLLZONE) {
                 this.renderScrollZone(this._camera, object);
@@ -18826,16 +19098,31 @@ var Phaser;
             */
             this.onCreateCallback = null;
             /**
-            * This will be called when update states.
+            * This will be called when State is updated, this doesn't happen during load (see onLoadUpdateCallback)
             * @type {function}
             */
             this.onUpdateCallback = null;
             /**
-            * This will be called when render states.
+            * This will be called when the State is rendered, this doesn't happen during load (see onLoadRenderCallback)
             * @type {function}
             */
             this.onRenderCallback = null;
             /**
+            * This will be called before the State is rendered and before the stage is cleared
+            * @type {function}
+            */
+            this.onPreRenderCallback = null;
+            /**
+            * This will be called when the State is updated but only during the load process
+            * @type {function}
+            */
+            this.onLoadUpdateCallback = null;
+            /**
+            * This will be called when the State is rendered but only during the load process
+            * @type {function}
+            */
+            this.onLoadRenderCallback = null;
+            /**
             * This will be called when states paused.
             * @type {function}
             */
@@ -18978,11 +19265,18 @@ var Phaser;
             this.world.update();
             if(this._loadComplete && this.onUpdateCallback) {
                 this.onUpdateCallback.call(this.callbackContext);
+            } else if(this._loadComplete == false && this.onLoadUpdateCallback) {
+                this.onLoadUpdateCallback.call(this.callbackContext);
             }
             this.world.postUpdate();
+            if(this._loadComplete && this.onPreRenderCallback) {
+                this.onPreRenderCallback.call(this.callbackContext);
+            }
             this.renderer.render();
             if(this._loadComplete && this.onRenderCallback) {
                 this.onRenderCallback.call(this.callbackContext);
+            } else if(this._loadComplete == false && this.onLoadRenderCallback) {
+                this.onLoadRenderCallback.call(this.callbackContext);
             }
         };
         Game.prototype.startState = /**
@@ -19008,7 +19302,7 @@ var Phaser;
             }
         };
         Game.prototype.setCallbacks = /**
-        * Set all state callbacks (init, create, update, render).
+        * Set the most common state callbacks (init, create, update, render).
         * @param initCallback {function} Init callback invoked when init state.
         * @param createCallback {function} Create callback invoked when create state.
         * @param updateCallback {function} Update callback invoked when update state.
@@ -19053,21 +19347,33 @@ var Phaser;
             if(this.state['create'] || this.state['update']) {
                 this.callbackContext = this.state;
                 this.onInitCallback = null;
+                this.onLoadRenderCallback = null;
+                this.onLoadUpdateCallback = null;
                 this.onCreateCallback = null;
                 this.onUpdateCallback = null;
                 this.onRenderCallback = null;
+                this.onPreRenderCallback = null;
                 this.onPausedCallback = null;
                 this.onDestroyCallback = null;
                 //  Bingo, let's set them up
                 if(this.state['init']) {
                     this.onInitCallback = this.state['init'];
                 }
+                if(this.state['loadRender']) {
+                    this.onLoadRenderCallback = this.state['loadRender'];
+                }
+                if(this.state['loadUpdate']) {
+                    this.onLoadUpdateCallback = this.state['loadUpdate'];
+                }
                 if(this.state['create']) {
                     this.onCreateCallback = this.state['create'];
                 }
                 if(this.state['update']) {
                     this.onUpdateCallback = this.state['update'];
                 }
+                if(this.state['preRender']) {
+                    this.onPreRenderCallback = this.state['preRender'];
+                }
                 if(this.state['render']) {
                     this.onRenderCallback = this.state['render'];
                 }
@@ -19095,6 +19401,8 @@ var Phaser;
         function () {
             this.callbackContext = null;
             this.onInitCallback = null;
+            this.onLoadRenderCallback = null;
+            this.onLoadUpdateCallback = null;
             this.onCreateCallback = null;
             this.onUpdateCallback = null;
             this.onRenderCallback = null;

Tests/sprites/alpha.js

@@ -0,0 +1,15 @@
+/// <reference path="../../Phaser/Game.ts" />
+(function () {
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create);
+    function init() {
+        //  Using Phasers asset loader we load up a PNG from the assets folder
+        game.load.image('bunny', 'assets/sprites/bunny.png');
+        game.load.start();
+    }
+    var bunny;
+    function create() {
+        //  Here we'll assign the new sprite to the local smallBunny variable
+        bunny = game.add.sprite(0, 0, 'bunny');
+        bunny.alpha = 0.5;
+    }
+})();

Tests/sprites/alpha.ts

@@ -0,0 +1,25 @@
+/// <reference path="../../Phaser/Game.ts" />
+
+(function () {
+
+    var game = new Phaser.Game(this, 'game', 800, 600, init, create);
+
+    function init() {
+
+        //  Using Phasers asset loader we load up a PNG from the assets folder
+        game.load.image('bunny', 'assets/sprites/bunny.png');
+        game.load.start();
+
+    }
+
+    function create() {
+
+        //  Here we'll assign the new sprite to the local bunny variable
+        var bunny = game.add.sprite(0, 0, 'bunny');
+
+        //  And this sets the alpha of the sprite to 0.5, which is 50% opaque
+        bunny.alpha = 0.5;
+
+    }
+
+})();

Tests/sprites/create sprite 1.js

@@ -10,6 +10,5 @@
         //  This will create a Sprite positioned at the top-left of the game (0,0)
         //  Try changing the 0, 0 values
         game.add.sprite(0, 0, 'bunny');
-        game.camera.texture.alpha = 0.5;
     }
 })();

Tests/sprites/create sprite 1.ts

@@ -18,8 +18,6 @@
         //  Try changing the 0, 0 values
         game.add.sprite(0, 0, 'bunny');
 
-        game.camera.texture.alpha = 0.5;
-
     }
 
 })();

build/phaser.d.ts

@@ -268,6 +268,18 @@ module Phaser {
         */
         visible: bool;
         /**
+        * The animation manager component
+        */
+        animations: Components.AnimationManager;
+        /**
+        * Associated events
+        */
+        events;
+        /**
+        * The input component
+        */
+        input;
+        /**
         * The texture used to render.
         */
         texture: Components.Texture;
@@ -834,6 +846,7 @@ module Phaser {
         static EMITTER: number;
         static TILEMAP: number;
         static SCROLLZONE: number;
+        static BUTTON: number;
         static GEOM_POINT: number;
         static GEOM_CIRCLE: number;
         static GEOM_Rectangle: number;
@@ -1324,6 +1337,13 @@ module Phaser {
         */
         public context: CanvasRenderingContext2D;
         /**
+        * You can set a globalCompositeOperation that will be applied before the render method is called on this Sprite.
+        * This is useful if you wish to apply an effect like 'lighten'.
+        * If this value is set it will call a canvas context save and restore before and after the render pass, so use it sparingly.
+        * Set to null to disable.
+        */
+        public globalCompositeOperation: string;
+        /**
         * Get a color of a specific pixel.
         * @param x {number} X position of the pixel in this texture.
         * @param y {number} Y position of the pixel in this texture.
@@ -1384,7 +1404,7 @@ module Phaser {
         * Given an array of Sprites it will update each of them so that their canvas/contexts reference this DynamicTexture
         * @param objects {Array} An array of GameObjects, or objects that inherit from it such as Sprites
         */
-        public assignCanvasToGameObjects(objects: IGameObject[]): void;
+        public assignCanvasToGameObjects(objects): void;
         /**
         * Clear the whole canvas.
         */
@@ -1515,7 +1535,7 @@ module Phaser {
         * @param frameRate {number} FrameRate you want to specify instead of using default.
         * @param loop {boolean} Whether or not the animation is looped or just plays once.
         */
-        public play(frameRate?: number, loop?: bool): void;
+        public play(frameRate?: number, loop?: bool): Animation;
         /**
         * Play this animation from the first frame.
         */
@@ -1738,11 +1758,11 @@ module Phaser.Components {
         */
         constructor(parent: Sprite);
         /**
-        * Local private reference to game.
+        * Reference to Phaser.Game
         */
-        private _game;
+        public game: Game;
         /**
-        * Local private reference to its owner sprite.
+        * Local private reference to its parent game object.
         */
         private _parent;
         /**
@@ -1802,7 +1822,7 @@ module Phaser.Components {
         * @param frameRate {number} FrameRate you want to specify instead of using default.
         * @param loop {boolean} Whether or not the animation is looped or just plays once.
         */
-        public play(name: string, frameRate?: number, loop?: bool): void;
+        public play(name: string, frameRate?: number, loop?: bool): Animation;
         /**
         * Stop animation by name.
         * Current animation will be automatically set to the stopped one.
@@ -2044,9 +2064,9 @@ module Phaser.Components.Sprite {
         */
         public game: Game;
         /**
-        * Reference to the Image stored in the Game.Cache that is used as the texture for the Sprite.
+        * Local private reference to its parent game object.
         */
-        private sprite;
+        private _parent;
         private _pointerData;
         /**
         * If enabled the Input component will be updated by the parent Sprite
@@ -2104,6 +2124,12 @@ module Phaser.Components.Sprite {
         */
         public useHandCursor: bool;
         /**
+        * If this object is set to consume the pointer event then it will stop all propogation from this object on.
+        * For example if you had a stack of 6 sprites with the same priority IDs and one consumed the event, none of the others would receive it.
+        * @type {Boolean}
+        */
+        public consumePointerEvent: bool;
+        /**
         * The x coordinate of the Input pointer, relative to the top-left of the parent Sprite.
         * This value is only set when the pointer is over this Sprite.
         * @type {number}
@@ -2185,7 +2211,6 @@ module Phaser.Components.Sprite {
         public update(pointer: Pointer): bool;
         public _pointerOverHandler(pointer: Pointer): void;
         public _pointerOutHandler(pointer: Pointer): void;
-        public consumePointerEvent: bool;
         public _touchedHandler(pointer: Pointer): bool;
         public _releasedHandler(pointer: Pointer): void;
         /**
@@ -2295,8 +2320,8 @@ module Phaser.Components.Sprite {
 module Phaser.Components.Sprite {
     class Events {
         /**
-        * The Events component is a collection of events fired by the parent Sprite and its other components.
+        * The Events component is a collection of events fired by the parent game object and its components.
-        * @param parent The Sprite using this Input component
+        * @param parent The game object using this Input component
         */
         constructor(parent: Sprite);
         /**
@@ -2304,9 +2329,9 @@ module Phaser.Components.Sprite {
         */
         public game: Game;
         /**
-        * Reference to the Image stored in the Game.Cache that is used as the texture for the Sprite.
+        * Local private reference to its parent game object.
         */
-        private sprite;
+        private _parent;
         /**
         * Dispatched by the Group this Sprite is added to.
         */
@@ -2347,6 +2372,18 @@ module Phaser.Components.Sprite {
         * Dispatched by the Input component when the Sprite stops being dragged
         */
         public onDragStop: Signal;
+        /**
+        * Dispatched by the Animation component when the Sprite starts being animated
+        */
+        public onAnimationStart: Signal;
+        /**
+        * Dispatched by the Animation component when the Sprite animation completes
+        */
+        public onAnimationComplete: Signal;
+        /**
+        * Dispatched by the Animation component when the Sprite animation loops
+        */
+        public onAnimationLoop: Signal;
         public onOutOfBounds: Signal;
     }
 }
@@ -3283,15 +3320,18 @@ module Phaser {
         */
         public scale: Vec2;
         /**
-        * The alpha of the Sprite between 0 and 1, a value of 1 being fully opaque.
-        */
-        public alpha: number;
-        /**
         * The origin of the Sprite around which rotation and positioning takes place.
         * This is a reference to Sprite.transform.origin
         */
         public origin: Vec2;
         /**
+        * The alpha of the Sprite between 0 and 1, a value of 1 being fully opaque.
+        */
+        /**
+        * The alpha of the Sprite between 0 and 1, a value of 1 being fully opaque.
+        */
+        public alpha : number;
+        /**
         * Get the animation frame number.
         */
         /**
@@ -3464,7 +3504,7 @@ module Phaser.Components {
         */
         public cameraBlacklist: number[];
         /**
-        * Whether the Sprite background is opaque or not. If set to true the Sprite is filled with
+        * Whether the texture background is opaque or not. If set to true the object is filled with
         * the value of Texture.backgroundColor every frame. Normally you wouldn't enable this but
         * for some effects it can be handy.
         * @type {boolean}
@@ -4191,7 +4231,7 @@ module Phaser {
         */
         public hasLoaded: bool;
         /**
-        * Loading progress (from 0 to 1)
+        * Loading progress (from 0 to 100)
         * @type {number}
         */
         public progress: number;
@@ -4216,7 +4256,7 @@ module Phaser {
         * @param key {string} Unique asset key of this image file.
         * @param url {string} URL of image file.
         */
-        public image(key: string, url: string): void;
+        public image(key: string, url: string, overwrite?: bool): void;
         /**
         * Add a new sprite sheet loading request.
         * @param key {string} Unique asset key of the sheet file.
@@ -4447,6 +4487,10 @@ module Phaser {
         * @return {Array} The string based keys in the Cache.
         */
         public getTextKeys(): any[];
+        public removeCanvas(key: string): void;
+        public removeImage(key: string): void;
+        public removeSound(key: string): void;
+        public removeText(key: string): void;
         /**
         * Clean up cache memory.
         */
@@ -5946,6 +5990,52 @@ module Phaser {
     }
 }
 /**
+* Phaser - Button
+*/
+module Phaser {
+    class Button extends Sprite {
+        /**
+        * Create a new <code>Button</code> object.
+        *
+        * @param game {Phaser.Game} Current game instance.
+        * @param [x] {number} the initial x position of the button.
+        * @param [y] {number} the initial y position of the button.
+        * @param [key] {string} Key of the graphic you want to load for this button.
+        */
+        constructor(game: Game, x?: number, y?: number, key?: string, callback?, callbackContext?, overFrame?, outFrame?, downFrame?);
+        private _onOverFrameName;
+        private _onOutFrameName;
+        private _onDownFrameName;
+        private _onUpFrameName;
+        private _onOverFrameID;
+        private _onOutFrameID;
+        private _onDownFrameID;
+        private _onUpFrameID;
+        /**
+        * Dispatched when a pointer moves over an Input enabled sprite.
+        */
+        public onInputOver: Signal;
+        /**
+        * Dispatched when a pointer moves out of an Input enabled sprite.
+        */
+        public onInputOut: Signal;
+        /**
+        * Dispatched when a pointer is pressed down on an Input enabled sprite.
+        */
+        public onInputDown: Signal;
+        /**
+        * Dispatched when a pointer is released over an Input enabled sprite
+        */
+        public onInputUp: Signal;
+        private onInputOverHandler(pointer);
+        private onInputOutHandler(pointer);
+        private onInputDownHandler(pointer);
+        private onInputUpHandler(pointer);
+        public priorityID : number;
+        public useHandCursor : bool;
+    }
+}
+/**
 * Phaser - ScrollRegion
 *
 * Creates a scrolling region within a ScrollZone.
@@ -6530,6 +6620,7 @@ module Phaser {
         public preUpdate(): void;
         public update(): void;
         public postUpdate(): void;
+        public destroy(): void;
         /**
         * Parset csv map data and generate tiles.
         * @param data {string} CSV map data.
@@ -6665,6 +6756,20 @@ module Phaser {
         */
         public camera(x: number, y: number, width: number, height: number): Camera;
         /**
+        * Create a new Button game object.
+        *
+        * @param [x] {number} X position of the button.
+        * @param [y] {number} Y position of the button.
+        * @param [key] {string} The image key as defined in the Game.Cache to use as the texture for this button.
+        * @param [callback] {function} The function to call when this button is pressed
+        * @param [callbackContext] {object} The context in which the callback will be called (usually 'this')
+        * @param [overFrame] {string|number} This is the frame or frameName that will be set when this button is in an over state. Give either a number to use a frame ID or a string for a frame name.
+        * @param [outFrame] {string|number} This is the frame or frameName that will be set when this button is in an out state. Give either a number to use a frame ID or a string for a frame name.
+        * @param [downFrame] {string|number} This is the frame or frameName that will be set when this button is in a down state. Give either a number to use a frame ID or a string for a frame name.
+        * @returns {Button} The newly created button object.
+        */
+        public button(x?: number, y?: number, key?: string, callback?, callbackContext?, overFrame?, outFrame?, downFrame?): Button;
+        /**
         * Create a new Sprite with specific position and sprite sheet key.
         *
         * @param x {number} X position of the new sprite.
@@ -8469,6 +8574,9 @@ module Phaser {
         */
         public start(event): Pointer;
         public update(): void;
+        private _highestRenderOrderID;
+        private _highestRenderObject;
+        private _highestInputPriorityID;
         /**
         * Called when the Pointer is moved on the touchscreen
         * @method move
@@ -9524,16 +9632,31 @@ module Phaser {
         */
         public onCreateCallback;
         /**
-        * This will be called when update states.
+        * This will be called when State is updated, this doesn't happen during load (see onLoadUpdateCallback)
         * @type {function}
         */
         public onUpdateCallback;
         /**
-        * This will be called when render states.
+        * This will be called when the State is rendered, this doesn't happen during load (see onLoadRenderCallback)
         * @type {function}
         */
         public onRenderCallback;
         /**
+        * This will be called before the State is rendered and before the stage is cleared
+        * @type {function}
+        */
+        public onPreRenderCallback;
+        /**
+        * This will be called when the State is updated but only during the load process
+        * @type {function}
+        */
+        public onLoadUpdateCallback;
+        /**
+        * This will be called when the State is rendered but only during the load process
+        * @type {function}
+        */
+        public onLoadRenderCallback;
+        /**
         * This will be called when states paused.
         * @type {function}
         */
@@ -9657,7 +9780,7 @@ module Phaser {
         */
         private startState();
         /**
-        * Set all state callbacks (init, create, update, render).
+        * Set the most common state callbacks (init, create, update, render).
         * @param initCallback {function} Init callback invoked when init state.
         * @param createCallback {function} Create callback invoked when create state.
         * @param updateCallback {function} Update callback invoked when update state.

build/phaser.js

@@ -1274,6 +1274,7 @@ var Phaser;
         Types.EMITTER = 4;
         Types.TILEMAP = 5;
         Types.SCROLLZONE = 6;
+        Types.BUTTON = 7;
         Types.GEOM_POINT = 0;
         Types.GEOM_CIRCLE = 1;
         Types.GEOM_Rectangle = 2;
@@ -1987,6 +1988,13 @@ var Phaser;
             this._dy = 0;
             this._dw = 0;
             this._dh = 0;
+            /**
+            * You can set a globalCompositeOperation that will be applied before the render method is called on this Sprite.
+            * This is useful if you wish to apply an effect like 'lighten'.
+            * If this value is set it will call a canvas context save and restore before and after the render pass, so use it sparingly.
+            * Set to null to disable.
+            */
+            this.globalCompositeOperation = null;
             this.game = game;
             this.type = Phaser.Types.GEOMSPRITE;
             this.canvas = document.createElement('canvas');
@@ -2133,8 +2141,10 @@ var Phaser;
         */
         function (objects) {
             for(var i = 0; i < objects.length; i++) {
-                objects[i].texture.canvas = this.canvas;
+                if(objects[i].texture) {
-                objects[i].texture.context = this.context;
+                    objects[i].texture.canvas = this.canvas;
+                    objects[i].texture.context = this.context;
+                }
             }
         };
         DynamicTexture.prototype.clear = /**
@@ -2152,7 +2162,14 @@ var Phaser;
         function (x, y) {
             if (typeof x === "undefined") { x = 0; }
             if (typeof y === "undefined") { y = 0; }
+            if(this.globalCompositeOperation) {
+                this.game.stage.context.save();
+                this.game.stage.context.globalCompositeOperation = this.globalCompositeOperation;
+            }
             this.game.stage.context.drawImage(this.canvas, x, y);
+            if(this.globalCompositeOperation) {
+                this.game.stage.context.restore();
+            }
         };
         Object.defineProperty(DynamicTexture.prototype, "width", {
             get: function () {
@@ -2206,6 +2223,7 @@ var Phaser;
             }
             //  Zero or smaller than frame sizes?
             if(width == 0 || height == 0 || width < frameWidth || height < frameHeight || total === 0) {
+                throw new Error("AnimationLoader.parseSpriteSheet: width/height zero or width/height < given frameWidth/frameHeight");
                 return null;
             }
             //  Let's create some frames then
@@ -2345,6 +2363,8 @@ var Phaser;
             this._timeNextFrame = this._game.time.now + this.delay;
             this._frameIndex = 0;
             this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
+            this._parent.events.onAnimationStart.dispatch(this._parent, this);
+            return this;
         };
         Animation.prototype.restart = /**
         * Play this animation from the first frame.
@@ -2374,6 +2394,7 @@ var Phaser;
                     if(this.looped) {
                         this._frameIndex = 0;
                         this.currentFrame = this._frameData.getFrame(this._frames[this._frameIndex]);
+                        this._parent.events.onAnimationLoop.dispatch(this._parent, this);
                     } else {
                         this.onComplete();
                     }
@@ -2403,8 +2424,8 @@ var Phaser;
         function () {
             this.isPlaying = false;
             this.isFinished = true;
-            //  callback goes here
+            this._parent.events.onAnimationComplete.dispatch(this._parent, this);
-                    };
+        };
         return Animation;
     })();
     Phaser.Animation = Animation;    
@@ -2657,7 +2678,7 @@ var Phaser;
                 */
                 this.currentFrame = null;
                 this._parent = parent;
-                this._game = parent.game;
+                this.game = parent.game;
                 this._anims = {
                 };
             }
@@ -2686,6 +2707,12 @@ var Phaser;
                 if(this._frameData == null) {
                     return;
                 }
+                //  Create the signals the AnimationManager will emit
+                if(this._parent.events.onAnimationStart == null) {
+                    this._parent.events.onAnimationStart = new Phaser.Signal();
+                    this._parent.events.onAnimationComplete = new Phaser.Signal();
+                    this._parent.events.onAnimationLoop = new Phaser.Signal();
+                }
                 if(frames == null) {
                     frames = this._frameData.getFrameIndexes();
                 } else {
@@ -2697,7 +2724,7 @@ var Phaser;
                 if(useNumericIndex == false) {
                     frames = this._frameData.getFrameIndexesByName(frames);
                 }
-                this._anims[name] = new Phaser.Animation(this._game, this._parent, this._frameData, name, frames, frameRate, loop);
+                this._anims[name] = new Phaser.Animation(this.game, this._parent, this._frameData, name, frames, frameRate, loop);
                 this.currentAnim = this._anims[name];
                 this.currentFrame = this.currentAnim.currentFrame;
                 return this._anims[name];
@@ -2733,11 +2760,11 @@ var Phaser;
                 if(this._anims[name]) {
                     if(this.currentAnim == this._anims[name]) {
                         if(this.currentAnim.isPlaying == false) {
-                            this.currentAnim.play(frameRate, loop);
+                            return this.currentAnim.play(frameRate, loop);
                         }
                     } else {
                         this.currentAnim = this._anims[name];
-                        this.currentAnim.play(frameRate, loop);
+                        return this.currentAnim.play(frameRate, loop);
                     }
                 }
             };
@@ -2784,7 +2811,7 @@ var Phaser;
                     return this._frameIndex;
                 },
                 set: function (value) {
-                    if(this._frameData.getFrame(value) !== null) {
+                    if(this._frameData && this._frameData.getFrame(value) !== null) {
                         this.currentFrame = this._frameData.getFrame(value);
                         this._parent.texture.width = this.currentFrame.width;
                         this._parent.texture.height = this.currentFrame.height;
@@ -2803,7 +2830,7 @@ var Phaser;
                     return this.currentFrame.name;
                 },
                 set: function (value) {
-                    if(this._frameData.getFrameByName(value) !== null) {
+                    if(this._frameData.getFrameByName(value)) {
                         this.currentFrame = this._frameData.getFrameByName(value);
                         this._parent.texture.width = this.currentFrame.width;
                         this._parent.texture.height = this.currentFrame.height;
@@ -3372,9 +3399,14 @@ var Phaser;
                     * @default null
                     */
                     this.boundsSprite = null;
+                    /**
+                    * If this object is set to consume the pointer event then it will stop all propogation from this object on.
+                    * For example if you had a stack of 6 sprites with the same priority IDs and one consumed the event, none of the others would receive it.
+                    * @type {Boolean}
+                    */
                     this.consumePointerEvent = false;
                     this.game = parent.game;
-                    this.sprite = parent;
+                    this._parent = parent;
                     this.enabled = false;
                 }
                 Input.prototype.pointerX = /**
@@ -3505,9 +3537,18 @@ var Phaser;
                         }
                         this.snapOffset = new Phaser.Point();
                         this.enabled = true;
-                        this.game.input.addGameObject(this.sprite);
+                        this.game.input.addGameObject(this._parent);
+                        //  Create the signals the Input component will emit
+                        if(this._parent.events.onInputOver == null) {
+                            this._parent.events.onInputOver = new Phaser.Signal();
+                            this._parent.events.onInputOut = new Phaser.Signal();
+                            this._parent.events.onInputDown = new Phaser.Signal();
+                            this._parent.events.onInputUp = new Phaser.Signal();
+                            this._parent.events.onDragStart = new Phaser.Signal();
+                            this._parent.events.onDragStop = new Phaser.Signal();
+                        }
                     }
-                    return this.sprite;
+                    return this._parent;
                 };
                 Input.prototype.reset = function () {
                     this.enabled = false;
@@ -3552,25 +3593,25 @@ var Phaser;
                 * Checks if the given pointer is over this Sprite. All checks are done in world coordinates.
                 */
                 function (pointer) {
-                    if(this.enabled == false || this.sprite.visible == false) {
+                    if(this.enabled == false || this._parent.visible == false) {
                         return false;
                     } else {
-                        return Phaser.SpriteUtils.overlapsXY(this.sprite, pointer.worldX(), pointer.worldY());
+                        return Phaser.SpriteUtils.overlapsXY(this._parent, pointer.worldX(), pointer.worldY());
                     }
                 };
                 Input.prototype.update = /**
                 * Update
                 */
                 function (pointer) {
-                    if(this.enabled == false || this.sprite.visible == false) {
+                    if(this.enabled == false || this._parent.visible == false) {
                         return false;
                     }
                     if(this.draggable && this._draggedPointerID == pointer.id) {
                         return this.updateDrag(pointer);
                     } else if(this._pointerData[pointer.id].isOver == true) {
-                        if(Phaser.SpriteUtils.overlapsXY(this.sprite, pointer.worldX(), pointer.worldY())) {
+                        if(Phaser.SpriteUtils.overlapsXY(this._parent, pointer.worldX(), pointer.worldY())) {
-                            this._pointerData[pointer.id].x = pointer.x - this.sprite.x;
+                            this._pointerData[pointer.id].x = pointer.x - this._parent.x;
-                            this._pointerData[pointer.id].y = pointer.y - this.sprite.y;
+                            this._pointerData[pointer.id].y = pointer.y - this._parent.y;
                             return true;
                         } else {
                             this._pointerOutHandler(pointer);
@@ -3584,12 +3625,12 @@ var Phaser;
                         this._pointerData[pointer.id].isOver = true;
                         this._pointerData[pointer.id].isOut = false;
                         this._pointerData[pointer.id].timeOver = this.game.time.now;
-                        this._pointerData[pointer.id].x = pointer.x - this.sprite.x;
+                        this._pointerData[pointer.id].x = pointer.x - this._parent.x;
-                        this._pointerData[pointer.id].y = pointer.y - this.sprite.y;
+                        this._pointerData[pointer.id].y = pointer.y - this._parent.y;
                         if(this.useHandCursor && this._pointerData[pointer.id].isDragged == false) {
                             this.game.stage.canvas.style.cursor = "pointer";
                         }
-                        this.sprite.events.onInputOver.dispatch(this.sprite, pointer);
+                        this._parent.events.onInputOver.dispatch(this._parent, pointer);
                     }
                 };
                 Input.prototype._pointerOutHandler = function (pointer) {
@@ -3599,41 +3640,46 @@ var Phaser;
                     if(this.useHandCursor && this._pointerData[pointer.id].isDragged == false) {
                         this.game.stage.canvas.style.cursor = "default";
                     }
-                    this.sprite.events.onInputOut.dispatch(this.sprite, pointer);
+                    this._parent.events.onInputOut.dispatch(this._parent, pointer);
                 };
                 Input.prototype._touchedHandler = function (pointer) {
                     if(this._pointerData[pointer.id].isDown == false && this._pointerData[pointer.id].isOver == true) {
                         this._pointerData[pointer.id].isDown = true;
                         this._pointerData[pointer.id].isUp = false;
                         this._pointerData[pointer.id].timeDown = this.game.time.now;
-                        this.sprite.events.onInputDown.dispatch(this.sprite, pointer);
+                        this._parent.events.onInputDown.dispatch(this._parent, pointer);
                         //  Start drag
                         //if (this.draggable && this.isDragged == false && pointer.targetObject == null)
                         if(this.draggable && this.isDragged == false) {
                             this.startDrag(pointer);
                         }
                         if(this.bringToTop) {
-                            this.sprite.group.bringToTop(this.sprite);
+                            this._parent.group.bringToTop(this._parent);
                         }
                     }
                     //  Consume the event?
                     return this.consumePointerEvent;
                 };
                 Input.prototype._releasedHandler = function (pointer) {
-                    //  If was previously touched by this Pointer, check if still is
+                    //  If was previously touched by this Pointer, check if still is AND still over this item
                     if(this._pointerData[pointer.id].isDown && pointer.isUp) {
                         this._pointerData[pointer.id].isDown = false;
                         this._pointerData[pointer.id].isUp = true;
                         this._pointerData[pointer.id].timeUp = this.game.time.now;
                         this._pointerData[pointer.id].downDuration = this._pointerData[pointer.id].timeUp - this._pointerData[pointer.id].timeDown;
-                        this.sprite.events.onInputUp.dispatch(this.sprite, pointer);
+                        //  Only release the InputUp signal if the pointer is still over this sprite
+                        if(Phaser.SpriteUtils.overlapsXY(this._parent, pointer.worldX(), pointer.worldY())) {
+                            this._parent.events.onInputUp.dispatch(this._parent, pointer);
+                        } else {
+                            //  Pointer outside the sprite? Reset the cursor
+                            if(this.useHandCursor) {
+                                this.game.stage.canvas.style.cursor = "default";
+                            }
+                        }
                         //  Stop drag
                         if(this.draggable && this.isDragged && this._draggedPointerID == pointer.id) {
                             this.stopDrag(pointer);
                         }
-                        if(this.useHandCursor) {
-                            this.game.stage.canvas.style.cursor = "default";
-                        }
                     }
                 };
                 Input.prototype.updateDrag = /**
@@ -3645,10 +3691,10 @@ var Phaser;
                         return false;
                     }
                     if(this.allowHorizontalDrag) {
-                        this.sprite.x = pointer.x + this._dragPoint.x + this.dragOffset.x;
+                        this._parent.x = pointer.x + this._dragPoint.x + this.dragOffset.x;
                     }
                     if(this.allowVerticalDrag) {
-                        this.sprite.y = pointer.y + this._dragPoint.y + this.dragOffset.y;
+                        this._parent.y = pointer.y + this._dragPoint.y + this.dragOffset.y;
                     }
                     if(this.boundsRect) {
                         this.checkBoundsRect();
@@ -3657,8 +3703,8 @@ var Phaser;
                         this.checkBoundsSprite();
                     }
                     if(this.snapOnDrag) {
-                        this.sprite.x = Math.floor(this.sprite.x / this.snapX) * this.snapX;
+                        this._parent.x = Math.floor(this._parent.x / this.snapX) * this.snapX;
-                        this.sprite.y = Math.floor(this.sprite.y / this.snapY) * this.snapY;
+                        this._parent.y = Math.floor(this._parent.y / this.snapY) * this.snapY;
                     }
                     return true;
                 };
@@ -3777,17 +3823,17 @@ var Phaser;
                     this._pointerData[pointer.id].isDragged = true;
                     if(this.dragFromCenter) {
                         //	Move the sprite to the middle of the pointer
-                        //this._dragPoint.setTo(-this.sprite.worldView.halfWidth, -this.sprite.worldView.halfHeight);
+                        //this._dragPoint.setTo(-this._parent.worldView.halfWidth, -this._parent.worldView.halfHeight);
-                        //this._dragPoint.setTo(this.sprite.transform.center.x, this.sprite.transform.center.y);
+                        //this._dragPoint.setTo(this._parent.transform.center.x, this._parent.transform.center.y);
-                        this._dragPoint.setTo(this.sprite.x - pointer.x, this.sprite.y - pointer.y);
+                        this._dragPoint.setTo(this._parent.x - pointer.x, this._parent.y - pointer.y);
                     } else {
-                        this._dragPoint.setTo(this.sprite.x - pointer.x, this.sprite.y - pointer.y);
+                        this._dragPoint.setTo(this._parent.x - pointer.x, this._parent.y - pointer.y);
                     }
                     this.updateDrag(pointer);
                     if(this.bringToTop) {
-                        this.sprite.group.bringToTop(this.sprite);
+                        this._parent.group.bringToTop(this._parent);
                     }
-                    this.sprite.events.onDragStart.dispatch(this.sprite, pointer);
+                    this._parent.events.onDragStart.dispatch(this._parent, pointer);
                 };
                 Input.prototype.stopDrag = /**
                 * Called by Pointer when drag is stopped on this Sprite. Should not usually be called directly.
@@ -3797,10 +3843,11 @@ var Phaser;
                     this._draggedPointerID = -1;
                     this._pointerData[pointer.id].isDragged = false;
                     if(this.snapOnRelease) {
-                        this.sprite.x = Math.floor(this.sprite.x / this.snapX) * this.snapX;
+                        this._parent.x = Math.floor(this._parent.x / this.snapX) * this.snapX;
-                        this.sprite.y = Math.floor(this.sprite.y / this.snapY) * this.snapY;
+                        this._parent.y = Math.floor(this._parent.y / this.snapY) * this.snapY;
                     }
-                    this.sprite.events.onDragStop.dispatch(this.sprite, pointer);
+                    this._parent.events.onDragStop.dispatch(this._parent, pointer);
+                    this._parent.events.onInputUp.dispatch(this._parent, pointer);
                 };
                 Input.prototype.setDragLock = /**
                 * Restricts this sprite to drag movement only on the given axis. Note: If both are set to false the sprite will never move!
@@ -3842,30 +3889,30 @@ var Phaser;
                 * Bounds Rect check for the sprite drag
                 */
                 function () {
-                    if(this.sprite.x < this.boundsRect.left) {
+                    if(this._parent.x < this.boundsRect.left) {
-                        this.sprite.x = this.boundsRect.x;
+                        this._parent.x = this.boundsRect.x;
-                    } else if((this.sprite.x + this.sprite.width) > this.boundsRect.right) {
+                    } else if((this._parent.x + this._parent.width) > this.boundsRect.right) {
-                        this.sprite.x = this.boundsRect.right - this.sprite.width;
+                        this._parent.x = this.boundsRect.right - this._parent.width;
                     }
-                    if(this.sprite.y < this.boundsRect.top) {
+                    if(this._parent.y < this.boundsRect.top) {
-                        this.sprite.y = this.boundsRect.top;
+                        this._parent.y = this.boundsRect.top;
-                    } else if((this.sprite.y + this.sprite.height) > this.boundsRect.bottom) {
+                    } else if((this._parent.y + this._parent.height) > this.boundsRect.bottom) {
-                        this.sprite.y = this.boundsRect.bottom - this.sprite.height;
+                        this._parent.y = this.boundsRect.bottom - this._parent.height;
                     }
                 };
                 Input.prototype.checkBoundsSprite = /**
                 * Parent Sprite Bounds check for the sprite drag
                 */
                 function () {
-                    if(this.sprite.x < this.boundsSprite.x) {
+                    if(this._parent.x < this.boundsSprite.x) {
-                        this.sprite.x = this.boundsSprite.x;
+                        this._parent.x = this.boundsSprite.x;
-                    } else if((this.sprite.x + this.sprite.width) > (this.boundsSprite.x + this.boundsSprite.width)) {
+                    } else if((this._parent.x + this._parent.width) > (this.boundsSprite.x + this.boundsSprite.width)) {
-                        this.sprite.x = (this.boundsSprite.x + this.boundsSprite.width) - this.sprite.width;
+                        this._parent.x = (this.boundsSprite.x + this.boundsSprite.width) - this._parent.width;
                     }
-                    if(this.sprite.y < this.boundsSprite.y) {
+                    if(this._parent.y < this.boundsSprite.y) {
-                        this.sprite.y = this.boundsSprite.y;
+                        this._parent.y = this.boundsSprite.y;
-                    } else if((this.sprite.y + this.sprite.height) > (this.boundsSprite.y + this.boundsSprite.height)) {
+                    } else if((this._parent.y + this._parent.height) > (this.boundsSprite.y + this.boundsSprite.height)) {
-                        this.sprite.y = (this.boundsSprite.y + this.boundsSprite.height) - this.sprite.height;
+                        this._parent.y = (this.boundsSprite.y + this.boundsSprite.height) - this._parent.height;
                     }
                 };
                 Input.prototype.renderDebugInfo = /**
@@ -3876,13 +3923,13 @@ var Phaser;
                 */
                 function (x, y, color) {
                     if (typeof color === "undefined") { color = 'rgb(255,255,255)'; }
-                    this.sprite.texture.context.font = '14px Courier';
+                    this._parent.texture.context.font = '14px Courier';
-                    this.sprite.texture.context.fillStyle = color;
+                    this._parent.texture.context.fillStyle = color;
-                    this.sprite.texture.context.fillText('Sprite Input: (' + this.sprite.worldView.width + ' x ' + this.sprite.worldView.height + ')', x, y);
+                    this._parent.texture.context.fillText('Sprite Input: (' + this._parent.worldView.width + ' x ' + this._parent.worldView.height + ')', x, y);
-                    this.sprite.texture.context.fillText('x: ' + this.pointerX().toFixed(1) + ' y: ' + this.pointerY().toFixed(1), x, y + 14);
+                    this._parent.texture.context.fillText('x: ' + this.pointerX().toFixed(1) + ' y: ' + this.pointerY().toFixed(1), x, y + 14);
-                    this.sprite.texture.context.fillText('over: ' + this.pointerOver() + ' duration: ' + this.overDuration().toFixed(0), x, y + 28);
+                    this._parent.texture.context.fillText('over: ' + this.pointerOver() + ' duration: ' + this.overDuration().toFixed(0), x, y + 28);
-                    this.sprite.texture.context.fillText('down: ' + this.pointerDown() + ' duration: ' + this.downDuration().toFixed(0), x, y + 42);
+                    this._parent.texture.context.fillText('down: ' + this.pointerDown() + ' duration: ' + this.downDuration().toFixed(0), x, y + 42);
-                    this.sprite.texture.context.fillText('just over: ' + this.justOver() + ' just out: ' + this.justOut(), x, y + 56);
+                    this._parent.texture.context.fillText('just over: ' + this.justOver() + ' just out: ' + this.justOut(), x, y + 56);
                 };
                 return Input;
             })();
@@ -3904,23 +3951,16 @@ var Phaser;
         (function (Sprite) {
             var Events = (function () {
                 /**
-                * The Events component is a collection of events fired by the parent Sprite and its other components.
+                * The Events component is a collection of events fired by the parent game object and its components.
-                * @param parent The Sprite using this Input component
+                * @param parent The game object using this Input component
                 */
                 function Events(parent) {
                     this.game = parent.game;
-                    this.sprite = parent;
+                    this._parent = parent;
                     this.onAddedToGroup = new Phaser.Signal();
                     this.onRemovedFromGroup = new Phaser.Signal();
                     this.onKilled = new Phaser.Signal();
                     this.onRevived = new Phaser.Signal();
-                    //  Only create these if Sprite input is enabled?
-                    this.onInputOver = new Phaser.Signal();
-                    this.onInputOut = new Phaser.Signal();
-                    this.onInputDown = new Phaser.Signal();
-                    this.onInputUp = new Phaser.Signal();
-                    this.onDragStart = new Phaser.Signal();
-                    this.onDragStop = new Phaser.Signal();
                 }
                 return Events;
             })();
@@ -7168,9 +7208,9 @@ var Phaser;
             this.z = -1;
             this.group = null;
             this.name = '';
+            this.events = new Phaser.Components.Sprite.Events(this);
             this.animations = new Phaser.Components.AnimationManager(this);
             this.input = new Phaser.Components.Sprite.Input(this);
-            this.events = new Phaser.Components.Sprite.Events(this);
             this.texture = new Phaser.Components.Texture(this);
             this.transform = new Phaser.Components.Transform(this);
             if(key !== null) {
@@ -7218,6 +7258,22 @@ var Phaser;
             enumerable: true,
             configurable: true
         });
+        Object.defineProperty(Sprite.prototype, "alpha", {
+            get: /**
+            * The alpha of the Sprite between 0 and 1, a value of 1 being fully opaque.
+            */
+            function () {
+                return this.texture.alpha;
+            },
+            set: /**
+            * The alpha of the Sprite between 0 and 1, a value of 1 being fully opaque.
+            */
+            function (value) {
+                this.texture.alpha = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
         Object.defineProperty(Sprite.prototype, "frame", {
             get: /**
             * Get the animation frame number.
@@ -7658,7 +7714,7 @@ var Phaser;
                 */
                 this.loaded = false;
                 /**
-                * Whether the Sprite background is opaque or not. If set to true the Sprite is filled with
+                * Whether the texture background is opaque or not. If set to true the object is filled with
                 * the value of Texture.backgroundColor every frame. Normally you wouldn't enable this but
                 * for some effects it can be handy.
                 * @type {boolean}
@@ -8957,8 +9013,9 @@ var Phaser;
         * @param key {string} Unique asset key of this image file.
         * @param url {string} URL of image file.
         */
-        function (key, url) {
+        function (key, url, overwrite) {
-            if(this.checkKeyExists(key) === false) {
+            if (typeof overwrite === "undefined") { overwrite = false; }
+            if(overwrite == true || this.checkKeyExists(key) == false) {
                 this._queueSize++;
                 this._fileList[key] = {
                     type: 'image',
@@ -9154,7 +9211,7 @@ var Phaser;
                 this._progressChunk = 100 / this._keys.length;
                 this.loadFile();
             } else {
-                this.progress = 1;
+                this.progress = 100;
                 this.hasLoaded = true;
                 this._gameCreateComplete.call(this._game);
                 if(this._onComplete !== null) {
@@ -9580,6 +9637,18 @@ var Phaser;
             }
             return output;
         };
+        Cache.prototype.removeCanvas = function (key) {
+            delete this._canvases[key];
+        };
+        Cache.prototype.removeImage = function (key) {
+            delete this._images[key];
+        };
+        Cache.prototype.removeSound = function (key) {
+            delete this._sounds[key];
+        };
+        Cache.prototype.removeText = function (key) {
+            delete this._text[key];
+        };
         Cache.prototype.destroy = /**
         * Clean up cache memory.
         */
@@ -10959,6 +11028,8 @@ var Phaser;
             this.game = game;
             this.ID = id;
             this.z = id;
+            width = this.game.math.clamp(width, this.game.stage.width, 1);
+            height = this.game.math.clamp(height, this.game.stage.height, 1);
             //  The view into the world we wish to render (by default the full game world size)
             //  The size of this Rect is the same as screenView, but the values are all in world coordinates instead of screen coordinates
             this.worldView = new Phaser.Rectangle(0, 0, width, height);
@@ -12413,6 +12484,151 @@ var Phaser;
     Phaser.Emitter = Emitter;    
 })(Phaser || (Phaser = {}));
 /// <reference path="../Game.ts" />
+/// <reference path="../math/Vec2.ts" />
+/// <reference path="../geom/Rectangle.ts" />
+/// <reference path="../components/animation/AnimationManager.ts" />
+/// <reference path="../components/Texture.ts" />
+/// <reference path="../components/Transform.ts" />
+/// <reference path="../components/sprite/Input.ts" />
+/// <reference path="../components/sprite/Events.ts" />
+/**
+* Phaser - Button
+*/
+var Phaser;
+(function (Phaser) {
+    var Button = (function (_super) {
+        __extends(Button, _super);
+        /**
+        * Create a new <code>Button</code> object.
+        *
+        * @param game {Phaser.Game} Current game instance.
+        * @param [x] {number} the initial x position of the button.
+        * @param [y] {number} the initial y position of the button.
+        * @param [key] {string} Key of the graphic you want to load for this button.
+        */
+        function Button(game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame) {
+            if (typeof x === "undefined") { x = 0; }
+            if (typeof y === "undefined") { y = 0; }
+            if (typeof key === "undefined") { key = null; }
+            if (typeof callback === "undefined") { callback = null; }
+            if (typeof callbackContext === "undefined") { callbackContext = null; }
+            if (typeof overFrame === "undefined") { overFrame = null; }
+            if (typeof outFrame === "undefined") { outFrame = null; }
+            if (typeof downFrame === "undefined") { downFrame = null; }
+                _super.call(this, game, x, y, key, outFrame);
+            this._onOverFrameName = null;
+            this._onOutFrameName = null;
+            this._onDownFrameName = null;
+            this._onUpFrameName = null;
+            this._onOverFrameID = null;
+            this._onOutFrameID = null;
+            this._onDownFrameID = null;
+            this._onUpFrameID = null;
+            this.type = Phaser.Types.BUTTON;
+            if(typeof overFrame == 'string') {
+                this._onOverFrameName = overFrame;
+            } else {
+                this._onOverFrameID = overFrame;
+            }
+            if(typeof outFrame == 'string') {
+                this._onOutFrameName = outFrame;
+                this._onUpFrameName = outFrame;
+            } else {
+                this._onOutFrameID = outFrame;
+                this._onUpFrameID = outFrame;
+            }
+            if(typeof downFrame == 'string') {
+                this._onDownFrameName = downFrame;
+            } else {
+                this._onDownFrameID = downFrame;
+            }
+            //  These are the signals the game will subscribe to
+            this.onInputOver = new Phaser.Signal();
+            this.onInputOut = new Phaser.Signal();
+            this.onInputDown = new Phaser.Signal();
+            this.onInputUp = new Phaser.Signal();
+            //  Set a default signal for them
+            if(callback) {
+                this.onInputUp.add(callback, callbackContext);
+            }
+            this.input.start(0, false, true);
+            //  Redirect the input events to here so we can handle animation updates, etc
+            this.events.onInputOver.add(this.onInputOverHandler, this);
+            this.events.onInputOut.add(this.onInputOutHandler, this);
+            this.events.onInputDown.add(this.onInputDownHandler, this);
+            this.events.onInputUp.add(this.onInputUpHandler, this);
+            //  By default we'll position it using screen space, not world space.
+            this.transform.scrollFactor.setTo(0, 0);
+        }
+        Button.prototype.onInputOverHandler = //  TODO
+        //public tabIndex: number;
+        //public tabEnabled: bool;
+        //  ENTER or SPACE can activate this button if it has focus
+        function (pointer) {
+            if(this._onOverFrameName != null) {
+                this.frameName = this._onOverFrameName;
+            } else if(this._onOverFrameID != null) {
+                this.frame = this._onOverFrameID;
+            }
+            if(this.onInputOver) {
+                this.onInputOver.dispatch(this, pointer);
+            }
+        };
+        Button.prototype.onInputOutHandler = function (pointer) {
+            if(this._onOutFrameName != null) {
+                this.frameName = this._onOutFrameName;
+            } else if(this._onOutFrameID != null) {
+                this.frame = this._onOutFrameID;
+            }
+            if(this.onInputOut) {
+                this.onInputOut.dispatch(this, pointer);
+            }
+        };
+        Button.prototype.onInputDownHandler = function (pointer) {
+            if(this._onDownFrameName != null) {
+                this.frameName = this._onDownFrameName;
+            } else if(this._onDownFrameID != null) {
+                this.frame = this._onDownFrameID;
+            }
+            if(this.onInputDown) {
+                this.onInputDown.dispatch(this, pointer);
+            }
+        };
+        Button.prototype.onInputUpHandler = function (pointer) {
+            if(this._onUpFrameName != null) {
+                this.frameName = this._onUpFrameName;
+            } else if(this._onUpFrameID != null) {
+                this.frame = this._onUpFrameID;
+            }
+            if(this.onInputUp) {
+                this.onInputUp.dispatch(this, pointer);
+            }
+        };
+        Object.defineProperty(Button.prototype, "priorityID", {
+            get: function () {
+                return this.input.priorityID;
+            },
+            set: function (value) {
+                this.input.priorityID = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Button.prototype, "useHandCursor", {
+            get: function () {
+                return this.input.useHandCursor;
+            },
+            set: function (value) {
+                this.input.useHandCursor = value;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        return Button;
+    })(Phaser.Sprite);
+    Phaser.Button = Button;    
+})(Phaser || (Phaser = {}));
+/// <reference path="../Game.ts" />
 /// <reference path="../geom/Rectangle.ts" />
 /// <reference path="../math/Vec2.ts" />
 /**
@@ -13247,6 +13463,8 @@ var Phaser;
         };
         Tilemap.prototype.postUpdate = function () {
         };
+        Tilemap.prototype.destroy = function () {
+        };
         Tilemap.prototype.parseCSV = /**
         * Parset csv map data and generate tiles.
         * @param data {string} CSV map data.
@@ -13497,6 +13715,7 @@ var Phaser;
 /// <reference path="../gameobjects/Emitter.ts" />
 /// <reference path="../gameobjects/Particle.ts" />
 /// <reference path="../gameobjects/Sprite.ts" />
+/// <reference path="../gameobjects/Button.ts" />
 /// <reference path="../gameobjects/ScrollZone.ts" />
 /// <reference path="../gameobjects/DynamicTexture.ts" />
 /// <reference path="../gameobjects/Tilemap.ts" />
@@ -13528,7 +13747,7 @@ var Phaser;
         function (x, y, width, height) {
             return this._world.cameras.addCamera(x, y, width, height);
         };
-        GameObjectFactory.prototype.sprite = /**
+        GameObjectFactory.prototype.button = /**
         * Create a new GeomSprite with specific position.
         *
         * @param x {number} X position of the new geom sprite.
@@ -13539,6 +13758,30 @@ var Phaser;
         //    return <GeomSprite> this._world.group.add(new GeomSprite(this._game, x, y));
         //}
         /**
+        * Create a new Button game object.
+        *
+        * @param [x] {number} X position of the button.
+        * @param [y] {number} Y position of the button.
+        * @param [key] {string} The image key as defined in the Game.Cache to use as the texture for this button.
+        * @param [callback] {function} The function to call when this button is pressed
+        * @param [callbackContext] {object} The context in which the callback will be called (usually 'this')
+        * @param [overFrame] {string|number} This is the frame or frameName that will be set when this button is in an over state. Give either a number to use a frame ID or a string for a frame name.
+        * @param [outFrame] {string|number} This is the frame or frameName that will be set when this button is in an out state. Give either a number to use a frame ID or a string for a frame name.
+        * @param [downFrame] {string|number} This is the frame or frameName that will be set when this button is in a down state. Give either a number to use a frame ID or a string for a frame name.
+        * @returns {Button} The newly created button object.
+        */
+        function (x, y, key, callback, callbackContext, overFrame, outFrame, downFrame) {
+            if (typeof x === "undefined") { x = 0; }
+            if (typeof y === "undefined") { y = 0; }
+            if (typeof key === "undefined") { key = null; }
+            if (typeof callback === "undefined") { callback = null; }
+            if (typeof callbackContext === "undefined") { callbackContext = null; }
+            if (typeof overFrame === "undefined") { overFrame = null; }
+            if (typeof outFrame === "undefined") { outFrame = null; }
+            if (typeof downFrame === "undefined") { downFrame = null; }
+            return this._world.group.add(new Phaser.Button(this._game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame));
+        };
+        GameObjectFactory.prototype.sprite = /**
         * Create a new Sprite with specific position and sprite sheet key.
         *
         * @param x {number} X position of the new sprite.
@@ -16533,24 +16776,52 @@ var Phaser;
                 this.game.input.circle.x = this.game.input.x;
                 this.game.input.circle.y = this.game.input.y;
             }
-            if(this.targetObject !== null) {
+            //  Easy out if we're dragging something and it still exists
+            if(this.targetObject !== null && this.targetObject.input && this.targetObject.input.isDragged == true) {
                 if(this.targetObject.input.update(this) == false) {
                     this.targetObject = null;
                 }
-            } else {
+                return this;
-                //  Build our temporary click stack
+            }
-                var _highestRenderID = -1;
+            //  Work out which object is on the top
-                var _highestRenderObject = -1;
+            this._highestRenderOrderID = -1;
-                for(var i = 0; i < this.game.input.totalTrackedObjects; i++) {
+            this._highestRenderObject = -1;
-                    if(this.game.input.inputObjects[i] !== null && this.game.input.inputObjects[i].input.checkPointerOver(this) && this.game.input.inputObjects[i].renderOrderID > _highestRenderID) {
+            this._highestInputPriorityID = -1;
-                        _highestRenderID = this.game.input.inputObjects[i].renderOrderID;
+            for(var i = 0; i < this.game.input.totalTrackedObjects; i++) {
-                        _highestRenderObject = i;
+                if(this.game.input.inputObjects[i] && this.game.input.inputObjects[i].input && this.game.input.inputObjects[i].input.checkPointerOver(this)) {
+                    //  If the object has a higher Input.PriorityID OR if the priority ID is the same as the current highest AND it has a higher renderOrderID, then set it to the top
+                    if(this.game.input.inputObjects[i].input.priorityID > this._highestInputPriorityID || (this.game.input.inputObjects[i].input.priorityID == this._highestInputPriorityID && this.game.input.inputObjects[i].renderOrderID > this._highestRenderOrderID)) {
+                        this._highestRenderOrderID = this.game.input.inputObjects[i].renderOrderID;
+                        this._highestRenderObject = i;
+                        this._highestInputPriorityID = this.game.input.inputObjects[i].input.priorityID;
                     }
                 }
-                if(_highestRenderObject !== -1) {
+            }
-                    //console.log('setting target');
+            if(this._highestRenderObject == -1) {
-                    this.targetObject = this.game.input.inputObjects[_highestRenderObject];
+                //  The pointer isn't over anything, check if we've got a lingering previous target
+                if(this.targetObject !== null) {
+                    this.targetObject.input._pointerOutHandler(this);
+                    this.targetObject = null;
+                }
+            } else {
+                if(this.targetObject == null) {
+                    //  And now set the new one
+                    this.targetObject = this.game.input.inputObjects[this._highestRenderObject];
                     this.targetObject.input._pointerOverHandler(this);
+                } else {
+                    //  We've got a target from the last update
+                    if(this.targetObject == this.game.input.inputObjects[this._highestRenderObject]) {
+                        //  Same target as before, so update it
+                        if(this.targetObject.input.update(this) == false) {
+                            this.targetObject = null;
+                        }
+                    } else {
+                        //  The target has changed, so tell the old one we've left it
+                        this.targetObject.input._pointerOutHandler(this);
+                        //  And now set the new one
+                        this.targetObject = this.game.input.inputObjects[this._highestRenderObject];
+                        this.targetObject.input._pointerOverHandler(this);
+                    }
                 }
             }
             return this;
@@ -16601,7 +16872,7 @@ var Phaser;
                 this.game.input.currentPointers--;
             }
             for(var i = 0; i < this.game.input.totalTrackedObjects; i++) {
-                if(this.game.input.inputObjects[i] !== null && this.game.input.inputObjects[i].input.enabled) {
+                if(this.game.input.inputObjects[i] && this.game.input.inputObjects[i].input && this.game.input.inputObjects[i].input.enabled) {
                     this.game.input.inputObjects[i].input._releasedHandler(this);
                 }
             }
@@ -16654,7 +16925,7 @@ var Phaser;
             this._holdSent = false;
             this._history.length = 0;
             this._stateReset = true;
-            if(this.targetObject) {
+            if(this.targetObject && this.targetObject.input) {
                 this.targetObject.input._releasedHandler(this);
             }
             this.targetObject = null;
@@ -17675,7 +17946,6 @@ var Phaser;
         **/
         function (index) {
             if(this.inputObjects[index]) {
-                console.log('object removed from the input manager', index);
                 this.inputObjects[index] = null;
             }
         };
@@ -17750,7 +18020,9 @@ var Phaser;
                 this.onTap = new Phaser.Signal();
                 this.onHold = new Phaser.Signal();
                 for(var i = 0; i < this.totalTrackedObjects; i++) {
-                    this.inputObjects[i].input.reset();
+                    if(this.inputObjects[i] && this.inputObjects[i].input) {
+                        this.inputObjects[i].input.reset();
+                    }
                 }
                 this.inputObjects.length = 0;
                 this.totalTrackedObjects = 0;
@@ -18103,7 +18375,7 @@ var Phaser;
             this.renderTotal = this._count;
         };
         CanvasRenderer.prototype.renderGameObject = function (object) {
-            if(object.type == Phaser.Types.SPRITE) {
+            if(object.type == Phaser.Types.SPRITE || object.type == Phaser.Types.BUTTON) {
                 this.renderSprite(this._camera, object);
             } else if(object.type == Phaser.Types.SCROLLZONE) {
                 this.renderScrollZone(this._camera, object);
@@ -18826,16 +19098,31 @@ var Phaser;
             */
             this.onCreateCallback = null;
             /**
-            * This will be called when update states.
+            * This will be called when State is updated, this doesn't happen during load (see onLoadUpdateCallback)
             * @type {function}
             */
             this.onUpdateCallback = null;
             /**
-            * This will be called when render states.
+            * This will be called when the State is rendered, this doesn't happen during load (see onLoadRenderCallback)
             * @type {function}
             */
             this.onRenderCallback = null;
             /**
+            * This will be called before the State is rendered and before the stage is cleared
+            * @type {function}
+            */
+            this.onPreRenderCallback = null;
+            /**
+            * This will be called when the State is updated but only during the load process
+            * @type {function}
+            */
+            this.onLoadUpdateCallback = null;
+            /**
+            * This will be called when the State is rendered but only during the load process
+            * @type {function}
+            */
+            this.onLoadRenderCallback = null;
+            /**
             * This will be called when states paused.
             * @type {function}
             */
@@ -18978,11 +19265,18 @@ var Phaser;
             this.world.update();
             if(this._loadComplete && this.onUpdateCallback) {
                 this.onUpdateCallback.call(this.callbackContext);
+            } else if(this._loadComplete == false && this.onLoadUpdateCallback) {
+                this.onLoadUpdateCallback.call(this.callbackContext);
             }
             this.world.postUpdate();
+            if(this._loadComplete && this.onPreRenderCallback) {
+                this.onPreRenderCallback.call(this.callbackContext);
+            }
             this.renderer.render();
             if(this._loadComplete && this.onRenderCallback) {
                 this.onRenderCallback.call(this.callbackContext);
+            } else if(this._loadComplete == false && this.onLoadRenderCallback) {
+                this.onLoadRenderCallback.call(this.callbackContext);
             }
         };
         Game.prototype.startState = /**
@@ -19008,7 +19302,7 @@ var Phaser;
             }
         };
         Game.prototype.setCallbacks = /**
-        * Set all state callbacks (init, create, update, render).
+        * Set the most common state callbacks (init, create, update, render).
         * @param initCallback {function} Init callback invoked when init state.
         * @param createCallback {function} Create callback invoked when create state.
         * @param updateCallback {function} Update callback invoked when update state.
@@ -19053,21 +19347,33 @@ var Phaser;
             if(this.state['create'] || this.state['update']) {
                 this.callbackContext = this.state;
                 this.onInitCallback = null;
+                this.onLoadRenderCallback = null;
+                this.onLoadUpdateCallback = null;
                 this.onCreateCallback = null;
                 this.onUpdateCallback = null;
                 this.onRenderCallback = null;
+                this.onPreRenderCallback = null;
                 this.onPausedCallback = null;
                 this.onDestroyCallback = null;
                 //  Bingo, let's set them up
                 if(this.state['init']) {
                     this.onInitCallback = this.state['init'];
                 }
+                if(this.state['loadRender']) {
+                    this.onLoadRenderCallback = this.state['loadRender'];
+                }
+                if(this.state['loadUpdate']) {
+                    this.onLoadUpdateCallback = this.state['loadUpdate'];
+                }
                 if(this.state['create']) {
                     this.onCreateCallback = this.state['create'];
                 }
                 if(this.state['update']) {
                     this.onUpdateCallback = this.state['update'];
                 }
+                if(this.state['preRender']) {
+                    this.onPreRenderCallback = this.state['preRender'];
+                }
                 if(this.state['render']) {
                     this.onRenderCallback = this.state['render'];
                 }
@@ -19095,6 +19401,8 @@ var Phaser;
         function () {
             this.callbackContext = null;
             this.onInitCallback = null;
+            this.onLoadRenderCallback = null;
+            this.onLoadUpdateCallback = null;
             this.onCreateCallback = null;
             this.onUpdateCallback = null;
             this.onRenderCallback = null;