Sign in to follow this  

Problems with interactivity

Recommended Posts

I'm working with PixiJS to create a web app with OS-like functionality (source here: so I obviously need to have stuff related to mouse and touch events. I've tried stuff like this (based on the examples):

this.interactive = true;this.mousedown = this.touchstart = this.onClick.bind(this);this.mouseup = this.touchend = this.mouseupoutside = this.touchendoutside = this.onRelease.bind(this);

But it's hit or miss. BitmapText will function normally but DisplayObjectContainers may or may not, and Graphics seem to never register clicks. Is there something I'm missing? It appears that all of these elements should support mouse and touch events.

Share this post

Link to post
Share on other sites

All display objects expect sprites (bitmap text uses sprites for drawing) need to define a hitArea property for interactivity. For graphics objects consisting of a single primitive you could probably just define the same primitive as the hit area.


You have to account for the parent objects anchor point though. Not 100% sure on this, but I think the hitarea is defined with point (0, 0) being the parent's anchor point (which defaults to top left).


Haven't tested this but something like:

var circleButton = new PIXI.Graphics();circleButton.beginFill();circleButton.drawCircle(40, 40, 50);circleButton.endFill();circleButton.hitArea = new PIXI.Circle(0, 0, 50);circleButton.interactive = true;

Share this post

Link to post
Share on other sites

I guess, PixiJS currently supports interactivity only for sprites. The above code did not work for me


If you want to use it with graphics you'll have to pass it with buttonMode = true;


A short snippet for graphics;

var slot = graphics.drawRect(slotData.X, slotData.Y, _square, slotData.sltHeight);                    slot.b_id = slotData._id;                    slot.b_number = slotData.b_number;                    slot.type = slotData.type;                    slot.interactive = true;                    slot.buttonMode = true;                    slot.hitArea = new PIXI.Rectangle(slotData.X, slotData.Y, _square, slotData.sltHeight);

Share this post

Link to post
Share on other sites

 var coords = poly[0].map(function (point) {    return new PIXI.Point(point[0], point[1]);   });
 var drawing = new PIXI.Polygon(coords);
 drawing.hitArea = new PIXI.Polygon(coords);
 drawing.interactive = true;
 drawing.buttonMode = true;

Polygon is drawing but couldnt hit on hitarea 

Checked Click and mousedwon ...

Or is there any issues in my code ? 
Please help me

Share this post

Link to post
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.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.