Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-10 07:04:31 +00:00
Code Issues Projects Releases Packages Wiki Activity

Sprite.Input component added and working nicely.

Browse source
This commit is contained in:
Richard Davey 2013-06-01 02:49:41 +01:00
parent b20a6ff85a
commit 5b532ab2e4
15 changed files with 791 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Phaser/Phaser.csproj
View file

@ -70,6 +70,10 @@
<Content Include="components\sprite\Events.js">
<DependentUpon>Events.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="components\sprite\Input.ts" />
<Content Include="components\sprite\Input.js">
<DependentUpon>Input.ts</DependentUpon>
</Content>
<Content Include="components\Tile.ts" />
<Content Include="components\TilemapLayer.ts" />
<Content Include="Game.js">

30
Phaser/components/sprite/Events.ts
View file

@ -1,34 +1,38 @@
/// <reference path="../../Game.ts" />
/// <reference path="../../gameobjects/DynamicTexture.ts" />
/// <reference path="../../utils/SpriteUtils.ts" />
/**
* 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;

183
Phaser/components/sprite/Input.ts Normal file
View file

@ -0,0 +1,183 @@
/// <reference path="../../Game.ts" />
/// <reference path="../../gameobjects/DynamicTexture.ts" />
/// <reference path="../../utils/SpriteUtils.ts" />
/// <reference path="../../utils/RectangleUtils.ts" />
/**
* 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);
}
}
}

23
Phaser/gameobjects/Sprite.ts
View file

@ -3,6 +3,8 @@
/// <reference path="../core/Rectangle.ts" />
/// <reference path="../components/animation/AnimationManager.ts" />
/// <reference path="../components/sprite/Texture.ts" />
/// <reference path="../components/sprite/Input.ts" />
/// <reference path="../components/sprite/Events.ts" />
/// <reference path="../physics/Body.ts" />
/**
@ -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;

25
README.md
View file

@ -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
------------

8
Tests/Tests.csproj
View file

@ -67,6 +67,14 @@
</Content>
<TypeScriptCompile Include="physics\aabb 1.ts" />
<TypeScriptCompile Include="particles\graphic emitter.ts" />
<TypeScriptCompile Include="input\over sprite 1.ts" />
<Content Include="input\over sprite 1.js">
<DependentUpon>over sprite 1.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="input\over sprite 2.ts" />
<Content Include="input\over sprite 2.js">
<DependentUpon>over sprite 2.ts</DependentUpon>
</Content>
<Content Include="particles\graphic emitter.js">
<DependentUpon>graphic emitter.ts</DependentUpon>
</Content>

21
Tests/input/over sprite 1.js Normal file
View file

@ -0,0 +1,21 @@
/// <reference path="../../Phaser/Game.ts" />
(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);
}
})();

36
Tests/input/over sprite 1.ts Normal file
View file

@ -0,0 +1,36 @@
/// <reference path="../../Phaser/Game.ts" />
(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);
}
})();

25
Tests/input/over sprite 2.js Normal file
View file

@ -0,0 +1,25 @@
/// <reference path="../../Phaser/Game.ts" />
(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);
}
})();

42
Tests/input/over sprite 2.ts Normal file
View file

@ -0,0 +1,42 @@
/// <reference path="../../Phaser/Game.ts" />
(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);
}
})();

190
Tests/phaser.js
View file

@ -5472,6 +5472,162 @@ var Phaser;
})(Phaser.Components || (Phaser.Components = {}));
var Components = Phaser.Components;
})(Phaser || (Phaser = {}));
var Phaser;
(function (Phaser) {
/// <reference path="../../Game.ts" />
/// <reference path="../../gameobjects/DynamicTexture.ts" />
/// <reference path="../../utils/SpriteUtils.ts" />
/// <reference path="../../utils/RectangleUtils.ts" />
/**
* 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) {
/// <reference path="../../Game.ts" />
/**
* 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 = {}));
/// <reference path="../Game.ts" />
/// <reference path="../core/Vec2.ts" />
/**
@ -5967,6 +6123,8 @@ var Phaser;
/// <reference path="../core/Rectangle.ts" />
/// <reference path="../components/animation/AnimationManager.ts" />
/// <reference path="../components/sprite/Texture.ts" />
/// <reference path="../components/sprite/Input.ts" />
/// <reference path="../components/sprite/Events.ts" />
/// <reference path="../physics/Body.ts" />
/**
* 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) {
/// <reference path="../../Game.ts" />
/// <reference path="../../gameobjects/DynamicTexture.ts" />
/// <reference path="../../utils/SpriteUtils.ts" />
/**
* 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

2
Tests/sprites/create sprite 1.js
View file

@ -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');

4
Tests/sprites/create sprite 1.ts
View file

@ -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');

125
build/phaser.d.ts vendored
View file

@ -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
*
*

190
build/phaser.js
View file

@ -5472,6 +5472,162 @@ var Phaser;
})(Phaser.Components || (Phaser.Components = {}));
var Components = Phaser.Components;
})(Phaser || (Phaser = {}));
var Phaser;
(function (Phaser) {
/// <reference path="../../Game.ts" />
/// <reference path="../../gameobjects/DynamicTexture.ts" />
/// <reference path="../../utils/SpriteUtils.ts" />
/// <reference path="../../utils/RectangleUtils.ts" />
/**
* 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) {
/// <reference path="../../Game.ts" />
/**
* 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 = {}));
/// <reference path="../Game.ts" />
/// <reference path="../core/Vec2.ts" />
/**
@ -5967,6 +6123,8 @@ var Phaser;
/// <reference path="../core/Rectangle.ts" />
/// <reference path="../components/animation/AnimationManager.ts" />
/// <reference path="../components/sprite/Texture.ts" />
/// <reference path="../components/sprite/Input.ts" />
/// <reference path="../components/sprite/Events.ts" />
/// <reference path="../physics/Body.ts" />
/**
* 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) {
/// <reference path="../../Game.ts" />
/// <reference path="../../gameobjects/DynamicTexture.ts" />
/// <reference path="../../utils/SpriteUtils.ts" />
/**
* 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