如何在Phaser3+Ionic中可靠居中GameObject并解决尺寸为0问题

核心原因 #

在create()阶段，Phaser的缩放系统尚未和Ionic/Capacitor的WebView完成尺寸同步，导致this.scale.width等属性初始值为0。console.log偶尔生效是因为触发了浏览器的重绘/尺寸计算流程。

解决方案 #

1. 监听缩放尺寸就绪事件 #

通过监听resize事件，在游戏尺寸确定后再设置元素位置，这是最可靠的方式：

create() {
  // 先创建图像，临时位置不影响后续调整
  const myImage = this.add.image(0, 400, 'key');
  
  // 监听第一次尺寸变化，确保获取到正确值
  this.scale.once('resize', (gameSize) => {
    myImage.setPosition(gameSize.width / 2, 400);
  }, this);

  // 兼容已经获取到尺寸的情况
  if (this.scale.width > 0) {
    myImage.setPosition(this.scale.width / 2, 400);
  }
}

2. 使用相机内置的居中属性 #

直接利用Phaser相机的centerX/centerY，这些属性会自动随尺寸更新，无需手动计算：

create() {
  const image = this.add.image(0, 400, 'key');
  // 设置图像原点为中心（默认是左上角）
  image.setOrigin(0.5);
  // 绑定到相机中心X轴
  image.x = this.cameras.main.centerX;

  // 或者一步到位：
  // this.add.image(this.cameras.main.centerX, 400, 'key').setOrigin(0.5);
}

3. 强制初始尺寸配置 #

修改GameConfig，提前指定初始尺寸并优化缩放模式，同时确保Ionic容器有明确的宽高样式：

const config = {
  type: Phaser.AUTO,
  scale: {
    mode: Phaser.Scale.FIT, // 替代RESIZE，更适配移动端容器
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: window.innerWidth, // 用WebView初始宽高作为默认值
    height: window.innerHeight
  },
  parent: 'game',
  backgroundColor: '#e0e4f1',
  scene: GameScene
};

同时在Ionic页面的CSS中确保游戏容器占满空间：

#game {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

4. 延迟执行初始化逻辑 #

利用Phaser的延迟调用或浏览器帧回调，等待一帧后再读取尺寸：

create() {
  // 用Phaser内置的延迟调用，0毫秒即下一帧执行
  this.time.delayedCall(0, () => {
    this.add.image(this.scale.width / 2, 400, 'key');
  }, [], this);
}

内容的提问来源于stack exchange，提问作者Gui Imamura