Problem with setInteractive function

[jagriti04]

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?

[digitsensitive]

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.

[ThePandaJam]

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.

[jagriti04]

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)

In this image the parent div is the black div above the canvas, this happens if I remove the parent div.

Image of parent div

code , I have used setInteractive() also.

PS: I am not getting any error but the avatar is not jumping not clicking on jump_button

[ThePandaJam]

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=

[jagriti04]

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_width0.94,screen_height0.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.

[ThePandaJam]

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

[jagriti04]

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

[ThePandaJam]

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

[jagriti04]

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?

[ThePandaJam]

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.

[jagriti04]

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.

[jagriti04]

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) in the create() the game starts working properly.