# Scaled GameObject + setInteractive

**URL:** <https://phaser.discourse.group/t/scaled-gameobject-setinteractive/6720>\
**Category:** Phaser 3\
**Created:** [June 20, 2020, 6:45am UTC](https://phaser.discourse.group/t/scaled-gameobject-setinteractive/6720 "2020-06-20T06:45:05Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Darko](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/darko/32/3335_2.png) [@Darko](https://phaser.discourse.group/u/Darko)\
**Post date:** [June 20, 2020, 6:45am UTC](https://phaser.discourse.group/t/scaled-gameobject-setinteractive/6720/1 "2020-06-20T06:45:05Z")

</div>

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/](https://jsfiddle.net/zseb0tpc/1/)

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [June 20, 2020, 3:24pm UTC](https://phaser.discourse.group/t/scaled-gameobject-setinteractive/6720/2 "2020-06-20T15:24:23Z")

</div>

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

```javascript
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);

```

---

<div class="post-metadata">

**Author:** ![Darko](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/darko/32/3335_2.png) [@Darko](https://phaser.discourse.group/u/Darko)\
**Post date:** [June 20, 2020, 5:17pm UTC](https://phaser.discourse.group/t/scaled-gameobject-setinteractive/6720/3 "2020-06-20T17:17:46Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [June 20, 2020, 5:26pm UTC](https://phaser.discourse.group/t/scaled-gameobject-setinteractive/6720/4 "2020-06-20T17:26:49Z")

</div>

Here is a simpler way:

```javascript
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);

```

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [June 20, 2020, 5:32pm UTC](https://phaser.discourse.group/t/scaled-gameobject-setinteractive/6720/5 "2020-06-20T17:32:21Z")

</div>

> [@Darko](#):
>
> In your solution I don’t get the point of why using the “.Clone” is needed, would you mind to clarify?

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`.

---

<div class="post-metadata">

**Author:** ![as3mbus](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/as3mbus/32/3328_2.png) [@as3mbus](https://phaser.discourse.group/u/as3mbus)\
**Post date:** [January 21, 2022, 5:36am UTC](https://phaser.discourse.group/t/scaled-gameobject-setinteractive/6720/6 "2022-01-21T05:36:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [January 21, 2022, 6:34pm UTC](https://phaser.discourse.group/t/scaled-gameobject-setinteractive/6720/7 "2022-01-21T18:34:42Z")

</div>

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

Also try `this.input.enableDebug(button)`.