Phaser 3 hitarea interactif d'un conteneur

J'ai un conteneur contenant une image et du texte ; Nous rencontrons un problème avec la zone d'accès interactive du conteneur

this.image = this.add.image(0, 0, 'GreenButtonBox').setOrigin(0.5).setScale(2);
this.text = this.add.text(0, 0, "Click", { font: "bold 35px Arial", fill: '#ffffff' }).setOrigin(0.5).setScale(1);
this.container = this.add.container(400, 400, [this.image, this.text])
.setSize(this.image.width, this.image.height)
.setInteractive()
.on('pointerup', this.SubmitAnswer);

Dans le cas ci-dessus la partie interactive du bouton est située au milieu (peut-être à cause de l'échelle de l'image?

J'ai aussi essayé d'ajouter new Phaser.Geom.Rectangleà la fonction interactive en tant que telle

.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.image.width, this.image.height), Phaser.Geom.Rectangle.Contains)

mais la zone cliquable devient le coin inférieur droit du bouton; alors qu'avec

.setInteractive(new Phaser.Geom.Rectangle((this.image.width / 2) * -1, (this.image.height / 2) * -1, this.image.width, this.image.height), Phaser.Geom.Rectangle.Contains)

la zone cliquable devient la partie supérieure gauche du bouton;

Dois-je rendre compte de l'échelle moi-même ? comme

.setInteractive(new Phaser.Geom.Rectangle((this.image.width / 2) * -1, (this.image.height / 2) * -1, this.image.width * 2, this.image.height * 2), Phaser.Geom.Rectangle.Contains)

Cela fonctionne réellement

Je ne comprends pas pourquoi j'ai besoin de redimensionner l'image lorsque je prends la largeur et la hauteur de l'image pour la largeur et la hauteur du conteneur.

Est-ce que je manque quelque chose?

Solution du problème

Vous avez raison heightet widthcela ne fonctionnera pas (ils conservent la taille d'origine), mais vous pouvez simplement utiliser les propriétés displayWidthet displayHeight, ces propriétés vous donnent la bonne taille (surtout après la mise à l'échelle), le calcul est géré par phaser.

Voici une petite démo illustrant ceci:

let Scene = {
 preload(){
 this.load.image('ship', 'https://labs.phaser.io/assets/sprites/ship.png');
 },
 create(){
 
 this.image = this.add.image(0, 0, 'ship').setOrigin(0.5)
 console.info(`before Scale width: ${this.image.width}, height: ${this.image.height}, displayWidth: ${this.image.displayWidth}, displayHeight:${this.image.displayHeight}` );
 this.image.setScale(2);
 console.info(`after Scale width: ${this.image.width}, height: ${this.image.height}, displayWidth: ${this.image.displayWidth}, displayHeight:${this.image.displayHeight}` );
 }
 }
 
 const config = {
 type: Phaser.AUTO,
 width:400,
 height:200,
 scene: Scene,
 banner: false
 }
 const game = new Phaser.Game(config)

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>