From 57796a60beb10a81b2fe991de01f4e7056aa4e30 Mon Sep 17 00:00:00 2001 From: photonstorm Date: Fri, 21 Feb 2014 19:21:00 +0000 Subject: [PATCH] TileSprites can now receive full Input events, dragging, etc and be positioned in-world and fixed to cameras (fixes #321) --- README.md | 1 + examples/wip/tilesprite input.js | 67 ++++++++++++++++++++++++++++++++ src/gameobjects/TileSprite.js | 41 +++++++++++++++++++ src/input/Input.js | 16 ++++++++ 4 files changed, 125 insertions(+) create mode 100644 examples/wip/tilesprite input.js diff --git a/README.md b/README.md index 897c7f26..9d3db635 100644 --- a/README.md +++ b/README.md @@ -123,6 +123,7 @@ New features: * fixedToCamrea now works for Groups as well :) You can fix a Group to the camera and it will influence its children. * Tilemap.createCollisionObjects will parse Tiled data for objectgroups and convert polyline instances into physics objects you can collide with in the world. * Loader can now load JSON files specifically (game.load.json) and they are parsed and stored in the Game.Cache. Retrieve with game.cache.getJSON(key). +* TileSprites can now receive full Input events, dragging, etc and be positioned in-world and fixed to cameras. Updates: diff --git a/examples/wip/tilesprite input.js b/examples/wip/tilesprite input.js new file mode 100644 index 00000000..94876e90 --- /dev/null +++ b/examples/wip/tilesprite input.js @@ -0,0 +1,67 @@ + +var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render }); + +function preload() { + + game.load.image('backdrop', 'assets/pics/remember-me.jpg'); + game.load.image('mushroom', 'assets/sprites/mushroom2.png'); + game.load.image('starfield', 'assets/misc/starfield.jpg'); + +} + +var sprite; +var cursors; +var mushroom; + +function create() { + + game.world.setBounds(0, 0, 1920, 1200); + game.add.image(0, 0, 'backdrop'); + + sprite = game.add.tileSprite(100, 100, 200, 200, 'starfield'); + sprite.inputEnabled = true; + sprite.events.onInputDown.add(scroll, this); + sprite.input.enableDrag(); + + mushroom = game.add.sprite(400, 400, 'mushroom'); + mushroom.inputEnabled = true; + mushroom.input.enableDrag(); + + game.camera.follow(mushroom); + + cursors = game.input.keyboard.createCursorKeys(); + +} + +function scroll() +{ + sprite.autoScroll(0, 100); +} + +function update() { + + if (cursors.left.isDown) + { + mushroom.x -= 8; + } + else if (cursors.right.isDown) + { + mushroom.x += 8; + } + + if (cursors.up.isDown) + { + mushroom.y -= 8; + } + else if (cursors.down.isDown) + { + mushroom.y += 8; + } + +} + +function render() { + + // game.debug.renderText(sprite.frame, 32, 32); + +} diff --git a/src/gameobjects/TileSprite.js b/src/gameobjects/TileSprite.js index e44d0962..f13ac4ad 100644 --- a/src/gameobjects/TileSprite.js +++ b/src/gameobjects/TileSprite.js @@ -83,6 +83,11 @@ Phaser.TileSprite = function (game, x, y, width, height, key, frame) { this.position.set(x, y); + /** + * @property {Phaser.InputHandler|null} input - The Input Handler for this object. Needs to be enabled with image.inputEnabled = true before you can use it. + */ + this.input = null; + /** * @property {Phaser.Point} world - The world coordinates of this Sprite. This differs from the x/y coordinates which are relative to the Sprites container. */ @@ -418,3 +423,39 @@ Object.defineProperty(Phaser.TileSprite.prototype, "fixedToCamera", { } }); + +/** +* By default a TileSprite won't process any input events at all. By setting inputEnabled to true the Phaser.InputHandler is +* activated for this object and it will then start to process click/touch events and more. +* +* @name Phaser.TileSprite#inputEnabled +* @property {boolean} inputEnabled - Set to true to allow this object to receive input events. +*/ +Object.defineProperty(Phaser.TileSprite.prototype, "inputEnabled", { + + get: function () { + + return (this.input && this.input.enabled); + + }, + + set: function (value) { + + if (value) + { + if (this.input === null) + { + this.input = new Phaser.InputHandler(this); + this.input.start(); + } + } + else + { + if (this.input && this.input.enabled) + { + this.input.stop(); + } + } + } + +}); diff --git a/src/input/Input.js b/src/input/Input.js index c9b7dbc1..844c8011 100644 --- a/src/input/Input.js +++ b/src/input/Input.js @@ -730,6 +730,22 @@ Phaser.Input.prototype = { return false; } + else if (displayObject instanceof Phaser.TileSprite) + { + var width = displayObject.width; + var height = displayObject.height; + var x1 = -width * displayObject.anchor.x; + + if (this._localPoint.x > x1 && this._localPoint.x < x1 + width) + { + var y1 = -height * displayObject.anchor.y; + + if (this._localPoint.y > y1 && this._localPoint.y < y1 + height) + { + return true; + } + } + } else if (displayObject instanceof PIXI.Sprite) { var width = displayObject.texture.frame.width;