Skip to content

Commit 2270da2

Browse files
photonstormphotonstorm
committed
Fixed drag sprite + offsets and center locking
1 parent f9f17ad commit 2270da2

7 files changed

Lines changed: 121 additions & 32 deletions

File tree

‎Phaser/components/sprite/Input.ts‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -302,10 +302,19 @@ module Phaser.Components {
302302

303303
public _touchedHandler(pointer: Pointer) {
304304

305-
this._pointerData[pointer.id].isDown = true;
306-
this._pointerData[pointer.id].isUp = false;
307-
this._pointerData[pointer.id].timeDown = this.game.time.now;
308-
this._sprite.events.onInputDown.dispatch(this._sprite, pointer);
305+
if (this._pointerData[pointer.id].isDown == false && this._pointerData[pointer.id].isOver == true)
306+
{
307+
this._pointerData[pointer.id].isDown = true;
308+
this._pointerData[pointer.id].isUp = false;
309+
this._pointerData[pointer.id].timeDown = this.game.time.now;
310+
this._sprite.events.onInputDown.dispatch(this._sprite, pointer);
311+
312+
// Star drag
313+
if (this.draggable)
314+
{
315+
this.startDrag(pointer);
316+
}
317+
}
309318

310319
}
311320

@@ -330,15 +339,15 @@ module Phaser.Components {
330339
this.stopDrag(pointer);
331340
return;
332341
}
333-
// something wrong here, should use _dragPoint as well I think somehow
342+
334343
if (this.allowHorizontalDrag)
335344
{
336-
this._sprite.x = pointer.x - this.dragOffset.x;
345+
this._sprite.x = pointer.x + this._dragPoint.x + this.dragOffset.x;
337346
}
338347

339348
if (this.allowVerticalDrag)
340349
{
341-
this._sprite.y = pointer.y - this.dragOffset.y;
350+
this._sprite.y = pointer.y + this._dragPoint.y + this.dragOffset.y;
342351
}
343352

344353
if (this.boundsRect)
@@ -481,13 +490,15 @@ module Phaser.Components {
481490
{
482491
this._pointerData[pointer.id].isDragged = true;
483492

484-
if (this.dragFromCenter)
485-
{
486-
// Move the sprite to the middle of the pointer
487-
this.dragOffset.setTo(this._sprite.frameBounds.halfWidth, this._sprite.frameBounds.halfHeight);
488-
}
489-
490-
this._dragPoint.setTo(pointer.x - this._sprite.x - this.dragOffset.x, pointer.y - this._sprite.y - this.dragOffset.y);
493+
if (this.dragFromCenter)
494+
{
495+
// Move the sprite to the middle of the pointer
496+
this._dragPoint.setTo(-this._sprite.frameBounds.halfWidth, -this._sprite.frameBounds.halfHeight);
497+
}
498+
else
499+
{
500+
this._dragPoint.setTo(this._sprite.x - pointer.x, this._sprite.y - pointer.y);
501+
}
491502

492503
}
493504

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,8 @@ TODO:
3838
* Texture Repeat doesn't scroll, because it's part of the camera not the world, need to think about this more
3939
* Bug: Sprite x/y gets shifted if dynamic from the original value
4040
* Input CSS cursor those little 4-way arrows on drag?
41+
* Stage CSS3 transforms!!! Color tints, sepia, greyscale, all of those cool things :)
42+
4143

4244
V1.0.0
4345

‎Tests/Tests.csproj‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,10 @@
8080
<Content Include="groups\swap children.js">
8181
<DependentUpon>swap children.ts</DependentUpon>
8282
</Content>
83+
<TypeScriptCompile Include="input\drag sprite 1.ts" />
84+
<Content Include="input\drag sprite 1.js">
85+
<DependentUpon>drag sprite 1.ts</DependentUpon>
86+
</Content>
8387
<Content Include="input\over sprite 1.js">
8488
<DependentUpon>over sprite 1.ts</DependentUpon>
8589
</Content>

‎Tests/input/drag sprite 1.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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.start(0, false, true);
14+
sprite.input.enableDrag(true);
15+
sprite.input.allowVerticalDrag = false;
16+
//sprite.input.dragOffset.setTo(0, 50);
17+
}
18+
function render() {
19+
game.input.renderDebugInfo(32, 32);
20+
sprite.input.renderDebugInfo(300, 32);
21+
}
22+
})();

‎Tests/input/drag sprite 1.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
/// <reference path="../../Phaser/Game.ts" />
2+
3+
(function () {
4+
5+
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
6+
7+
function init() {
8+
9+
// Using Phasers asset loader we load up a PNG from the assets folder
10+
game.loader.addImageFile('sprite', 'assets/sprites/atari130xe.png');
11+
game.loader.load();
12+
13+
}
14+
15+
var sprite: Phaser.Sprite;
16+
17+
function create() {
18+
19+
sprite = game.add.sprite(200, 200, 'sprite');
20+
21+
// Enable Input detection
22+
sprite.input.start(0, false, true);
23+
24+
sprite.input.enableDrag(true);
25+
26+
//sprite.input.allowVerticalDrag = false;
27+
//sprite.input.dragOffset.setTo(0, 50);
28+
29+
}
30+
31+
function render() {
32+
33+
game.input.renderDebugInfo(32, 32);
34+
sprite.input.renderDebugInfo(300, 32);
35+
36+
}
37+
38+
})();

