容器的 Phaser 3 交互式 hitarea

Question

我有一个包含图像和一些文本的容器；我们正面临容器的交互式 hitarea 问题

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

在上面的例子中，按钮的交互部分位于中间（可能是由于图像的比例？

我也试过将 new Phaser.Geom.Rectangle 添加到交互功能中

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

但是可点击区域变成了按钮的右下角； wheras

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

可点击区域变为按钮的左上部分；

我需要自己计算秤吗？比如

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

这确实有效

我很困惑为什么我在为容器宽度和高度获取图像宽度和高度时需要再次缩放图像。

我是不是漏掉了什么？

Answer 1

你是对的，height 和 width 不起作用 （它们保持原始大小），但你可以简单地使用属性 displayWidth 和 displayHeight，此属性为您提供正确的大小 （尤其是缩放后），计算由相位器处理。

这里有一个小演示：

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>

容器的 Phaser 3 交互式 hitarea

Phaser 3 interactive hitarea of a container

phaser-framework