Multi-hitbox Phaser Button

[jorge.graca]

Hi all,

 

I am trying to extend the Phaser.Button to have different hit-areas depending on it's state:

this.onInputDown.add(() => {this._isDown = true;let tempPhaserFrame = game.cache.getFrameByName(key, frameDown);if (tempPhaserFrame instanceof Phaser.Frame) {this.hitArea = tempPhaserFrame.getRect();// this.hitArea.offset(-this.anchor.x * this.hitArea.width, -this.anchor.y * this.hitArea.height);console.log(this.hitArea);}});

However, when I do this the button immediately gets unpressed once the hitArea is changed. Why is this?

How could I achieve a variable sized button hit check?

 

Thanks.

[Skeptron]

Shouldn't you change the hit area on the input being UP instead?

[jorge.graca]

Hi Skeptron,

 

Not really, it is just that the when the button is pressed it reduces it's size visually. I wanted to represent that in the hit box, so that when you drag out the mouse while not releasing the button, it would pop-out (became unpressed) at the new smaller edge instead of the bigger original edge.

 

Does that make sense?

[Skeptron]

Then maybe this thread would help you : http://www.html5gamedevs.com/topic/18287-trying-to-figure-out-how-to-make-a-buttons-hitarea-defined-as-the-non-transparent-png-portion/

[jorge.graca]

Thanks! That does indeed do what I wanted

 

Just need to take care with the overhead created by constant pixel checking, thanks.