How can i set the texture of a button after it has been clicked

Phaser 3
1

Hi, am trying to set the texture of a button that my game uses for toggling the visiblity of the gamepad
First when the button is pressed, i want it’s texture to change from that of a gamepad to a keyboard. The problem with is that this is happening once, like once the button is clicked, it 's texture changes to that of a keyboard and nothing more happens and i don’t even get an error message in the console.
Here is my code sample

class Blabla extends Phaser.scene{
constructor(){
this.padVisible=true; //pad is visible in the start
}
preload(){...}
create(){
let myBtn = this.add.image(..,..,padIcon,);
....
this.padGroup = this.add.group()// this group contains all my gampad controls like joystick ,....
myBtn.on("pointerdown",function(){
      if (this.padVisible==true){
        this.padGroup.toggleVisible();
        this.padVisible = false
       myBtn.setTexture("keyboard-icon")
       myBtn.setScale(0.1)
      }
      else if (this.padVisible == false){
        this.padGroup.toggleVisible();
        this.padVisible=true
       myBtn.setTexture("pad-icon")
      }
    
    },this)
....
}
....
}
2

For you button game object, myBtn, are you calling the setInteractive method? This method will enable the interactivity for your game object, which should trigger the event listener you registered for the pointerdown event.

I would also recommend adding a console log statement in the event listener to make sure it is being triggered.

Here is a sample codepen:

3

I had done the same thing but it didn’t work. If you have time to spare, the full project repo is located on github Gamepad template
The code am working with is located in main.js in the scenes folder on line 165.

4

@John4650-hub I tried to review the template, but the repo is not showing for me. Is the repo set to private by chance?

5

I have made it public you can also view it from a github page via this link https://john4650-hub.github.io/Gamepad-template/ , it is a mobile gamepad. So it might appear different on a desktop computer. Anyway i have added a comment you can start from line 170.

6

@scottwestover https://phaser.discourse.group/u/scottwestover i
appreciate your help very much. Thanks

7

When you call setInteractive() without passing hit area, Phaser creates a rectangular hit area from the current texture frame. If you change the texture frame after that, the hit area is still the same. And if you scale the game object, the hit area also scales. So it’s possible the first texture switch and scale shrank the hit area so you couldn’t click on it a second time.

8

@samme, I have checked the hitAtrea before and after clicking the button, and got the same dimensions

There’s also some wierd thing am seeing. When i change and start with the
keyboard texture during definition of my button variable, it actually works

The keyboard icon is bigger than other icon naturally. I think i am going find a way to fix this behaviour to work the other way around.

9

The sprite’s input.hitArea is in unscaled pixels, so it doesn’t change. I mean that when you scale the sprite, its hit area is also transformed. Here is the hit area after

myBtn.setTexture("keyboard-icon").setScale(0.1)

settings menu icon

10

Thanks