Image toggle button using container is not working

Phaser 3
1

I want to make a button which toggles its image when I click.
I tried to use the following code;

export class CardImage extends Phaser.GameObjects.Container {
    constructor(scene, x, y, id, children) {
        super(scene, x, y, children);
        scene.add.existing(this);
        this.setSize(150, 200);
        this.setInteractive();
        this.add(scene.add.image(0, 0, 'cards', id)).setScale(.5);
        this.original = this.list[0];
        this.original.setDepth(4);
        this.add(scene.add.image(0, 0, 'chosen_cards', id)).setScale(.5);
        this.toggled = this.list[1];
        this.toggled.setDepth(-31);
        this.id = id;
        this.chosen = false;
    }
    toggle() {
        if (this.chosen) {
            this.original.setDepth(-31);
            this.selected.setDepth(4);
            this.chosen = false;
        }
        else {
            this.selected.setDepth(-31);
            this.original.setDepth(4);
            this.chosen = true;
        }
    }
}

But, it showed the problem that this button always showing the toggled image, not original image.
can you tell me what is the problem?

Also, it seems the image from spriteset cannot resize by using setDisplaySize; am I correct on it?

2

I found that I can use setTexture instead of using two images in the container, but still wonder why it is not working as the way I tried…

3

:wave:

setDepth() has no effect on game objects in containers. container.moveUp(gameObject) etc. will work. But if you mean to swap images then setFrame() or setTexture() is better, yes.

setDisplaySize() should work fine, but don’t use it with setScale() on the same game object, because both methods are doing the same thing.

This is setting the container scale to 0.5. Not sure if that’s what you intend.

4

@samme, What I tried at first was setDisplaySize(), but it was not working, so I changed it. I saw at somewhere that image from spriteset cannot be used with setDisplaySize().

5

setDisplaySize() always works with images, sprites, etc. It can work with containers if you call setSize() first (this is the base size that is multiplied to get the display size).

6

Thank you.
You were right about the sizing, it worked.