Make rectangle/polygon or any graphics object clickable?

[spinnerbox]

I found this topic where it says that graphics object in phaser has hitArea that can be any shape.

I searched Phaser docs but didn't find hitArea property. Is it moved somewhere else or is there some new way how to make graphics object clickable and call certain function when a click event happens?

Also how can I show cursor hand when rollover a clickable graphics object?

I forgot to ask is there some official phaser example for this functionality?

PS: I even searched DisplayObject class but didn't find hitArea there.

[HappinessSam]

To make a Phaser.Graphics clickable, set inputEnabled to true then ass a listener + context to it's events.onInputUp handler. If you want the cursor hand set it's input.useHandCursor to true. There is no hitArea as far as I know, it just uses the dimensions of the image. That post may have been thinking about the body hit area that is used for physics - this you can change.

So something like this should create a red square which is clickable and show the hand when you roll over it. (not actually tested in a game but I think it should work)

var graphics = game.add.graphics(0, 0);
graphics.beginFill(0xFF0000);
graphics.drawRect(0, 0, 100, 100);

graphics.inputEnabled = true;
graphics.input.useHandCursor = true;
graphics.events.onInputUp.add(onClick, this);

function onClick(target, pointer){
 console.log("hooray");
}

 

[Ralph]

As shown in @HappinessSam post, its the exact same as with a sprite. 

[spinnerbox]

@HappinessSam

Yes that answers my question. It works perfectly, thanks