Jump to content

getting mouse hover event on a shape


Recommended Posts



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.interactive = true

but neither seems to work for me.


Link to comment
Share on other sites

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);}
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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