From 63d90a017630a9ae39fbd70ff546322d343c50c3 Mon Sep 17 00:00:00 2001 From: photonstorm Date: Sun, 22 Dec 2013 03:46:08 +0000 Subject: [PATCH] Sprites that are fixedToCamera can now be input dragged regardless of world position. --- README.md | 1 + examples/wip/fixdrag.js | 72 +++++++++++++++++++++++++ examples/wip/mod.js | 2 +- examples/wip/tilemap.js | 9 ++-- src/gameobjects/Sprite.js | 15 ++++-- src/input/InputHandler.js | 102 +++++++++++++++++++++++++++--------- src/tilemap/TilemapLayer.js | 2 +- 7 files changed, 170 insertions(+), 33 deletions(-) create mode 100644 examples/wip/fixdrag.js diff --git a/README.md b/README.md index e4c1adbb..750a2ec9 100644 --- a/README.md +++ b/README.md @@ -106,6 +106,7 @@ Bug Fixes: * Fixed an issue where passing null as the Group parent wouldn't set it to game.world as it should have (thanks tito100) * Fixed Pixi bug (#425) incorrect width property for multi-line BitmapText (thanks jcd-as) * Tween.onStart is now called when the tween starts AFTER the delay value, if given (thanks stevenbouma) +* Sprites that are fixedToCamera can now be input dragged regardless of world position (thanks RafaelOliveira) You can view the Change Log for all previous versions at https://github.com/photonstorm/phaser/changelog.md diff --git a/examples/wip/fixdrag.js b/examples/wip/fixdrag.js new file mode 100644 index 00000000..4ec838a7 --- /dev/null +++ b/examples/wip/fixdrag.js @@ -0,0 +1,72 @@ + +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); + +function preload() { + + game.stage.backgroundColor = '#007236'; + + game.load.image('ball', 'assets/sprites/shinyball.png'); + game.load.image('mushroom', 'assets/sprites/mushroom2.png'); + game.load.image('phaser', 'assets/sprites/sonic_havok_sanity.png'); + +} + +var sprite; +var cursors; + +function create() { + + game.world.setBounds(0, 0, 1000, 1000); + + for (var i = 0; i < 100; i++) + { + game.add.sprite(game.world.randomX, game.world.randomY, 'mushroom'); + } + + sprite = game.add.sprite(200, 200, 'ball'); + + sprite.fixedToCamera = true; + // sprite.cameraOffset.setTo(200, 200); + + + sprite.inputEnabled = true; + sprite.input.enableDrag(); + sprite.events.onInputOver.add(wibble, this); + + cursors = game.input.keyboard.createCursorKeys(); + +} + +function wibble() { + console.log('over'); +} + +function update() { + + if (cursors.up.isDown) + { + game.camera.y -= 4; + } + else if (cursors.down.isDown) + { + game.camera.y += 4; + } + + if (cursors.left.isDown) + { + game.camera.x -= 4; + } + else if (cursors.right.isDown) + { + game.camera.x += 4; + } + +} + +function render() { + + game.debug.renderText(sprite.cameraOffset.x, 32, 32); + game.debug.renderText(sprite.cameraOffset.y, 32, 64); + game.debug.renderPointer(game.input.activePointer); + +} diff --git a/examples/wip/mod.js b/examples/wip/mod.js index e674a764..be244748 100644 --- a/examples/wip/mod.js +++ b/examples/wip/mod.js @@ -28,7 +28,7 @@ var module; function create() { module = new Protracker(); - module.buffer = game.cache.getBinary('elysium'); + module.buffer = game.cache.getBinary('impulse'); module.parse(); module.play(); diff --git a/examples/wip/tilemap.js b/examples/wip/tilemap.js index 4ef15bd5..8169ddc7 100644 --- a/examples/wip/tilemap.js +++ b/examples/wip/tilemap.js @@ -50,13 +50,14 @@ function create() { // map.setCollisionByIndexRange(20, 25); // map.setCollisionByIndexRange(27, 29); - layer3 = map.createLayer('Tile Layer 3'); - layer3.scrollFactorX = 0.5; + // layer3 = map.createLayer('Tile Layer 3'); + // layer3.scrollFactorX = 0.5; - layer2 = map.createLayer('Tile Layer 2'); - layer2.alpha = 0.5; + // layer2 = map.createLayer('Tile Layer 2'); + // layer2.alpha = 0.5; layer = map.createLayer('Tile Layer 1'); + layer.scrollFactorX = 0.5; // layer.debug = true; diff --git a/src/gameobjects/Sprite.js b/src/gameobjects/Sprite.js index de08e4c2..53565da9 100644 --- a/src/gameobjects/Sprite.js +++ b/src/gameobjects/Sprite.js @@ -354,7 +354,7 @@ Phaser.Sprite = function (game, x, y, key, frame) { /** * @property {Phaser.Point} cameraOffset - If this Sprite is fixed to the camera then use this Point to specify how far away from the Camera x/y it's rendered. */ - this.cameraOffset = new Phaser.Point(); + this.cameraOffset = new Phaser.Point(x, y); /** * You can crop the Sprites texture by modifying the crop properties. For example crop.width = 50 would set the Sprite to only render 50px wide. @@ -772,8 +772,17 @@ Phaser.Sprite.prototype.loadTexture = function (key, frame) { */ Phaser.Sprite.prototype.centerOn = function(x, y) { - this.x = x + (this.x - this.center.x); - this.y = y + (this.y - this.center.y); + if (this.fixedToCamera) + { + this.cameraOffset.x = x + (this.cameraOffset.x - this.center.x); + this.cameraOffset.y = y + (this.cameraOffset.y - this.center.y); + } + else + { + this.x = x + (this.x - this.center.x); + this.y = y + (this.y - this.center.y); + } + return this; }; diff --git a/src/input/InputHandler.js b/src/input/InputHandler.js index 01c04ca2..1d13daa6 100644 --- a/src/input/InputHandler.js +++ b/src/input/InputHandler.js @@ -701,30 +701,61 @@ Phaser.InputHandler.prototype = { return false; } - if (this.allowHorizontalDrag) + if (this.sprite.fixedToCamera) { - this.sprite.x = pointer.x + this._dragPoint.x + this.dragOffset.x; - } + if (this.allowHorizontalDrag) + { + this.sprite.cameraOffset.x = pointer.x + this._dragPoint.x + this.dragOffset.x; + } - if (this.allowVerticalDrag) - { - this.sprite.y = pointer.y + this._dragPoint.y + this.dragOffset.y; - } + if (this.allowVerticalDrag) + { + this.sprite.cameraOffset.y = pointer.y + this._dragPoint.y + this.dragOffset.y; + } - if (this.boundsRect) - { - this.checkBoundsRect(); - } + if (this.boundsRect) + { + this.checkBoundsRect(); + } - if (this.boundsSprite) - { - this.checkBoundsSprite(); - } + if (this.boundsSprite) + { + this.checkBoundsSprite(); + } - if (this.snapOnDrag) + if (this.snapOnDrag) + { + this.sprite.cameraOffset.x = Math.round(this.sprite.x / this.snapX) * this.snapX; + this.sprite.cameraOffset.y = Math.round(this.sprite.y / this.snapY) * this.snapY; + } + } + else { - this.sprite.x = Math.round(this.sprite.x / this.snapX) * this.snapX; - this.sprite.y = Math.round(this.sprite.y / this.snapY) * this.snapY; + if (this.allowHorizontalDrag) + { + this.sprite.x = pointer.x + this._dragPoint.x + this.dragOffset.x; + } + + if (this.allowVerticalDrag) + { + this.sprite.y = pointer.y + this._dragPoint.y + this.dragOffset.y; + } + + if (this.boundsRect) + { + this.checkBoundsRect(); + } + + if (this.boundsSprite) + { + this.checkBoundsSprite(); + } + + if (this.snapOnDrag) + { + this.sprite.x = Math.round(this.sprite.x / this.snapX) * this.snapX; + this.sprite.y = Math.round(this.sprite.y / this.snapY) * this.snapY; + } } return true; @@ -904,14 +935,29 @@ Phaser.InputHandler.prototype = { this._draggedPointerID = pointer.id; this._pointerData[pointer.id].isDragged = true; - if (this.dragFromCenter) + if (this.sprite.fixedToCamera) { - this.sprite.centerOn(pointer.x, pointer.y); - this._dragPoint.setTo(this.sprite.x - pointer.x, this.sprite.y - pointer.y); + if (this.dragFromCenter) + { + this.sprite.centerOn(pointer.x, pointer.y); + this._dragPoint.setTo(this.sprite.cameraOffset.x - pointer.x, this.sprite.cameraOffset.y - pointer.y); + } + else + { + this._dragPoint.setTo(this.sprite.cameraOffset.x - pointer.x, this.sprite.cameraOffset.y - pointer.y); + } } else { - this._dragPoint.setTo(this.sprite.x - pointer.x, this.sprite.y - pointer.y); + if (this.dragFromCenter) + { + this.sprite.centerOn(pointer.x, pointer.y); + this._dragPoint.setTo(this.sprite.x - pointer.x, this.sprite.y - pointer.y); + } + else + { + this._dragPoint.setTo(this.sprite.x - pointer.x, this.sprite.y - pointer.y); + } } this.updateDrag(pointer); @@ -938,8 +984,16 @@ Phaser.InputHandler.prototype = { if (this.snapOnRelease) { - this.sprite.x = Math.round(this.sprite.x / this.snapX) * this.snapX; - this.sprite.y = Math.round(this.sprite.y / this.snapY) * this.snapY; + if (this.sprite.fixedToCamera) + { + this.sprite.cameraOffset.x = Math.round(this.sprite.cameraOffset.x / this.snapX) * this.snapX; + this.sprite.cameraOffset.y = Math.round(this.sprite.cameraOffset.y / this.snapY) * this.snapY; + } + else + { + this.sprite.x = Math.round(this.sprite.x / this.snapX) * this.snapX; + this.sprite.y = Math.round(this.sprite.y / this.snapY) * this.snapY; + } } this.sprite.events.onDragStop.dispatch(this.sprite, pointer); diff --git a/src/tilemap/TilemapLayer.js b/src/tilemap/TilemapLayer.js index ab11e245..7d74d4eb 100644 --- a/src/tilemap/TilemapLayer.js +++ b/src/tilemap/TilemapLayer.js @@ -304,7 +304,7 @@ Phaser.TilemapLayer.prototype.postUpdate = function () { */ Phaser.TilemapLayer.prototype.resizeWorld = function () { - this.game.world.setBounds(0, 0, this.layer.widthInPixels, this.layer.heightInPixels); + this.game.world.setBounds(0, 0, this.layer.widthInPixels * 4, this.layer.heightInPixels); }