Phaser: Attach Touch Event on Sprite

Question

I'am new to phaser and right now Im using phaser v.2.0.7. What I want to do is to make a sprite handle a touch event.

How can I attach onTap to a sprite object?

I know that touch event would be possible with sprite_obj.events.onInputDown, but still I used onInputUp either because when there is a popup/modal(alert) fired after the onInputDown, you need to click twice after that to make the event listener work again. (My personal workaround for this issue is using inInputUp.)

Another thing that I've tried is to add onTap on my canvas object, canvas.input.onTap.add which I think does not fit to attain my goal. Yes, it can now handle touch events but the problem is I want to limit the touch event only to the sprite image on the canvas and not the whole canvas.

Can someone help me. Thanks.

Answer 1

You first need to enable the Sprite for input:

sprite.inputEnabled = true;

You can then listen to any of the events the Sprite dispatches when it's involved in input, such as:

sprite.events.onInputDown.add(onDown, this);

...

function onDown(sprite, pointer) {
 // do something wonderful here
}

The callback is sent 2 parameters: the Sprite and the Pointer that caused the input event (as in a multi-input system this can vary often)

The Pointer has lots of properties you can access, such as the time it was placed down, movement history, etc. See the Pointer docs for details.

The Sprite has lots of events, but these are the Input related ones (this is lifted direct from the Phaser source code):

/**
* @property {Phaser.Signal} onInputOver - This signal is dispatched if the parent is inputEnabled and receives an over event from a Pointer.
* @default null
*/
this.onInputOver = null;

/**
* @property {Phaser.Signal} onInputOut - This signal is dispatched if the parent is inputEnabled and receives an out event from a Pointer.
* @default null
*/
this.onInputOut = null;

/**
* @property {Phaser.Signal} onInputDown - This signal is dispatched if the parent is inputEnabled and receives a down event from a Pointer.
* @default null
*/
this.onInputDown = null;

/**
* @property {Phaser.Signal} onInputUp - This signal is dispatched if the parent is inputEnabled and receives an up event from a Pointer.
* @default null
*/
this.onInputUp = null;

/**
* @property {Phaser.Signal} onDragStart - This signal is dispatched if the parent is inputEnabled and receives a drag start event from a Pointer.
* @default null
*/
this.onDragStart = null;

/**
* @property {Phaser.Signal} onDragStop - This signal is dispatched if the parent is inputEnabled and receives a drag stop event from a Pointer.
* @default null
*/
this.onDragStop = null;