TileSprites can now receive full Input events, dragging, etc and be positioned in-world and fixed to cameras (fixes phaserjs#321)

Author: photonstorm

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:

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);
+
+}

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();
+            }
+        }
+    }
+
+});

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;