diff --git a/Phaser/Phaser.csproj b/Phaser/Phaser.csproj
index c9526df2..2f0f6091 100644
--- a/Phaser/Phaser.csproj
+++ b/Phaser/Phaser.csproj
@@ -70,6 +70,10 @@
Events.ts
+
+
+ Input.ts
+
diff --git a/Phaser/components/sprite/Events.ts b/Phaser/components/sprite/Events.ts
index 30e446ba..6e2b1ef9 100644
--- a/Phaser/components/sprite/Events.ts
+++ b/Phaser/components/sprite/Events.ts
@@ -1,34 +1,38 @@
///
-///
-///
/**
* Phaser - Components - Events
*
-*
+* Signals that are dispatched by the Sprite and its various components
*/
module Phaser.Components {
export class Events {
- constructor(parent: Sprite, key?: string = '') {
+ constructor(parent: Sprite) {
- this._game = parent.game;
+ this.game = parent.game;
this._sprite = parent;
+ this.onInputOver = new Phaser.Signal;
+ this.onInputOut = new Phaser.Signal;
+ this.onInputDown = new Phaser.Signal;
+ this.onInputUp = new Phaser.Signal;
+
}
- /**
- *
- */
- private _game: Game;
-
- /**
- * Reference to the Image stored in the Game.Cache that is used as the texture for the Sprite.
- */
+ public game: Game;
private _sprite: Sprite;
+ // Creation and destruction
+ public onAdded: Phaser.Signal;
+ public onKilled: Phaser.Signal;
+ public onRevived: Phaser.Signal;
+
+ public onOutOfBounds: Phaser.Signal;
+
+ // Input related events
public onInputOver: Phaser.Signal;
public onInputOut: Phaser.Signal;
public onInputDown: Phaser.Signal;
diff --git a/Phaser/components/sprite/Input.ts b/Phaser/components/sprite/Input.ts
new file mode 100644
index 00000000..d059e4dd
--- /dev/null
+++ b/Phaser/components/sprite/Input.ts
@@ -0,0 +1,183 @@
+///
+///
+///
+///
+
+/**
+* Phaser - Components - Input
+*
+* Input detection component
+*/
+
+module Phaser.Components {
+
+ export class Input {
+
+ constructor(parent: Sprite) {
+
+ this.game = parent.game;
+ this._sprite = parent;
+
+ this.enabled = false;
+
+ this.checkBody = false;
+ this.useHandCursor = false;
+
+ }
+
+ /**
+ *
+ */
+ public game: Game;
+
+ /**
+ * Reference to the Image stored in the Game.Cache that is used as the texture for the Sprite.
+ */
+ private _sprite: Sprite;
+
+ public enabled: bool;
+ public checkBody: bool;
+ public useHandCursor: bool;
+
+ public oldX: number;
+ public oldY: number;
+
+ public x: number = 0;
+ public y: number = 0;
+
+ /**
+ * If the Pointer is touching the touchscreen, or the mouse button is held down, isDown is set to true
+ * @property isDown
+ * @type {Boolean}
+ **/
+ public isDown: bool = false;
+
+ /**
+ * If the Pointer is not touching the touchscreen, or the mouse button is up, isUp is set to true
+ * @property isUp
+ * @type {Boolean}
+ **/
+ public isUp: bool = true;
+
+ /**
+ * A timestamp representing when the Pointer first touched the touchscreen.
+ * @property timeDown
+ * @type {Number}
+ **/
+ public timeOver: number = 0;
+
+ /**
+ * A timestamp representing when the Pointer left the touchscreen.
+ * @property timeUp
+ * @type {Number}
+ **/
+ public timeOut: number = 0;
+
+ /**
+ * Is the Pointer over this Sprite
+ * @property isOver
+ * @type {Boolean}
+ **/
+ public isOver: bool = false;
+
+ /**
+ * Is the Pointer outside of this Sprite
+ * @property isOut
+ * @type {Boolean}
+ **/
+ public isOut: bool = true;
+
+ /**
+ * Update
+ */
+ public update() {
+
+ if (this.enabled == false)
+ {
+ return;
+ }
+
+ if (this.game.input.x != this.oldX || this.game.input.y != this.oldY)
+ {
+ this.oldX = this.game.input.x;
+ this.oldY = this.game.input.y;
+
+ if (RectangleUtils.contains(this._sprite.frameBounds, this.game.input.x, this.game.input.y))
+ {
+ this.x = this.game.input.x - this._sprite.x;
+ this.y = this.game.input.y - this._sprite.y;
+
+ if (this.isOver == false)
+ {
+ this.isOver = true;
+ this.isOut = false;
+ this.timeOver = this.game.time.now;
+
+ if (this.useHandCursor)
+ {
+ this._sprite.game.stage.canvas.style.cursor = "pointer";
+ }
+
+ this._sprite.events.onInputOver.dispatch(this._sprite, this.x, this.y, this.timeOver);
+ }
+ }
+ else
+ {
+ if (this.isOver)
+ {
+ this.isOver = false;
+ this.isOut = true;
+ this.timeOut = this.game.time.now;
+
+ if (this.useHandCursor)
+ {
+ this._sprite.game.stage.canvas.style.cursor = "default";
+ }
+
+ this._sprite.events.onInputOut.dispatch(this._sprite, this.timeOut);
+ }
+ }
+
+ }
+
+ }
+
+ public justOver(delay?:number = 500): bool {
+ return (this.isOver && this.duration < delay);
+ }
+
+ public justOut(delay?:number = 500): bool {
+ return (this.isOut && (this.game.time.now - this.timeOut < delay));
+ }
+
+ public get duration(): number {
+
+ if (this.isOver)
+ {
+ return this.game.time.now - this.timeOver;
+ }
+
+ return -1;
+
+ }
+
+ /**
+ * Render debug infos. (including name, bounds info, position and some other properties)
+ * @param x {number} X position of the debug info to be rendered.
+ * @param y {number} Y position of the debug info to be rendered.
+ * @param [color] {number} color of the debug info to be rendered. (format is css color string)
+ */
+ public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') {
+
+ this._sprite.texture.context.font = '14px Courier';
+ this._sprite.texture.context.fillStyle = color;
+ this._sprite.texture.context.fillText('Sprite Input: (' + this._sprite.frameBounds.width + ' x ' + this._sprite.frameBounds.height + ')', x, y);
+ this._sprite.texture.context.fillText('x: ' + this.x.toFixed(1) + ' y: ' + this.y.toFixed(1), x, y + 14);
+ this._sprite.texture.context.fillText('over: ' + this.isOver + ' duration: ' + this.duration.toFixed(0), x, y + 28);
+ this._sprite.texture.context.fillText('just over: ' + this.justOver() + ' just out: ' + this.justOut(), x, y + 42);
+
+ }
+
+ }
+
+}
\ No newline at end of file
diff --git a/Phaser/gameobjects/Sprite.ts b/Phaser/gameobjects/Sprite.ts
index e06601b0..636d5bfd 100644
--- a/Phaser/gameobjects/Sprite.ts
+++ b/Phaser/gameobjects/Sprite.ts
@@ -3,6 +3,8 @@
///
///
///
+///
+///
///
/**
@@ -46,6 +48,9 @@ module Phaser {
this.animations = new Phaser.Components.AnimationManager(this);
this.texture = new Phaser.Components.Texture(this, key);
+ this.input = new Phaser.Components.Input(this);
+ this.events = new Phaser.Components.Events(this);
+
this.cameraBlacklist = [];
// Transform related (if we add any more then move to a component)
@@ -94,6 +99,16 @@ module Phaser {
*/
public texture: Phaser.Components.Texture;
+ /**
+ * The Input component
+ */
+ public input: Phaser.Components.Input;
+
+ /**
+ * The Events component
+ */
+ public events: Phaser.Components.Events;
+
/**
* This manages animations of the sprite. You can modify animations though it. (see AnimationManager)
* @type AnimationManager
@@ -280,14 +295,10 @@ module Phaser {
}
}
}
-
- if (this.inputEnabled)
- {
- this.updateInput();
- }
-
*/
+ this.input.update();
+
if (this.modified == true && this.scale.equals(1) && this.skew.equals(0) && this.angle == 0 && this.angleOffset == 0 && this.texture.flippedX == false && this.texture.flippedY == false)
{
this.modified = false;
diff --git a/README.md b/README.md
index 7c9025bb..390b90f4 100644
--- a/README.md
+++ b/README.md
@@ -29,8 +29,15 @@ TODO:
* Move Camera.scroll.x to just Camera.x/y
* Apply Sprite scaling to Body.bounds
* When you modify the sprite x/y directly the body position doesn't update, which leads to weird results. Need to work out who controls who.
-
-
+* Check that tween pausing works with the new performance.now
+* Game.Time should monitor pause duration
+* Investigate bug re: tilemap collision and animation frames
+* Update tests that use arrow keys and include touch/mouse support (FlxControlHandler style)
+* Polygon geom primitive
+* If the Camera is larger than the Stage size then the rotation offset isn't correct
+* Texture Repeat doesn't scroll, because it's part of the camera not the world, need to think about this more
+* Hook-up more events
+* Bug: Sprite x/y gets shifted if dynamic from the original value
V1.0.0
@@ -53,7 +60,10 @@ V1.0.0
* Optimised separateX/Y and overlap so they don't use any temporary vars any more.
* Added the new Physics.Body object to all Sprites. Used for all physics calculations in-game. Will be extended for Fixtures/Joints in future.
* Added SpriteUtils.setOriginToCenter to quickly set the origin of a sprite based on either frameBounds or body.bounds
-
+* Added Sprite.Input component for tracking Input events over a Sprite
+* Added Sprite.Input.useHandCursor (for desktop)
+* Added Sprite.Input.justOver and justOut with a configurable ms delay
+* Added Sprite.Events component for a global easy to access area to listen to events from
V0.9.6
@@ -144,15 +154,6 @@ V0.9.6
* Added the GameObjectFactory to Phaser.State
* Added new format parameter to Loader.addTextureAtlas defining the format. Currently supported: JSON Array and Starling/Sparrow XML.
-* TODO: Check that tween pausing works with the new performance.now
-* TODO: Game.Time should monitor pause duration
-* TODO: Investigate bug re: tilemap collision and animation frames
-* TODO: Update tests that use arrow keys and include touch/mouse support (FlxControlHandler style)
-* TODO: Polygon geom primitive
-* TODO: this.target.view.style.cursor = "pointer"; ("default")
-* TODO: If the Camera is larger than the Stage size then the rotation offset isn't correct
-* TODO: Texture Repeat doesn't scroll, because it's part of the camera not the world, need to think about this more
-
Requirements
------------
diff --git a/Tests/Tests.csproj b/Tests/Tests.csproj
index 32501693..9d4f3105 100644
--- a/Tests/Tests.csproj
+++ b/Tests/Tests.csproj
@@ -67,6 +67,14 @@
+
+
+ over sprite 1.ts
+
+
+
+ over sprite 2.ts
+
graphic emitter.ts
diff --git a/Tests/input/over sprite 1.js b/Tests/input/over sprite 1.js
new file mode 100644
index 00000000..a1d7dfb4
--- /dev/null
+++ b/Tests/input/over sprite 1.js
@@ -0,0 +1,21 @@
+///
+(function () {
+ var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+ function init() {
+ // Using Phasers asset loader we load up a PNG from the assets folder
+ game.loader.addImageFile('sprite', 'assets/sprites/atari130xe.png');
+ game.loader.load();
+ }
+ var sprite;
+ function create() {
+ sprite = game.add.sprite(200, 200, 'sprite');
+ // Enable Input detection
+ sprite.input.enabled = true;
+ // Change the mouse pointer to a hand when over this sprite
+ sprite.input.useHandCursor = true;
+ }
+ function render() {
+ game.input.renderDebugInfo(32, 32);
+ sprite.input.renderDebugInfo(300, 32);
+ }
+})();
diff --git a/Tests/input/over sprite 1.ts b/Tests/input/over sprite 1.ts
new file mode 100644
index 00000000..f44531e7
--- /dev/null
+++ b/Tests/input/over sprite 1.ts
@@ -0,0 +1,36 @@
+///
+
+(function () {
+
+ var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+ function init() {
+
+ // Using Phasers asset loader we load up a PNG from the assets folder
+ game.loader.addImageFile('sprite', 'assets/sprites/atari130xe.png');
+ game.loader.load();
+
+ }
+
+ var sprite: Phaser.Sprite;
+
+ function create() {
+
+ sprite = game.add.sprite(200, 200, 'sprite');
+
+ // Enable Input detection
+ sprite.input.enabled = true;
+
+ // Change the mouse pointer to a hand when over this sprite
+ sprite.input.useHandCursor = true;
+
+ }
+
+ function render() {
+
+ game.input.renderDebugInfo(32, 32);
+ sprite.input.renderDebugInfo(300, 32);
+
+ }
+
+})();
diff --git a/Tests/input/over sprite 2.js b/Tests/input/over sprite 2.js
new file mode 100644
index 00000000..664c4a4a
--- /dev/null
+++ b/Tests/input/over sprite 2.js
@@ -0,0 +1,25 @@
+///
+(function () {
+ var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+ function init() {
+ // Using Phasers asset loader we load up a PNG from the assets folder
+ game.loader.addImageFile('sprite', 'assets/sprites/shinyball.png');
+ game.loader.load();
+ }
+ var sprite;
+ function create() {
+ // Create a load of sprites
+ for(var i = 0; i < 26; i++) {
+ var tempSprite = game.add.sprite(i * 32, 100, 'sprite', Phaser.Types.BODY_DYNAMIC);
+ tempSprite.input.enabled = true;
+ tempSprite.events.onInputOver.add(dropSprite, this);
+ }
+ }
+ function dropSprite(sprite) {
+ sprite.body.velocity.y = 300;
+ sprite.input.enabled = false;
+ }
+ function render() {
+ game.input.renderDebugInfo(32, 32);
+ }
+})();
diff --git a/Tests/input/over sprite 2.ts b/Tests/input/over sprite 2.ts
new file mode 100644
index 00000000..25e29ae9
--- /dev/null
+++ b/Tests/input/over sprite 2.ts
@@ -0,0 +1,42 @@
+///
+
+(function () {
+
+ var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
+
+ function init() {
+
+ // Using Phasers asset loader we load up a PNG from the assets folder
+ game.loader.addImageFile('sprite', 'assets/sprites/shinyball.png');
+ game.loader.load();
+
+ }
+
+ var sprite: Phaser.Sprite;
+
+ function create() {
+
+ // Create a load of sprites
+ for (var i = 0; i < 26; i++)
+ {
+ var tempSprite: Phaser.Sprite = game.add.sprite(i * 32, 100, 'sprite', Phaser.Types.BODY_DYNAMIC);
+ tempSprite.input.enabled = true;
+ tempSprite.events.onInputOver.add(dropSprite, this);
+ }
+
+ }
+
+ function dropSprite(sprite: Phaser.Sprite) {
+
+ sprite.body.velocity.y = 300;
+ sprite.input.enabled = false;
+
+ }
+
+ function render() {
+
+ game.input.renderDebugInfo(32, 32);
+
+ }
+
+})();
diff --git a/Tests/phaser.js b/Tests/phaser.js
index 6fb5dc32..fc10aa62 100644
--- a/Tests/phaser.js
+++ b/Tests/phaser.js
@@ -5472,6 +5472,162 @@ var Phaser;
})(Phaser.Components || (Phaser.Components = {}));
var Components = Phaser.Components;
})(Phaser || (Phaser = {}));
+var Phaser;
+(function (Phaser) {
+ ///
+ ///
+ ///
+ ///
+ /**
+ * Phaser - Components - Input
+ *
+ * Input detection component
+ */
+ (function (Components) {
+ var Input = (function () {
+ function Input(parent) {
+ this.x = 0;
+ this.y = 0;
+ /**
+ * If the Pointer is touching the touchscreen, or the mouse button is held down, isDown is set to true
+ * @property isDown
+ * @type {Boolean}
+ **/
+ this.isDown = false;
+ /**
+ * If the Pointer is not touching the touchscreen, or the mouse button is up, isUp is set to true
+ * @property isUp
+ * @type {Boolean}
+ **/
+ this.isUp = true;
+ /**
+ * A timestamp representing when the Pointer first touched the touchscreen.
+ * @property timeDown
+ * @type {Number}
+ **/
+ this.timeOver = 0;
+ /**
+ * A timestamp representing when the Pointer left the touchscreen.
+ * @property timeUp
+ * @type {Number}
+ **/
+ this.timeOut = 0;
+ /**
+ * Is the Pointer over this Sprite
+ * @property isOver
+ * @type {Boolean}
+ **/
+ this.isOver = false;
+ /**
+ * Is the Pointer outside of this Sprite
+ * @property isOut
+ * @type {Boolean}
+ **/
+ this.isOut = true;
+ this.game = parent.game;
+ this._sprite = parent;
+ this.enabled = false;
+ this.checkBody = false;
+ this.useHandCursor = false;
+ }
+ Input.prototype.update = /**
+ * Update
+ */
+ function () {
+ if(this.enabled == false) {
+ return;
+ }
+ if(this.game.input.x != this.oldX || this.game.input.y != this.oldY) {
+ this.oldX = this.game.input.x;
+ this.oldY = this.game.input.y;
+ if(Phaser.RectangleUtils.contains(this._sprite.frameBounds, this.game.input.x, this.game.input.y)) {
+ this.x = this.game.input.x - this._sprite.x;
+ this.y = this.game.input.y - this._sprite.y;
+ if(this.isOver == false) {
+ this.isOver = true;
+ this.isOut = false;
+ this.timeOver = this.game.time.now;
+ if(this.useHandCursor) {
+ this._sprite.game.stage.canvas.style.cursor = "pointer";
+ }
+ this._sprite.events.onInputOver.dispatch(this._sprite, this.x, this.y, this.timeOver);
+ }
+ } else {
+ if(this.isOver) {
+ this.isOver = false;
+ this.isOut = true;
+ this.timeOut = this.game.time.now;
+ if(this.useHandCursor) {
+ this._sprite.game.stage.canvas.style.cursor = "default";
+ }
+ this._sprite.events.onInputOut.dispatch(this._sprite, this.timeOut);
+ }
+ }
+ }
+ };
+ Input.prototype.justOver = function (delay) {
+ if (typeof delay === "undefined") { delay = 500; }
+ return (this.isOver && this.duration < delay);
+ };
+ Input.prototype.justOut = function (delay) {
+ if (typeof delay === "undefined") { delay = 500; }
+ return (this.isOut && (this.game.time.now - this.timeOut < delay));
+ };
+ Object.defineProperty(Input.prototype, "duration", {
+ get: function () {
+ if(this.isOver) {
+ return this.game.time.now - this.timeOver;
+ }
+ return -1;
+ },
+ enumerable: true,
+ configurable: true
+ });
+ Input.prototype.renderDebugInfo = /**
+ * Render debug infos. (including name, bounds info, position and some other properties)
+ * @param x {number} X position of the debug info to be rendered.
+ * @param y {number} Y position of the debug info to be rendered.
+ * @param [color] {number} color of the debug info to be rendered. (format is css color string)
+ */
+ function (x, y, color) {
+ if (typeof color === "undefined") { color = 'rgb(255,255,255)'; }
+ this._sprite.texture.context.font = '14px Courier';
+ this._sprite.texture.context.fillStyle = color;
+ this._sprite.texture.context.fillText('Input: (' + this._sprite.frameBounds.width + ' x ' + this._sprite.frameBounds.height + ')', x, y);
+ this._sprite.texture.context.fillText('x: ' + this.x.toFixed(1) + ' y: ' + this.y.toFixed(1), x, y + 14);
+ this._sprite.texture.context.fillText('over: ' + this.isOver + ' duration: ' + this.duration.toFixed(0), x, y + 28);
+ this._sprite.texture.context.fillText('just over: ' + this.justOver() + ' just out: ' + this.justOut(), x, y + 42);
+ };
+ return Input;
+ })();
+ Components.Input = Input;
+ })(Phaser.Components || (Phaser.Components = {}));
+ var Components = Phaser.Components;
+})(Phaser || (Phaser = {}));
+var Phaser;
+(function (Phaser) {
+ ///
+ /**
+ * Phaser - Components - Events
+ *
+ * Signals that are dispatched by the Sprite and its various components
+ */
+ (function (Components) {
+ var Events = (function () {
+ function Events(parent) {
+ this.game = parent.game;
+ this._sprite = parent;
+ this.onInputOver = new Phaser.Signal();
+ this.onInputOut = new Phaser.Signal();
+ this.onInputDown = new Phaser.Signal();
+ this.onInputUp = new Phaser.Signal();
+ }
+ return Events;
+ })();
+ Components.Events = Events;
+ })(Phaser.Components || (Phaser.Components = {}));
+ var Components = Phaser.Components;
+})(Phaser || (Phaser = {}));
///
///
/**
@@ -5967,6 +6123,8 @@ var Phaser;
///
///
///
+///
+///
///
/**
* Phaser - Sprite
@@ -6029,6 +6187,8 @@ var Phaser;
this.body = new Phaser.Physics.Body(this, bodyType);
this.animations = new Phaser.Components.AnimationManager(this);
this.texture = new Phaser.Components.Texture(this, key);
+ this.input = new Phaser.Components.Input(this);
+ this.events = new Phaser.Components.Events(this);
this.cameraBlacklist = [];
// Transform related (if we add any more then move to a component)
this.origin = new Phaser.Vec2(0, 0);
@@ -6156,13 +6316,8 @@ var Phaser;
}
}
}
-
- if (this.inputEnabled)
- {
- this.updateInput();
- }
-
*/
+ this.input.update();
if(this.modified == true && this.scale.equals(1) && this.skew.equals(0) && this.angle == 0 && this.angleOffset == 0 && this.texture.flippedX == false && this.texture.flippedY == false) {
this.modified = false;
}
@@ -14964,29 +15119,6 @@ var Phaser;
Phaser.Game = Game;
})(Phaser || (Phaser = {}));
var Phaser;
-(function (Phaser) {
- ///
- ///
- ///
- /**
- * Phaser - Components - Events
- *
- *
- */
- (function (Components) {
- var Events = (function () {
- function Events(parent, key) {
- if (typeof key === "undefined") { key = ''; }
- this._game = parent.game;
- this._sprite = parent;
- }
- return Events;
- })();
- Components.Events = Events;
- })(Phaser.Components || (Phaser.Components = {}));
- var Components = Phaser.Components;
-})(Phaser || (Phaser = {}));
-var Phaser;
(function (Phaser) {
/**
* Phaser - Components - Debug
diff --git a/Tests/sprites/create sprite 1.js b/Tests/sprites/create sprite 1.js
index 06892ec1..20145d1a 100644
--- a/Tests/sprites/create sprite 1.js
+++ b/Tests/sprites/create sprite 1.js
@@ -2,13 +2,11 @@
(function () {
var game = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
- console.log('>>>>>>>>>>>>>>>>>>>>>>>> init');
// Using Phasers asset loader we load up a PNG from the assets folder
game.loader.addImageFile('bunny', 'assets/sprites/bunny.png');
game.loader.load();
}
function create() {
- console.log('>>>>>>>>>>>>>>>>>>>>>>>> create');
// 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');
diff --git a/Tests/sprites/create sprite 1.ts b/Tests/sprites/create sprite 1.ts
index d654ba7e..d1725201 100644
--- a/Tests/sprites/create sprite 1.ts
+++ b/Tests/sprites/create sprite 1.ts
@@ -6,8 +6,6 @@
function init() {
- console.log('>>>>>>>>>>>>>>>>>>>>>>>> init');
-
// Using Phasers asset loader we load up a PNG from the assets folder
game.loader.addImageFile('bunny', 'assets/sprites/bunny.png');
game.loader.load();
@@ -16,8 +14,6 @@
function create() {
- console.log('>>>>>>>>>>>>>>>>>>>>>>>> create');
-
// 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');
diff --git a/build/phaser.d.ts b/build/phaser.d.ts
index 23071e25..2208a9be 100644
--- a/build/phaser.d.ts
+++ b/build/phaser.d.ts
@@ -3200,6 +3200,101 @@ module Phaser.Components {
}
}
/**
+* Phaser - Components - Input
+*
+* Input detection component
+*/
+module Phaser.Components {
+ class Input {
+ constructor(parent: Sprite);
+ /**
+ *
+ */
+ public game: Game;
+ /**
+ * Reference to the Image stored in the Game.Cache that is used as the texture for the Sprite.
+ */
+ private _sprite;
+ public enabled: bool;
+ public checkBody: bool;
+ public useHandCursor: bool;
+ public oldX: number;
+ public oldY: number;
+ public x: number;
+ public y: number;
+ /**
+ * If the Pointer is touching the touchscreen, or the mouse button is held down, isDown is set to true
+ * @property isDown
+ * @type {Boolean}
+ **/
+ public isDown: bool;
+ /**
+ * If the Pointer is not touching the touchscreen, or the mouse button is up, isUp is set to true
+ * @property isUp
+ * @type {Boolean}
+ **/
+ public isUp: bool;
+ /**
+ * A timestamp representing when the Pointer first touched the touchscreen.
+ * @property timeDown
+ * @type {Number}
+ **/
+ public timeOver: number;
+ /**
+ * A timestamp representing when the Pointer left the touchscreen.
+ * @property timeUp
+ * @type {Number}
+ **/
+ public timeOut: number;
+ /**
+ * Is the Pointer over this Sprite
+ * @property isOver
+ * @type {Boolean}
+ **/
+ public isOver: bool;
+ /**
+ * Is the Pointer outside of this Sprite
+ * @property isOut
+ * @type {Boolean}
+ **/
+ public isOut: bool;
+ /**
+ * Update
+ */
+ public update(): void;
+ public justOver(delay?: number): bool;
+ public justOut(delay?: number): bool;
+ public duration : number;
+ /**
+ * Render debug infos. (including name, bounds info, position and some other properties)
+ * @param x {number} X position of the debug info to be rendered.
+ * @param y {number} Y position of the debug info to be rendered.
+ * @param [color] {number} color of the debug info to be rendered. (format is css color string)
+ */
+ public renderDebugInfo(x: number, y: number, color?: string): void;
+ }
+}
+/**
+* Phaser - Components - Events
+*
+* Signals that are dispatched by the Sprite and its various components
+*/
+module Phaser.Components {
+ class Events {
+ constructor(parent: Sprite);
+ public game: Game;
+ private _sprite;
+ public onAdded: Signal;
+ public onKilled: Signal;
+ public onRevived: Signal;
+ public onOutOfBounds: Signal;
+ public onInputOver: Signal;
+ public onInputOut: Signal;
+ public onInputDown: Signal;
+ public onInputUp: Signal;
+ }
+}
+/**
* Phaser - Vec2Utils
*
* A collection of methods useful for manipulating and performing operations on 2D vectors.
@@ -3493,6 +3588,14 @@ module Phaser {
*/
public texture: Components.Texture;
/**
+ * The Input component
+ */
+ public input: Components.Input;
+ /**
+ * The Events component
+ */
+ public events: Components.Events;
+ /**
* This manages animations of the sprite. You can modify animations though it. (see AnimationManager)
* @type AnimationManager
*/
@@ -8029,28 +8132,6 @@ module Phaser {
}
}
/**
-* Phaser - Components - Events
-*
-*
-*/
-module Phaser.Components {
- class Events {
- constructor(parent: Sprite, key?: string);
- /**
- *
- */
- private _game;
- /**
- * Reference to the Image stored in the Game.Cache that is used as the texture for the Sprite.
- */
- private _sprite;
- public onInputOver: Signal;
- public onInputOut: Signal;
- public onInputDown: Signal;
- public onInputUp: Signal;
- }
-}
-/**
* Phaser - Components - Debug
*
*
diff --git a/build/phaser.js b/build/phaser.js
index 6fb5dc32..fc10aa62 100644
--- a/build/phaser.js
+++ b/build/phaser.js
@@ -5472,6 +5472,162 @@ var Phaser;
})(Phaser.Components || (Phaser.Components = {}));
var Components = Phaser.Components;
})(Phaser || (Phaser = {}));
+var Phaser;
+(function (Phaser) {
+ ///
+ ///
+ ///
+ ///
+ /**
+ * Phaser - Components - Input
+ *
+ * Input detection component
+ */
+ (function (Components) {
+ var Input = (function () {
+ function Input(parent) {
+ this.x = 0;
+ this.y = 0;
+ /**
+ * If the Pointer is touching the touchscreen, or the mouse button is held down, isDown is set to true
+ * @property isDown
+ * @type {Boolean}
+ **/
+ this.isDown = false;
+ /**
+ * If the Pointer is not touching the touchscreen, or the mouse button is up, isUp is set to true
+ * @property isUp
+ * @type {Boolean}
+ **/
+ this.isUp = true;
+ /**
+ * A timestamp representing when the Pointer first touched the touchscreen.
+ * @property timeDown
+ * @type {Number}
+ **/
+ this.timeOver = 0;
+ /**
+ * A timestamp representing when the Pointer left the touchscreen.
+ * @property timeUp
+ * @type {Number}
+ **/
+ this.timeOut = 0;
+ /**
+ * Is the Pointer over this Sprite
+ * @property isOver
+ * @type {Boolean}
+ **/
+ this.isOver = false;
+ /**
+ * Is the Pointer outside of this Sprite
+ * @property isOut
+ * @type {Boolean}
+ **/
+ this.isOut = true;
+ this.game = parent.game;
+ this._sprite = parent;
+ this.enabled = false;
+ this.checkBody = false;
+ this.useHandCursor = false;
+ }
+ Input.prototype.update = /**
+ * Update
+ */
+ function () {
+ if(this.enabled == false) {
+ return;
+ }
+ if(this.game.input.x != this.oldX || this.game.input.y != this.oldY) {
+ this.oldX = this.game.input.x;
+ this.oldY = this.game.input.y;
+ if(Phaser.RectangleUtils.contains(this._sprite.frameBounds, this.game.input.x, this.game.input.y)) {
+ this.x = this.game.input.x - this._sprite.x;
+ this.y = this.game.input.y - this._sprite.y;
+ if(this.isOver == false) {
+ this.isOver = true;
+ this.isOut = false;
+ this.timeOver = this.game.time.now;
+ if(this.useHandCursor) {
+ this._sprite.game.stage.canvas.style.cursor = "pointer";
+ }
+ this._sprite.events.onInputOver.dispatch(this._sprite, this.x, this.y, this.timeOver);
+ }
+ } else {
+ if(this.isOver) {
+ this.isOver = false;
+ this.isOut = true;
+ this.timeOut = this.game.time.now;
+ if(this.useHandCursor) {
+ this._sprite.game.stage.canvas.style.cursor = "default";
+ }
+ this._sprite.events.onInputOut.dispatch(this._sprite, this.timeOut);
+ }
+ }
+ }
+ };
+ Input.prototype.justOver = function (delay) {
+ if (typeof delay === "undefined") { delay = 500; }
+ return (this.isOver && this.duration < delay);
+ };
+ Input.prototype.justOut = function (delay) {
+ if (typeof delay === "undefined") { delay = 500; }
+ return (this.isOut && (this.game.time.now - this.timeOut < delay));
+ };
+ Object.defineProperty(Input.prototype, "duration", {
+ get: function () {
+ if(this.isOver) {
+ return this.game.time.now - this.timeOver;
+ }
+ return -1;
+ },
+ enumerable: true,
+ configurable: true
+ });
+ Input.prototype.renderDebugInfo = /**
+ * Render debug infos. (including name, bounds info, position and some other properties)
+ * @param x {number} X position of the debug info to be rendered.
+ * @param y {number} Y position of the debug info to be rendered.
+ * @param [color] {number} color of the debug info to be rendered. (format is css color string)
+ */
+ function (x, y, color) {
+ if (typeof color === "undefined") { color = 'rgb(255,255,255)'; }
+ this._sprite.texture.context.font = '14px Courier';
+ this._sprite.texture.context.fillStyle = color;
+ this._sprite.texture.context.fillText('Input: (' + this._sprite.frameBounds.width + ' x ' + this._sprite.frameBounds.height + ')', x, y);
+ this._sprite.texture.context.fillText('x: ' + this.x.toFixed(1) + ' y: ' + this.y.toFixed(1), x, y + 14);
+ this._sprite.texture.context.fillText('over: ' + this.isOver + ' duration: ' + this.duration.toFixed(0), x, y + 28);
+ this._sprite.texture.context.fillText('just over: ' + this.justOver() + ' just out: ' + this.justOut(), x, y + 42);
+ };
+ return Input;
+ })();
+ Components.Input = Input;
+ })(Phaser.Components || (Phaser.Components = {}));
+ var Components = Phaser.Components;
+})(Phaser || (Phaser = {}));
+var Phaser;
+(function (Phaser) {
+ ///
+ /**
+ * Phaser - Components - Events
+ *
+ * Signals that are dispatched by the Sprite and its various components
+ */
+ (function (Components) {
+ var Events = (function () {
+ function Events(parent) {
+ this.game = parent.game;
+ this._sprite = parent;
+ this.onInputOver = new Phaser.Signal();
+ this.onInputOut = new Phaser.Signal();
+ this.onInputDown = new Phaser.Signal();
+ this.onInputUp = new Phaser.Signal();
+ }
+ return Events;
+ })();
+ Components.Events = Events;
+ })(Phaser.Components || (Phaser.Components = {}));
+ var Components = Phaser.Components;
+})(Phaser || (Phaser = {}));
///
///
/**
@@ -5967,6 +6123,8 @@ var Phaser;
///
///
///
+///
+///
///
/**
* Phaser - Sprite
@@ -6029,6 +6187,8 @@ var Phaser;
this.body = new Phaser.Physics.Body(this, bodyType);
this.animations = new Phaser.Components.AnimationManager(this);
this.texture = new Phaser.Components.Texture(this, key);
+ this.input = new Phaser.Components.Input(this);
+ this.events = new Phaser.Components.Events(this);
this.cameraBlacklist = [];
// Transform related (if we add any more then move to a component)
this.origin = new Phaser.Vec2(0, 0);
@@ -6156,13 +6316,8 @@ var Phaser;
}
}
}
-
- if (this.inputEnabled)
- {
- this.updateInput();
- }
-
*/
+ this.input.update();
if(this.modified == true && this.scale.equals(1) && this.skew.equals(0) && this.angle == 0 && this.angleOffset == 0 && this.texture.flippedX == false && this.texture.flippedY == false) {
this.modified = false;
}
@@ -14964,29 +15119,6 @@ var Phaser;
Phaser.Game = Game;
})(Phaser || (Phaser = {}));
var Phaser;
-(function (Phaser) {
- ///
- ///
- ///
- /**
- * Phaser - Components - Events
- *
- *
- */
- (function (Components) {
- var Events = (function () {
- function Events(parent, key) {
- if (typeof key === "undefined") { key = ''; }
- this._game = parent.game;
- this._sprite = parent;
- }
- return Events;
- })();
- Components.Events = Events;
- })(Phaser.Components || (Phaser.Components = {}));
- var Components = Phaser.Components;
-})(Phaser || (Phaser = {}));
-var Phaser;
(function (Phaser) {
/**
* Phaser - Components - Debug