Jump to content

Make rectangle/polygon or any graphics object clickable?


Recommended Posts

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.

Link to comment
Share on other sites

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.drawRect(0, 0, 100, 100);

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

function onClick(target, pointer){


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...