# Problem with setInteractive function

**URL:** <https://phaser.discourse.group/t/problem-with-setinteractive-function/3261>\
**Category:** Phaser 3\
**Created:** [July 27, 2019, 6:17pm UTC](https://phaser.discourse.group/t/problem-with-setinteractive-function/3261 "2019-07-27T18:17:33Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![jagriti04](https://avatars.discourse-cdn.com/v4/letter/j/7ea924/32.png) [@jagriti04](https://phaser.discourse.group/u/jagriti04)\
**Post date:** [July 27, 2019, 6:17pm UTC](https://phaser.discourse.group/t/problem-with-setinteractive-function/3261/1 "2019-07-27T18:17:33Z")

</div>

I have recently started using version 3.18 for a game which was earlier developed in version 3.9. Also, I am using Phaser.SCALE.FIT in config.  
But on clicking or touching(in case of mobile) on some button images on the canvas nothing happens. I am using gameObject.setInteractive() and then gameObject.on(‘pointerdown’, function(){}) but the pointer down is not detected.  
But if the size of the browser window changes somehow in between the game then the click is detected.  
Everything else works fine.  
How can I fix this issue?

---

<div class="post-metadata">

**Author:** ![digitsensitive](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/digitsensitive/32/349_2.png) [@digitsensitive](https://phaser.discourse.group/u/digitsensitive)\
**Post date:** [July 30, 2019, 10:24am UTC](https://phaser.discourse.group/t/problem-with-setinteractive-function/3261/2 "2019-07-30T10:24:00Z")

</div>

It is difficult to answer your question with the given information. Version 3.9? The game config (Phaser.Types.Core.GameConfig) has changed in the newer version. Maybe you need to adapt that.

---

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [July 30, 2019, 10:37am UTC](https://phaser.discourse.group/t/problem-with-setinteractive-function/3261/3 "2019-07-30T10:37:09Z")

</div>

Can you please give some code examples or screenshots of any errors that come up (if they do)? otherwise it’s difficult to give advice.

---

<div class="post-metadata">

**Author:** ![jagriti04](https://avatars.discourse-cdn.com/v4/letter/j/7ea924/32.png) [@jagriti04](https://phaser.discourse.group/u/jagriti04)\
**Post date:** [July 30, 2019, 11:16am UTC](https://phaser.discourse.group/t/problem-with-setinteractive-function/3261/4 "2019-07-30T11:16:40Z")

</div>

I found that if I remove the parent div in the config then the touch and click works fine but now the game canvas is shifted below the div. But I want the canvas at the place of div only that is why I used the parent element.

this is config- ( I am using Phaser.Scale.FIT mode)

 ![Screenshot%20from%202019-07-30%2016-30-19](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/f/f329ea2c126f843873296f00f71f0a667d365a5a.png)

![Screenshot%20from%202019-07-30%2016-34-14](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/0/0c7cf6aed7db2a46a013f125d506ab77fceacbe7.png)  
In this image the parent div is the black div above the canvas, this happens if I remove the parent div.

![Screenshot%20from%202019-07-30%2016-34-24](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/b/b096e54475f06aa4ad5eeb05db9e221b42a77e36.png)  
Image of parent div

![Screenshot%20from%202019-07-30%2016-35-19](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/2/2034870e3b711ba85ae886924cc85f73b217e064.png)  
code , I have used setInteractive() also.

PS: I am not getting any error but the avatar is not jumping not clicking on jump\_button

---

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [July 30, 2019, 12:53pm UTC](https://phaser.discourse.group/t/problem-with-setinteractive-function/3261/5 "2019-07-30T12:53:56Z")

</div>

I can’t see where you are setting the height and width of the canvas here.  
I’m not sure why your config is a function, not a variable. The parent section should be inside the scale manager part, if you want the game to scale to the size of your canvas.

it should look something like this:

```
const config = {
type: Phaser.AUTO,
scale: {
    mode: Phaser.Scale.FIT,
    parent: "execGame",
    width: swidth,
    height: sheight
  }
physics: {
    default: 'arcade',
    arcade: {
        gravity: {y: 3000},
        debug: false
    }
};

const game = new Phaser.Game(config);

```

In regards to your jump button, I can’t see you setting it as interactive in the code screenshot you provided. This is what I would expect to work:

```
jump_button.setInteractive();

```

I assume you already have a jump function which you want to call when the jump button is pressed. You need to call it properly here:

```
jump_button.on('pointerdown', jump());

```

same goes for double jump, you’re giving the event manager a variable `double_jump` instead of a function `double_jump()`

I strongly recommend you check out Phaser 3 examples:

[https://labs.phaser.io/index.html?dir=&q=](https://labs.phaser.io/index.html?dir=&q=)

---

<div class="post-metadata">

**Author:** ![jagriti04](https://avatars.discourse-cdn.com/v4/letter/j/7ea924/32.png) [@jagriti04](https://phaser.discourse.group/u/jagriti04)\
**Post date:** [July 30, 2019, 1:22pm UTC](https://phaser.discourse.group/t/problem-with-setinteractive-function/3261/6 "2019-07-30T13:22:10Z")

</div>

Thank you.  
Actually, I am calling config of phaser game from the function from another javascript file.

I am using setInteractive in the line shown below:  
double\_jump\_button=this.add.sprite(screen\_width_0.94,screen\_height_0.97, ‘double\_jump’).setInteractive().setScale(0.5);

I have functions for jump and double\_jump and everything works fine after screen size changes ( even if I change to landscape mode to portrait mode or vice versa). Can it be something like the binding of buttons on the canvas are not happening properly after the game started?  
I have written the parent inside scale but still nothing changed.

---

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [July 30, 2019, 1:35pm UTC](https://phaser.discourse.group/t/problem-with-setinteractive-function/3261/7 "2019-07-30T13:35:00Z")

</div>

Can you set `debug = true` in the config? You’ll be able to see the bodies of all your game objects and it will make it easier to see where potential problems lie.

When you `.setScale()`, the body (hitbox) of the sprite doesn’t change, so it may be that when you are pressing the button, there is no hitbox that registers that input, so give that a quick check.

`.this` binding used to give me so many issues, so it’s important to take the time to understand what `this` means in different parts of the code.

I also have my config stuff in a separate file altogether which I call `game.js` and it usually just contains `var gameSettings` with character speeds, jump heights etc., `var config` with all the configurations such as scale, physics and scenes involved in the game.  
The game gets initialised using this line, so it takes all the values I set into account:

```
var game = new Phaser.Game(config);
```

---

<div class="post-metadata">

**Author:** ![jagriti04](https://avatars.discourse-cdn.com/v4/letter/j/7ea924/32.png) [@jagriti04](https://phaser.discourse.group/u/jagriti04)\
**Post date:** [August 6, 2019, 9:43am UTC](https://phaser.discourse.group/t/problem-with-setinteractive-function/3261/8 "2019-08-06T09:43:48Z")

</div>

Thanks.  
When I put debug = true, then there is square around every element except the jump buttons.

---

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [August 6, 2019, 10:09am UTC](https://phaser.discourse.group/t/problem-with-setinteractive-function/3261/9 "2019-08-06T10:09:23Z")

</div>

I believe the problem lies in a missing `this` scope at the end of your `pointerdown` call.  
Try making your button press calls look like this:

```
jump_button.on('pointerdown', function(){
    this.alpha = 1;
    jump()
}, this);
```

---

<div class="post-metadata">

**Author:** ![jagriti04](https://avatars.discourse-cdn.com/v4/letter/j/7ea924/32.png) [@jagriti04](https://phaser.discourse.group/u/jagriti04)\
**Post date:** [August 6, 2019, 10:25am UTC](https://phaser.discourse.group/t/problem-with-setinteractive-function/3261/10 "2019-08-06T10:25:55Z")

</div>

Unfortunately, it didn’t work.  
This is game is in an angular project(js files in assets of the project) so, is this creating a problem?

---

<div class="post-metadata">

**Author:** ![ThePandaJam](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/thepandajam/32/1814_2.png) [@ThePandaJam](https://phaser.discourse.group/u/ThePandaJam)\
**Post date:** [August 6, 2019, 10:40am UTC](https://phaser.discourse.group/t/problem-with-setinteractive-function/3261/11 "2019-08-06T10:40:43Z")

</div>

Have you got a gitHub link for this project? It would be a bit easier to see if project structure is the issue, though I doubt it.

---

<div class="post-metadata">

**Author:** ![jagriti04](https://avatars.discourse-cdn.com/v4/letter/j/7ea924/32.png) [@jagriti04](https://phaser.discourse.group/u/jagriti04)\
**Post date:** [August 6, 2019, 10:46am UTC](https://phaser.discourse.group/t/problem-with-setinteractive-function/3261/12 "2019-08-06T10:46:25Z")

</div>

No, I don’t have.  
The game files are in assets folder of angular project and functions of the game files are called from the typesricpt file.

---

<div class="post-metadata">

**Author:** ![jagriti04](https://avatars.discourse-cdn.com/v4/letter/j/7ea924/32.png) [@jagriti04](https://phaser.discourse.group/u/jagriti04)\
**Post date:** [August 8, 2019, 6:41am UTC](https://phaser.discourse.group/t/problem-with-setinteractive-function/3261/13 "2019-08-08T06:41:56Z")

</div>

I don’t know the exact problem but when I used scene.scale.setGameSize(width, height) ([https://rexrainbow.github.io/phaser3-rex-notes/docs/site/scalemanager/#events](https://rexrainbow.github.io/phaser3-rex-notes/docs/site/scalemanager/#events)) in the create() the game starts working properly.