getting mouse hover event on a shape

[rishavs]

Hi

 

I am trying to get the id of the shape my mouse is currently hovering over.

 

my shapes are in a container

 

    // creating the layers    gridLayer = new PIXI.DisplayObjectContainer ();    gridLayer.setInteractive(true);    stage.addChild(gridLayer);    

and i am creating each shape like this;

function drawHexagon(x,y, size, gap,scale, color, iterI, iterJ, type) {    var shape = new PIXI.Graphics();	// set a fill and line style	shape.beginFill(color);	shape.lineStyle(1, 0xa0a0a0, 1);    size = size-gap;        for (i = 0; i < 7; i++) {        angle = 2 * Math.PI / 6 * (i + 0.5);        var x_i = x + size * Math.cos(angle);        var y_i = y + size * Math.sin(angle);                if (i === 0) {             shape.moveTo(x_i, scale *y_i)             }        else {            shape.lineTo(x_i, scale * y_i)            }    };	shape.endFill();        // calculate and save the axial coordinates	var cX = iterJ - (iterI - (iterI&1)) / 2;    var cZ = iterI;    var cY = -1*(cX+cZ);    	shape.hexId = cX + "x" + cY + "y" + cZ + "z";    shape.hexPosX = x;    shape.hexPosY = y;        shape.setInteractive(true);    shape.mouseover = function(mouseData){       console.log("MOUSE OVER " + shape.hexId);    }    shape.click = function(mouseData){       console.log("MOUSE CLICK " + shape.hexId);    }    gridLayer.addChild(shape);}

However, clicking on any shape or hovering over it is not showing me anything in the console. what am i doing wrong?

 

i have tried both 

shape.setInteractive(true)

 and 

shape.interactive = true

but neither seems to work for me.

 

[!untrue]

This may or may not be it, but have you tried accessing the contents of mouseData and pulling out hexId through the event target? That's how I'm doing it anyway. I think in the scope of that function, when it's called later, doesn't have any idea what shape.hexId is, and looks for it in the global scope and craps itself.

 

Try something like this for both event handlers...

shape.click = function(mouseData){console.log("MOUSE CLICK " + mouseData.target.hexId);}

[rishavs]

Thanks but I found the issue (with help from StackOverflow).

When you define a shape as a geom, you have to explicitly state a hitarea.

 

So adding the following code makes it work;

    shape.hitArea = new PIXI.Polygon(vertices);    shape.interactive = true;    shape.click = function(mouseData){       console.log("MOUSE CLICK " + shape.hexId);    }

AFAIK, when you define a shape as a sprite/texture, you dont need to do this.