From 2270da2479489377b9ab547bca0975918831ad8a Mon Sep 17 00:00:00 2001 From: Richard Davey Date: Sun, 2 Jun 2013 21:41:00 +0100 Subject: [PATCH] Fixed drag sprite + offsets and center locking --- Phaser/components/sprite/Input.ts | 39 ++++++++++++++++++++----------- README.md | 2 ++ Tests/Tests.csproj | 4 ++++ Tests/input/drag sprite 1.js | 22 +++++++++++++++++ Tests/input/drag sprite 1.ts | 38 ++++++++++++++++++++++++++++++ Tests/phaser.js | 24 ++++++++++++------- build/phaser.js | 24 ++++++++++++------- 7 files changed, 121 insertions(+), 32 deletions(-) create mode 100644 Tests/input/drag sprite 1.js create mode 100644 Tests/input/drag sprite 1.ts diff --git a/Phaser/components/sprite/Input.ts b/Phaser/components/sprite/Input.ts index 2e2d8495..af05c0b4 100644 --- a/Phaser/components/sprite/Input.ts +++ b/Phaser/components/sprite/Input.ts @@ -302,10 +302,19 @@ module Phaser.Components { public _touchedHandler(pointer: Pointer) { - 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); + 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); + + // Star drag + if (this.draggable) + { + this.startDrag(pointer); + } + } } @@ -330,15 +339,15 @@ module Phaser.Components { this.stopDrag(pointer); return; } -// something wrong here, should use _dragPoint as well I think somehow + if (this.allowHorizontalDrag) { - this._sprite.x = pointer.x - this.dragOffset.x; + this._sprite.x = pointer.x + this._dragPoint.x + this.dragOffset.x; } if (this.allowVerticalDrag) { - this._sprite.y = pointer.y - this.dragOffset.y; + this._sprite.y = pointer.y + this._dragPoint.y + this.dragOffset.y; } if (this.boundsRect) @@ -481,13 +490,15 @@ module Phaser.Components { { this._pointerData[pointer.id].isDragged = true; - if (this.dragFromCenter) - { - // Move the sprite to the middle of the pointer - this.dragOffset.setTo(this._sprite.frameBounds.halfWidth, this._sprite.frameBounds.halfHeight); - } - - this._dragPoint.setTo(pointer.x - this._sprite.x - this.dragOffset.x, pointer.y - this._sprite.y - this.dragOffset.y); + if (this.dragFromCenter) + { + // Move the sprite to the middle of the pointer + this._dragPoint.setTo(-this._sprite.frameBounds.halfWidth, -this._sprite.frameBounds.halfHeight); + } + else + { + this._dragPoint.setTo(this._sprite.x - pointer.x, this._sprite.y - pointer.y); + } } diff --git a/README.md b/README.md index 083cfcd7..c3a4489c 100644 --- a/README.md +++ b/README.md @@ -38,6 +38,8 @@ TODO: * 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 * Input CSS cursor those little 4-way arrows on drag? +* Stage CSS3 transforms!!! Color tints, sepia, greyscale, all of those cool things :) + V1.0.0 diff --git a/Tests/Tests.csproj b/Tests/Tests.csproj index 757510bb..2f5b117c 100644 --- a/Tests/Tests.csproj +++ b/Tests/Tests.csproj @@ -80,6 +80,10 @@ swap children.ts + + + drag sprite 1.ts + over sprite 1.ts diff --git a/Tests/input/drag sprite 1.js b/Tests/input/drag sprite 1.js new file mode 100644 index 00000000..d326bd96 --- /dev/null +++ b/Tests/input/drag sprite 1.js @@ -0,0 +1,22 @@ +/// +(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.start(0, false, true); + sprite.input.enableDrag(true); + sprite.input.allowVerticalDrag = false; + //sprite.input.dragOffset.setTo(0, 50); + } + function render() { + game.input.renderDebugInfo(32, 32); + sprite.input.renderDebugInfo(300, 32); + } +})(); diff --git a/Tests/input/drag sprite 1.ts b/Tests/input/drag sprite 1.ts new file mode 100644 index 00000000..be180808 --- /dev/null +++ b/Tests/input/drag sprite 1.ts @@ -0,0 +1,38 @@ +/// + +(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.start(0, false, true); + + sprite.input.enableDrag(true); + + //sprite.input.allowVerticalDrag = false; + //sprite.input.dragOffset.setTo(0, 50); + + } + + function render() { + + game.input.renderDebugInfo(32, 32); + sprite.input.renderDebugInfo(300, 32); + + } + +})(); diff --git a/Tests/phaser.js b/Tests/phaser.js index 845c94d6..50b38844 100644 --- a/Tests/phaser.js +++ b/Tests/phaser.js @@ -5792,10 +5792,16 @@ var Phaser; } }; Input.prototype._touchedHandler = function (pointer) { - 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); + 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); + // Star drag + if(this.draggable) { + this.startDrag(pointer); + } + } }; Input.prototype._releasedHandler = function (pointer) { this._pointerData[pointer.id].isDown = false; @@ -5812,12 +5818,11 @@ var Phaser; this.stopDrag(pointer); return; } - // something wrong here, should use _dragPoint as well I think somehow if(this.allowHorizontalDrag) { - this._sprite.x = pointer.x - this.dragOffset.x; + this._sprite.x = pointer.x + this._dragPoint.x + this.dragOffset.x; } if(this.allowVerticalDrag) { - this._sprite.y = pointer.y - this.dragOffset.y; + this._sprite.y = pointer.y + this._dragPoint.y + this.dragOffset.y; } if(this.boundsRect) { this.checkBoundsRect(); @@ -5940,9 +5945,10 @@ var Phaser; this._pointerData[pointer.id].isDragged = true; if(this.dragFromCenter) { // Move the sprite to the middle of the pointer - this.dragOffset.setTo(this._sprite.frameBounds.halfWidth, this._sprite.frameBounds.halfHeight); + this._dragPoint.setTo(-this._sprite.frameBounds.halfWidth, -this._sprite.frameBounds.halfHeight); + } else { + this._dragPoint.setTo(this._sprite.x - pointer.x, this._sprite.y - pointer.y); } - this._dragPoint.setTo(pointer.x - this._sprite.x - this.dragOffset.x, pointer.y - this._sprite.y - this.dragOffset.y); }; Input.prototype.stopDrag = /** * Called by Pointer when drag is stopped on this Sprite. Should not usually be called directly. diff --git a/build/phaser.js b/build/phaser.js index 845c94d6..50b38844 100644 --- a/build/phaser.js +++ b/build/phaser.js @@ -5792,10 +5792,16 @@ var Phaser; } }; Input.prototype._touchedHandler = function (pointer) { - 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); + 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); + // Star drag + if(this.draggable) { + this.startDrag(pointer); + } + } }; Input.prototype._releasedHandler = function (pointer) { this._pointerData[pointer.id].isDown = false; @@ -5812,12 +5818,11 @@ var Phaser; this.stopDrag(pointer); return; } - // something wrong here, should use _dragPoint as well I think somehow if(this.allowHorizontalDrag) { - this._sprite.x = pointer.x - this.dragOffset.x; + this._sprite.x = pointer.x + this._dragPoint.x + this.dragOffset.x; } if(this.allowVerticalDrag) { - this._sprite.y = pointer.y - this.dragOffset.y; + this._sprite.y = pointer.y + this._dragPoint.y + this.dragOffset.y; } if(this.boundsRect) { this.checkBoundsRect(); @@ -5940,9 +5945,10 @@ var Phaser; this._pointerData[pointer.id].isDragged = true; if(this.dragFromCenter) { // Move the sprite to the middle of the pointer - this.dragOffset.setTo(this._sprite.frameBounds.halfWidth, this._sprite.frameBounds.halfHeight); + this._dragPoint.setTo(-this._sprite.frameBounds.halfWidth, -this._sprite.frameBounds.halfHeight); + } else { + this._dragPoint.setTo(this._sprite.x - pointer.x, this._sprite.y - pointer.y); } - this._dragPoint.setTo(pointer.x - this._sprite.x - this.dragOffset.x, pointer.y - this._sprite.y - this.dragOffset.y); }; Input.prototype.stopDrag = /** * Called by Pointer when drag is stopped on this Sprite. Should not usually be called directly.