Phaser容器移动异常：容器位置变更但内部对象未移动

问题核心原因 #

你创建的交互矩形是直接绑定到场景的（通过this.scene.add.rectangle），并未加入容器的子对象集合。Phaser的Container仅对通过this.add()方法添加的子元素，才会同步自身的位置、缩放等变换。

修正方案 #

1. 子对象脱离场景直接创建：改用new Phaser.GameObjects.Rectangle()生成矩形，避免自动添加到场景。
2. 将子对象纳入容器管理：通过this.add()把矩形添加到容器的子列表中。
3. 定位容器初始位置：先将容器锚点定位到原矩形的全局坐标，再给矩形设置相对容器的局部坐标。
4. 修复补间的this指向：onUpdate使用箭头函数，确保this指向容器而非补间实例。

修正后的完整代码 #

import Phaser from 'phaser';

export default class tabContainer extends Phaser.GameObjects.Container {

  container_hit_clicker;

  constructor(scene){
    // 容器初始位置对应原矩形的全局坐标
    const initX = scene.scale.width - 100;
    const initY = scene.scale.height - 100;
    super(scene, initX, initY);

    // 创建矩形（不自动添加到场景），设置相对容器的局部坐标(0,0)
    this.container_hit_clicker = new Phaser.GameObjects.Rectangle(scene, 0, 0, 50, 100, 0xff0000)
      .setOrigin(0)
      .setDepth(8);
    this.container_hit_clicker.setInteractive().on('pointerdown', () => {
      this.openContainer();
    });

    // 将矩形添加到容器
    this.add(this.container_hit_clicker);

    // 把容器自身添加到场景（关键步骤，否则容器不会渲染）
    scene.add.existing(this);
  }

  openContainer(){
    this.scene.tweens.add({
      targets  : this,
      x        : { from: this.x, to: 100 },
      ease     : 'Cubic.easeOut',
      duration : 500,
      onUpdate : () => { console.log(this.x); } // 箭头函数保证this指向容器
    });
  }

}

场景中添加容器的代码（无需修改） #

this.tabContainer = new tabContainer(this);

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