There is a serious error on initial hitArea of image

Phaser 3
1

There is a serious error on the hitArea of image.

This is the code of test scene I used.

‘testScene.js’

export class TestScene extends Phaser.Scene {
    constructor() {
        super({ key: "TestScene" });
    }
    preload () {
    }
    create () {
        var testImage = this.add.image(200, 200, 'menu');
        testImage.setSize(3200, 200);
        testImage.setDisplaySize(200, 200);
        testImage.setInteractive();
        testImage.on('pointerdown', ()=>console.log('huh', testImage));

        var testRect = this.add.rectangle(200, 200, 200, 200, 0x33aa33);
    }

    update() {}
};

When the size of image is 200*200 as written in the code, it works normally.

However, when I changed the size of image and rectangle to 300*300, it becomes strange.
In the output of console.log(testImage.input.hitArea), the width and the height of hitArea was 300; same as the size of image.
But, when I clicked the outside of rectangle - on the right or on the left - the hitArea was reacted as clicked.

On the other hand, when I changed the size of image and rectangle to 100*100, it became much more strange.
The real hitArea became smaller than the rectangle, still printing as same size as the image.

I think this is an important error.
I wish to see this issue is solved as soon as possible.

2

Don’t use setSize() with Images or Sprites; they’re supposed to get their size from the texture frame. Use either setDisplaySize() or setScale().

3

Thank you. Now I got it.
So, it happened just because I added setSize().

It is working normally only after I deleted setSize() as following.

export class TestScene extends Phaser.Scene {
    constructor() {
        super({ key: "TestScene" });
    }
    preload () {
    }
    create () {
        var testImage = this.add.image(200, 200, 'menu');
        testImage.setDisplaySize(200, 200);
        testImage.setInteractive();
        testImage.on('pointerdown', ()=>console.log('huh', testImage));

        var testRect = this.add.rectangle(200, 200, 200, 200, 0x33aa33);
    }

    update() {}
};