Scaled GameObject + setInteractive

Phaser 3
1

Hello nice people, I was struggling a bit with this little thingy… looks like scale cannot be set before making it interactive, because the hit area gets wrong size, so I was wondering if this is a bug or I am missing something…

Here it is a JSFiddle with different approaches to play around:
https://jsfiddle.net/zseb0tpc/1/

2

I’m not sure what’s correct, but here is one way:

var text3 = this.add.bitmapText(300, 50, 'hyper', 'Text 3', 96);

text3.setScale(0.5);
text3.setInteractive({
  useHandCursor: true,
  hitArea: Phaser.Geom.Rectangle.Clone(text3.getTextBounds().local),
  hitAreaCallback: Phaser.Geom.Rectangle.Contains
});

this.input.enableDebug(text3);
1 Like
3

Cool, that works but… looks odd to me that the other ways don’t work.
In your solution I don’t get the point of why using the “.Clone” is needed, would you mind to clarify?
Thanks!

4

Here is a simpler way:

var text3 = this.add.bitmapText(100, 100, 'ice', 'Terminator');
var { width, height } = text3;

text3.setScale(0.5);

text3.setInteractive({
  useHandCursor: true,
  hitArea: new Phaser.Geom.Rectangle(0, 0, width, height),
  hitAreaCallback: Phaser.Geom.Rectangle.Contains
});

this.input.enableDebug(text3);
1 Like
5

I suppose it needs a real Rectangle there. local is a plain object { x, y, width, height } and Rectangle.Clone() converts it.

I think your code for bounds3 etc. would work if you added hitAreaCallback.

6

sorry for necro bumping this. but i have a question related to this topic.

is there any tips to reconfigure interactive area at runtime?

i have a rectangle button that move and scale at runtime.
and i usually just use setInteractive to enable interactive based on rectangle size.

but when i scaled the object it seems that the click area doesn’t properly adjusted.

e.g : for example scaled up object have smaller click area. and scaled down object have larger click area than object rendered by camera.

i’ve tried doing removeInteractive and SetInteractive when it get moved. but it would just end up making my object not interactive anymore

7

You can modify e.g. button.input.hitArea at any time.

Also try this.input.enableDebug(button).

1 Like