Jump to content

Graphics hit box


Recommended Posts

If I have a graphics object, which is interactive, how do I increase its hit box, aka the area that listens to certain touch/mouse events. If I have a visible 5x5 px rectangle, I would like to make its touch area 50 x 50 px lets say, to make it easier to move it around via touch, without the need to press on it at exact coordinates of 5x5 px.

Link to comment
Share on other sites

//add 25 pixels on border
graphics.hitArea = new PIXI.Rectangle(-25, -25, 55, 55);
//and if you dont know your dimensions
var lb = graphics.getLocalBounds();
graphics.hitArea = new PIXI.Rectangle(lb.x-25, lb.y-25, lb.width+50, lb.height+50);

//if you want big number of similar rectangles:

var tex = graphics.generateTexture();
for (var i=0;i<1000;i++) {
    var sprite = new PIXI.Sprite(tex);
    var lb = sprite.getLocalBounds();
    sprite.hitArea = new PIXI.Rectangle(lb.x-25, lb.y-25, lb.width+50, lb.height+50);
    sprite.position.x = Math.random()*500|0;
    sprite.position.y = Math.random()*500|0;


Link to comment
Share on other sites

Wow, its a bug. There's no "hitArea" property in the object and its not documented. Its only in InteractionManager:

    displayObject.worldTransform.applyInverse(point,  this._tempPoint);
    hit = displayObject.hitArea.contains( this._tempPoint.x, this._tempPoint.y );

I'm fixing this bug in v4. It'll be easy for you to switch on it when the time will come ;)

Link to comment
Share on other sites

Thanks for the help so far Ivan, I'm kind of glad I found a bug :), but I have a need for this functionality in this version (v3). Since I am quite new to Pixi, I do not fully understand what the above code snippet is supposed to do, can I use it in some way? If so, would you be so kind to give an example.

If the above code is not a solution, is there an alternative? It does not necessarily have to be pretty, I just need the same functionality. Could creating an invisible larger interactive element on top of this one be the solution? So that when you move this larger invisible element, the visible one moves accordingly. Or would you have another solution for 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...