Image hit area

[darnpunk]

Hi,

Please pardon me if this question has been asked but I tried to search on the related above topic but not able to find any answer. I am building a game map using images and no physics engine applied. The images are irregular shapes like trees, hourglass and stuff like that. And they are laid out in isometric view.

The problem comes when I am trying to click one of the objects. Because the image is a PNG, it has transparent areas and if I click anywhere in the transparent area, the onInputDown is fired. I want the event only to be fired when only when the mouse is on the object itself. For example, an hourglass. Click only on the glass then it will fire. 

Previously when I was using AS3, I don't seem to have this problem. Is there anyway to detect the click is on the graphic and not the transparent area? I also noticed the bounds can be set but for irregular shapes, that can be quite hard.

How can this be done?

Some code samples:

var interactiveLayer = game.add.group();
// test is a PNG image key that I have loaded
var key = 'test';
var tilePos = { x: 100, y: 100 };
var prop = interactiveLayer.create(tilePos.x, tilePos.y, key);
prop.anchor.set(0.5, 1);

// Add prop events
prop.inputEnabled = true;
prop.events.onInputDown.add(onPropClicked, this);

function onPropClicked(prop) {
   alert('A prop has been clicked!');
}

 

[Fatalist]

http://phaser.io/examples/v2/input/pixel-perfect-click-detection

[darnpunk]

Perfect, it works! Thanks!