Hitboxes

[Rubydesic]

I have a Graphics object that I'm checking mouseover events on. When hovered over, I want the object to get larger and rotate itself, but I don't want the hitbox to change. I'm not really sure how to achieve this, because getBounds returns a rectangle and not a polygon or something like that.

[ivan.popelyshev]

make a container, use your sprite as a child, and set "interactiveChildren=false" for container. Set hitArea for container as a rectangle. Animate sprite scale ( or width/height, same thing).

Edited November 16, 2019 by ivan.popelyshev

[Rubydesic]

The problem is, I want the Graphics object to be initially rotated, e.g. a slanted rectangle that straightens itself when hovered over (but the hit area remains slanted/same size). therefore, the hitArea that I need to set needs to be rotated?

[Rubydesic]

On 11/16/2019 at 5:58 PM, ivan.popelyshev said:

make a container, use your sprite as a child, and set "interactiveChildren=false" for container. Set hitArea for container as a rectangle. Animate sprite scale ( or width/height, same thing).

Sorry to be rude, but I do not know if you have gotten a notification for my message so I am quoting this

[ivan.popelyshev]

Oh, thanks, i didnt get it!

> therefore, the hitArea that I need to set needs to be rotated?

rotate container initially. if you want object to be not rotated afterwards, well, rotate it in other direction.

hitArea is measured in local coordinates  Here's the code of hitArea that is the same as sprite:

container.position.set(...)
container.rotation = Math.PI/10; // a bit

sprite.anchor.set(0.5); //usually
sprite.scale.set(...);//whatever size you want, same as sprite.width = something

container.addChild(sprite);
container.interactiveChildren = false; // turn off sprite interaction
container.hitArea = new PIXI.Rectangle(-sprite.width/2, -sprite.height/2, sprite.width, sprite.height); //that's for anchor 0.5 and position 0.
// Your sprite local position and anchor can be different, you have to edit in that case.
// (sprite.position.x - sprite.anchor.x * sprite.width, sprite.position.y - sprite.anchor.y * sprite.height);
// also sprite.width is actually texture.width * sprite.scale.x if sprite has no children
// if it has children - you'll have a problem, use texture.width directly!

 

Edited November 21, 2019 by ivan.popelyshev