‎Tests/phaser.js‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5792,10 +5792,16 @@ var Phaser;
57925792
}
57935793
};
57945794
Input.prototype._touchedHandler = function (pointer) {
5795-
this._pointerData[pointer.id].isDown = true;
5796-
this._pointerData[pointer.id].isUp = false;
5797-
this._pointerData[pointer.id].timeDown = this.game.time.now;
5798-
this._sprite.events.onInputDown.dispatch(this._sprite, pointer);
5795+
if(this._pointerData[pointer.id].isDown == false && this._pointerData[pointer.id].isOver == true) {
5796+
this._pointerData[pointer.id].isDown = true;
5797+
this._pointerData[pointer.id].isUp = false;
5798+
this._pointerData[pointer.id].timeDown = this.game.time.now;
5799+
this._sprite.events.onInputDown.dispatch(this._sprite, pointer);
5800+
// Star drag
5801+
if(this.draggable) {
5802+
this.startDrag(pointer);
5803+
}
5804+
}
57995805
};
58005806
Input.prototype._releasedHandler = function (pointer) {
58015807
this._pointerData[pointer.id].isDown = false;
@@ -5812,12 +5818,11 @@ var Phaser;
58125818
this.stopDrag(pointer);
58135819
return;
58145820
}
5815-
// something wrong here, should use _dragPoint as well I think somehow
58165821
if(this.allowHorizontalDrag) {
5817-
this._sprite.x = pointer.x - this.dragOffset.x;
5822+
this._sprite.x = pointer.x + this._dragPoint.x + this.dragOffset.x;
58185823
}
58195824
if(this.allowVerticalDrag) {
5820-
this._sprite.y = pointer.y - this.dragOffset.y;
5825+
this._sprite.y = pointer.y + this._dragPoint.y + this.dragOffset.y;
58215826
}
58225827
if(this.boundsRect) {
58235828
this.checkBoundsRect();
@@ -5940,9 +5945,10 @@ var Phaser;
59405945
this._pointerData[pointer.id].isDragged = true;
59415946
if(this.dragFromCenter) {
59425947
// Move the sprite to the middle of the pointer
5943-
this.dragOffset.setTo(this._sprite.frameBounds.halfWidth, this._sprite.frameBounds.halfHeight);
5948+
this._dragPoint.setTo(-this._sprite.frameBounds.halfWidth, -this._sprite.frameBounds.halfHeight);
5949+
} else {
5950+
this._dragPoint.setTo(this._sprite.x - pointer.x, this._sprite.y - pointer.y);
59445951
}
5945-
this._dragPoint.setTo(pointer.x - this._sprite.x - this.dragOffset.x, pointer.y - this._sprite.y - this.dragOffset.y);
59465952
};
59475953
Input.prototype.stopDrag = /**
59485954
* Called by Pointer when drag is stopped on this Sprite. Should not usually be called directly.

‎build/phaser.js‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5792,10 +5792,16 @@ var Phaser;
57925792
}
57935793
};
57945794
Input.prototype._touchedHandler = function (pointer) {
5795-
this._pointerData[pointer.id].isDown = true;
5796-
this._pointerData[pointer.id].isUp = false;
5797-
this._pointerData[pointer.id].timeDown = this.game.time.now;
5798-
this._sprite.events.onInputDown.dispatch(this._sprite, pointer);
5795+
if(this._pointerData[pointer.id].isDown == false && this._pointerData[pointer.id].isOver == true) {
5796+
this._pointerData[pointer.id].isDown = true;
5797+
this._pointerData[pointer.id].isUp = false;
5798+
this._pointerData[pointer.id].timeDown = this.game.time.now;
5799+
this._sprite.events.onInputDown.dispatch(this._sprite, pointer);
5800+
// Star drag
5801+
if(this.draggable) {
5802+
this.startDrag(pointer);
5803+
}
5804+
}
57995805
};
58005806
Input.prototype._releasedHandler = function (pointer) {
58015807
this._pointerData[pointer.id].isDown = false;
@@ -5812,12 +5818,11 @@ var Phaser;
58125818
this.stopDrag(pointer);
58135819
return;
58145820
}
5815-
// something wrong here, should use _dragPoint as well I think somehow
58165821
if(this.allowHorizontalDrag) {
5817-
this._sprite.x = pointer.x - this.dragOffset.x;
5822+
this._sprite.x = pointer.x + this._dragPoint.x + this.dragOffset.x;
58185823
}
58195824
if(this.allowVerticalDrag) {
5820-
this._sprite.y = pointer.y - this.dragOffset.y;
5825+
this._sprite.y = pointer.y + this._dragPoint.y + this.dragOffset.y;
58215826
}
58225827
if(this.boundsRect) {
58235828
this.checkBoundsRect();
@@ -5940,9 +5945,10 @@ var Phaser;
59405945
this._pointerData[pointer.id].isDragged = true;
59415946
if(this.dragFromCenter) {
59425947
// Move the sprite to the middle of the pointer
5943-
this.dragOffset.setTo(this._sprite.frameBounds.halfWidth, this._sprite.frameBounds.halfHeight);
5948+
this._dragPoint.setTo(-this._sprite.frameBounds.halfWidth, -this._sprite.frameBounds.halfHeight);
5949+
} else {
5950+
this._dragPoint.setTo(this._sprite.x - pointer.x, this._sprite.y - pointer.y);
59445951
}
5945-
this._dragPoint.setTo(pointer.x - this._sprite.x - this.dragOffset.x, pointer.y - this._sprite.y - this.dragOffset.y);
59465952
};
59475953
Input.prototype.stopDrag = /**
59485954
* Called by Pointer when drag is stopped on this Sprite. Should not usually be called directly.

0 commit comments

Comments
 (0)