Skip to content

Commit 5b532ab

Browse files
photonstormphotonstorm
committed
Sprite.Input component added and working nicely.
1 parent b20a6ff commit 5b532ab

15 files changed

Lines changed: 791 additions & 117 deletions

File tree

‎Phaser/Phaser.csproj‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,10 @@
7070
<Content Include="components\sprite\Events.js">
7171
<DependentUpon>Events.ts</DependentUpon>
7272
</Content>
73+
<TypeScriptCompile Include="components\sprite\Input.ts" />
74+
<Content Include="components\sprite\Input.js">
75+
<DependentUpon>Input.ts</DependentUpon>
76+
</Content>
7377
<Content Include="components\Tile.ts" />
7478
<Content Include="components\TilemapLayer.ts" />
7579
<Content Include="Game.js">

‎Phaser/components/sprite/Events.ts‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,38 @@
11
/// <reference path="../../Game.ts" />
2-
/// <reference path="../../gameobjects/DynamicTexture.ts" />
3-
/// <reference path="../../utils/SpriteUtils.ts" />
42

53
/**
64
* Phaser - Components - Events
75
*
8-
*
6+
* Signals that are dispatched by the Sprite and its various components
97
*/
108

119
module Phaser.Components {
1210

1311
export class Events {
1412

15-
constructor(parent: Sprite, key?: string = '') {
13+
constructor(parent: Sprite) {
1614

17-
this._game = parent.game;
15+
this.game = parent.game;
1816
this._sprite = parent;
1917

20-
}
18+
this.onInputOver = new Phaser.Signal;
19+
this.onInputOut = new Phaser.Signal;
20+
this.onInputDown = new Phaser.Signal;
21+
this.onInputUp = new Phaser.Signal;
2122

22-
/**
23-
*
24-
*/
25-
private _game: Game;
23+
}
2624

27-
/**
28-
* Reference to the Image stored in the Game.Cache that is used as the texture for the Sprite.
29-
*/
25+
public game: Game;
3026
private _sprite: Sprite;
3127

28+
// Creation and destruction
29+
public onAdded: Phaser.Signal;
30+
public onKilled: Phaser.Signal;
31+
public onRevived: Phaser.Signal;
32+
33+
public onOutOfBounds: Phaser.Signal;
34+
35+
// Input related events
3236
public onInputOver: Phaser.Signal;
3337
public onInputOut: Phaser.Signal;
3438
public onInputDown: Phaser.Signal;

‎Phaser/components/sprite/Input.ts‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
/// <reference path="../../Game.ts" />
2+
/// <reference path="../../gameobjects/DynamicTexture.ts" />
3+
/// <reference path="../../utils/SpriteUtils.ts" />
4+
/// <reference path="../../utils/RectangleUtils.ts" />
5+
6+
/**
7+
* Phaser - Components - Input
8+
*
9+
* Input detection component
10+
*/
11+
12+
module Phaser.Components {
13+
14+
export class Input {
15+
16+
constructor(parent: Sprite) {
17+
18+
this.game = parent.game;
19+
this._sprite = parent;
20+
21+
this.enabled = false;
22+
23+
this.checkBody = false;
24+
this.useHandCursor = false;
25+
26+
}
27+
28+
/**
29+
*
30+
*/
31+
public game: Game;
32+
33+
/**
34+
* Reference to the Image stored in the Game.Cache that is used as the texture for the Sprite.
35+
*/
36+
private _sprite: Sprite;
37+
38+
public enabled: bool;
39+
public checkBody: bool;
40+
public useHandCursor: bool;
41+
42+
public oldX: number;
43+
public oldY: number;
44+
45+
public x: number = 0;
46+
public y: number = 0;
47+
48+
/**
49+
* If the Pointer is touching the touchscreen, or the mouse button is held down, isDown is set to true
50+
* @property isDown
51+
* @type {Boolean}
52+
**/
53+
public isDown: bool = false;
54+
55+
/**
56+
* If the Pointer is not touching the touchscreen, or the mouse button is up, isUp is set to true
57+
* @property isUp
58+
* @type {Boolean}
59+
**/
60+
public isUp: bool = true;
61+
62+
/**
63+
* A timestamp representing when the Pointer first touched the touchscreen.
64+
* @property timeDown
65+
* @type {Number}
66+
**/
67+
public timeOver: number = 0;
68+
69+
/**
70+
* A timestamp representing when the Pointer left the touchscreen.
71+
* @property timeUp
72+
* @type {Number}
73+
**/
74+
public timeOut: number = 0;
75+
76+
/**
77+
* Is the Pointer over this Sprite
78+
* @property isOver
79+
* @type {Boolean}
80+
**/
81+
public isOver: bool = false;
82+
83+
/**
84+
* Is the Pointer outside of this Sprite
85+
* @property isOut
86+
* @type {Boolean}
87+
**/
88+
public isOut: bool = true;
89+
90+
/**
91+
* Update
92+
*/
93+
public update() {
94+
95+
if (this.enabled == false)
96+
{
97+
return;
98+
}
99+
100+
if (this.game.input.x != this.oldX || this.game.input.y != this.oldY)
101+
{
102+
this.oldX = this.game.input.x;
103+
this.oldY = this.game.input.y;
104+
105+
if (RectangleUtils.contains(this._sprite.frameBounds, this.game.input.x, this.game.input.y))
106+
{
107+
this.x = this.game.input.x - this._sprite.x;
108+
this.y = this.game.input.y - this._sprite.y;
109+
110+
if (this.isOver == false)
111+
{
112+
this.isOver = true;
113+
this.isOut = false;
114+
this.timeOver = this.game.time.now;
115+
116+
if (this.useHandCursor)
117+
{
118+
this._sprite.game.stage.canvas.style.cursor = "pointer";
119+
}
120+
121+
this._sprite.events.onInputOver.dispatch(this._sprite, this.x, this.y, this.timeOver);
122+
}
123+
}
124+
else
125+
{
126+
if (this.isOver)
127+
{
128+
this.isOver = false;
129+
this.isOut = true;
130+
this.timeOut = this.game.time.now;
131+
132+
if (this.useHandCursor)
133+
{
134+
this._sprite.game.stage.canvas.style.cursor = "default";
135+
}
136+
137+
this._sprite.events.onInputOut.dispatch(this._sprite, this.timeOut);
138+
}
139+
}
140+
141+
}
142+
143+
}
144+
145+
public justOver(delay?:number = 500): bool {
146+
return (this.isOver && this.duration < delay);
147+
}
148+
149+
public justOut(delay?:number = 500): bool {
150+
return (this.isOut && (this.game.time.now - this.timeOut < delay));
151+
}
152+
153+
public get duration(): number {
154+
155+
if (this.isOver)
156+
{
157+
return this.game.time.now - this.timeOver;
158+
}
159+
160+
return -1;
161+
162+
}
163+
164+
/**
165+
* Render debug infos. (including name, bounds info, position and some other properties)
166+
* @param x {number} X position of the debug info to be rendered.
167+
* @param y {number} Y position of the debug info to be rendered.
168+
* @param [color] {number} color of the debug info to be rendered. (format is css color string)
169+
*/
170+
public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') {
171+
172+
this._sprite.texture.context.font = '14px Courier';
173+
this._sprite.texture.context.fillStyle = color;
174+
this._sprite.texture.context.fillText('Sprite Input: (' + this._sprite.frameBounds.width + ' x ' + this._sprite.frameBounds.height + ')', x, y);
175+
this._sprite.texture.context.fillText('x: ' + this.x.toFixed(1) + ' y: ' + this.y.toFixed(1), x, y + 14);
176+
this._sprite.texture.context.fillText('over: ' + this.isOver + ' duration: ' + this.duration.toFixed(0), x, y + 28);
177+
this._sprite.texture.context.fillText('just over: ' + this.justOver() + ' just out: ' + this.justOut(), x, y + 42);
178+
179+
}
180+
181+
}
182+
183+
}

‎Phaser/gameobjects/Sprite.ts‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
/// <reference path="../core/Rectangle.ts" />
44
/// <reference path="../components/animation/AnimationManager.ts" />
55
/// <reference path="../components/sprite/Texture.ts" />
6+
/// <reference path="../components/sprite/Input.ts" />
7+
/// <reference path="../components/sprite/Events.ts" />
68
/// <reference path="../physics/Body.ts" />
79

810
/**
@@ -46,6 +48,9 @@ module Phaser {
4648

4749
this.animations = new Phaser.Components.AnimationManager(this);
4850
this.texture = new Phaser.Components.Texture(this, key);
51+
this.input = new Phaser.Components.Input(this);
52+
this.events = new Phaser.Components.Events(this);
53+
4954
this.cameraBlacklist = [];
5055

5156
// Transform related (if we add any more then move to a component)
@@ -94,6 +99,16 @@ module Phaser {
9499
*/
95100
public texture: Phaser.Components.Texture;
96101

102+
/**
103+
* The Input component
104+
*/
105+
public input: Phaser.Components.Input;
106+
107+
/**
108+
* The Events component
109+
*/
110+
public events: Phaser.Components.Events;
111+
97112
/**
98113
* This manages animations of the sprite. You can modify animations though it. (see AnimationManager)
99114
* @type AnimationManager
@@ -280,14 +295,10 @@ module Phaser {
280295
}
281296
}
282297
}
283-
284-
if (this.inputEnabled)
285-
{
286-
this.updateInput();
287-
}
288-
289298
*/
290299

300+
this.input.update();
301+
291302
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)
292303
{
293304
this.modified = false;

‎README.md‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,15 @@ TODO:
2929
* Move Camera.scroll.x to just Camera.x/y
3030
* Apply Sprite scaling to Body.bounds
3131
* 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.
32-
33-
32+
* Check that tween pausing works with the new performance.now
33+
* Game.Time should monitor pause duration
34+
* Investigate bug re: tilemap collision and animation frames
35+
* Update tests that use arrow keys and include touch/mouse support (FlxControlHandler style)
36+
* Polygon geom primitive
37+
* If the Camera is larger than the Stage size then the rotation offset isn't correct
38+
* Texture Repeat doesn't scroll, because it's part of the camera not the world, need to think about this more
39+
* Hook-up more events
40+
* Bug: Sprite x/y gets shifted if dynamic from the original value
3441

3542
V1.0.0
3643

@@ -53,7 +60,10 @@ V1.0.0
5360
* Optimised separateX/Y and overlap so they don't use any temporary vars any more.
5461
* Added the new Physics.Body object to all Sprites. Used for all physics calculations in-game. Will be extended for Fixtures/Joints in future.
5562
* Added SpriteUtils.setOriginToCenter to quickly set the origin of a sprite based on either frameBounds or body.bounds
56-
63+
* Added Sprite.Input component for tracking Input events over a Sprite
64+
* Added Sprite.Input.useHandCursor (for desktop)
65+
* Added Sprite.Input.justOver and justOut with a configurable ms delay
66+
* Added Sprite.Events component for a global easy to access area to listen to events from
5767

5868

5969
V0.9.6
@@ -144,15 +154,6 @@ V0.9.6
144154
* Added the GameObjectFactory to Phaser.State
145155
* Added new format parameter to Loader.addTextureAtlas defining the format. Currently supported: JSON Array and Starling/Sparrow XML.
146156

147-
* TODO: Check that tween pausing works with the new performance.now
148-
* TODO: Game.Time should monitor pause duration
149-
* TODO: Investigate bug re: tilemap collision and animation frames
150-
* TODO: Update tests that use arrow keys and include touch/mouse support (FlxControlHandler style)
151-
* TODO: Polygon geom primitive
152-
* TODO: this.target.view.style.cursor = "pointer"; ("default")
153-
* TODO: If the Camera is larger than the Stage size then the rotation offset isn't correct
154-
* TODO: Texture Repeat doesn't scroll, because it's part of the camera not the world, need to think about this more
155-
156157
Requirements
157158
------------
158159

‎Tests/Tests.csproj‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,14 @@
6767
</Content>
6868
<TypeScriptCompile Include="physics\aabb 1.ts" />
6969
<TypeScriptCompile Include="particles\graphic emitter.ts" />
70+
<TypeScriptCompile Include="input\over sprite 1.ts" />
71+
<Content Include="input\over sprite 1.js">
72+
<DependentUpon>over sprite 1.ts</DependentUpon>
73+
</Content>
74+
<TypeScriptCompile Include="input\over sprite 2.ts" />
75+
<Content Include="input\over sprite 2.js">
76+
<DependentUpon>over sprite 2.ts</DependentUpon>
77+
</Content>
7078
<Content Include="particles\graphic emitter.js">
7179
<DependentUpon>graphic emitter.ts</DependentUpon>
7280
</Content>

‎Tests/input/over sprite 1.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/// <reference path="../../Phaser/Game.ts" />
2+
(function () {
3+
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
4+
function init() {
5+
// Using Phasers asset loader we load up a PNG from the assets folder
6+
game.loader.addImageFile('sprite', 'assets/sprites/atari130xe.png');
7+
game.loader.load();
8+
}
9+
var sprite;
10+
function create() {
11+
sprite = game.add.sprite(200, 200, 'sprite');
12+
// Enable Input detection
13+
sprite.input.enabled = true;
14+
// Change the mouse pointer to a hand when over this sprite
15+
sprite.input.useHandCursor = true;
16+
}
17+
function render() {
18+
game.input.renderDebugInfo(32, 32);
19+
sprite.input.renderDebugInfo(300, 32);
20+
}
21+
})();

0 commit comments

Comments
 (0)