You can now use the hitArea property on Sprites and Image objects. hitArea can be a geometry object (Rectangle, Circle, Polygon, Ellipse) and is used in pointerOver checks.

examples/wip/grid-drag.js

@@ -0,0 +1,86 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.image('block', 'assets/sprites/block.png');
+
+}
+
+var grid = [];
+var currentTile = new Phaser.Point();
+
+function create() {
+
+	//	The block.png is 95x95, so for this we'll create a little grid or it won't fit:
+
+	for (var y = 0; y < 5; y++)
+	{
+		grid[y] = [];
+
+		for (var x = 0; x < 5; x++)
+		{
+			// grid[y][x] = game.add.sprite(x * 95, y * 95, 'block');
+			//	coz the grid is empty like
+			grid[y][x] = null;
+		}
+	}
+
+	var block1 = game.add.sprite(600, 100, 'block');
+	block1.name = 'block1';
+	block1.inputEnabled = true;
+	block1.input.enableDrag(true);
+	block1.events.onDragStop.add(dropBlock, this);
+
+	var block2 = game.add.sprite(600, 300, 'block');
+	block2.name = 'block2';
+	block2.inputEnabled = true;
+	block2.input.enableDrag(true);
+	block2.events.onDragStop.add(dropBlock, this);
+
+}
+
+function dropBlock(sprite, pointer) {
+
+	//	Convert the pointer into a grid location
+    var x = this.game.math.snapToFloor(pointer.x, 95) / 95;
+    var y = this.game.math.snapToFloor(pointer.y, 95) / 95;
+
+	//	Bounds check it
+	if (x >= 0 && x <= 4 && y >= 0 && y <= 4)
+	{
+		//	something in there already?
+		if (grid[y][x] !== null)
+		{
+			//	This is very hacky - what you SHOULD do is have a Pipe object which has properties startX and startY or something, and snap back to those.
+			if (sprite.name === 'block1')
+			{
+				game.add.tween(sprite).to( { x: 600, y: 100 }, 1000, Phaser.Easing.Linear.None, true);
+			}
+			else
+			{
+				game.add.tween(sprite).to( { x: 600, y: 300 }, 1000, Phaser.Easing.Linear.None, true);
+			}
+		}
+		else
+		{
+			grid[y][x] = sprite;
+			sprite.inputEnabled = false;
+		}
+	}
+
+}
+
+function update() {
+
+	//	95 = width and height of the block.png
+    currentTile.x = this.game.math.snapToFloor(game.input.x, 95) / 95;
+    currentTile.y = this.game.math.snapToFloor(game.input.y, 95) / 95;
+
+}
+
+function render() {
+
+	game.debug.renderText('Tile X: ' + currentTile.x + ' Y: ' + currentTile.y, 32, 32);
+	
+}

examples/wip/grid.js

@@ -0,0 +1,54 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.image('block', 'assets/sprites/block.png');
+
+}
+
+var grid = [];
+var currentTile = new Phaser.Point();
+
+function create() {
+
+	//	The block.png is 95x95, so for this we'll create a little grid or it won't fit:
+
+	for (var y = 0; y < 5; y++)
+	{
+		grid[y] = [];
+
+		for (var x = 0; x < 5; x++)
+		{
+			grid[y][x] = game.add.sprite(x * 95, y * 95, 'block');
+		}
+	}
+
+	game.input.onDown.add(clickedBlock, this);
+
+}
+
+function clickedBlock() {
+
+	//	Bounds check
+	if (currentTile.x >= 0 && currentTile.x <= 4 && currentTile.y >= 0 && currentTile.y <= 4)
+	{
+		block = grid[currentTile.y][currentTile.x];
+		block.alpha = 0.5;
+	}
+
+}
+
+function update() {
+
+	//	95 = width and height of the block.png
+    currentTile.x = this.game.math.snapToFloor(game.input.x, 95) / 95;
+    currentTile.y = this.game.math.snapToFloor(game.input.y, 95) / 95;
+
+}
+
+function render() {
+
+	game.debug.renderText('Tile X: ' + currentTile.x + ' Y: ' + currentTile.y, 32, 32);
+	
+}

examples/wip/hitArea.js

@@ -0,0 +1,81 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+    game.load.image('mushroom', 'assets/sprites/mushroom2.png');
+    game.load.image('ball', 'assets/sprites/wizball.png');
+
+}
+
+var image;
+var image2;
+
+var down;
+var p;
+var c;
+
+function create() {
+
+    image = game.add.image(200, 200, 'mushroom');
+
+    image2 = game.add.image(400, 200, 'ball');
+
+    // image.rotation = 0.8;
+
+    image.inputEnabled = true;
+
+    image.events.onInputDown.add(clicked, this);
+    image.events.onInputOver.add(over, this);
+    image.events.onInputOut.add(out, this);
+
+
+
+    image2.hitArea = new Phaser.Circle(image2.width / 2, image2.height / 2, 90);
+    image2.inputEnabled = true;
+
+    image2.events.onInputDown.add(clicked, this);
+    image2.events.onInputOver.add(over, this);
+    image2.events.onInputOut.add(out, this);
+
+
+    // game.input.mouse.mouseDownCallback = onMouseDown;
+    // game.input.mouse.mouseUpCallback = onMouseUp;
+    // game.input.mouse.mouseMoveCallback = onMouseMove;
+
+}
+
+function over(object, pointer) {
+
+    object.alpha = 0.5;
+
+}
+
+function out(object, pointer) {
+
+    object.alpha = 1;
+
+}
+
+function clicked(object, pointer) {
+
+    console.log('boom');
+
+}
+
+function update() {
+
+
+}
+
+function render() {
+
+    // var p = game.input.getLocalPosition(image);
+    var p = game.input.getLocalPosition(image2);
+
+
+    game.debug.renderPointInfo(p, 32, 32);
+    game.debug.renderPoint(p);
+    game.debug.renderCircle(image2.hitArea);
+
+}