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.

Share this post

Link to post
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){


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.