Graphics hit box

[kazoo]

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.

[ivan.popelyshev]

//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:

graphics.drawRect(...)
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;
    stage.addChild(sprite);
}

 

[kazoo]

Thanks Ivan, but how come I couldn't find the hitArea property in the pixi documentation (http://pixijs.github.io/docs/index.html), is it complete ?

 

[ivan.popelyshev]

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

if(displayObject.hitArea)
{
    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

[kazoo]

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?

[ivan.popelyshev]

hitArea works fine, the bug is in jsdocs

[kazoo]

Ooookay,  I totally misunderstood what you wrote then, my bad, sorry, thanks for the reply.