Phaser框架中Simple Tween无法移动对象，请求代码问题排查

核心错误点 #

• 回调上下文错误：pointerdown的普通函数回调中，this指向触发事件的文本对象（label）而非Main场景，导致无法正确访问tweens和zone1属性。
• 子场景相机未同步更新：即使移动了zone对象，子场景的相机位置不会自动跟随，必须主动调用refresh方法更新视口位置。
• Tween参数冗余：x:{from:0, to:100}会强制从0开始动画，若zone初始位置不是0会出现跳变，直接用to:100即可基于当前值过渡。

修正后的代码 #

document.body.style = 'margin:0;';

//---------------------------------------

class BaseClass extends Phaser.Scene  {
  constructor(key){
    super(key);
  }

  create(data){
    this.parent = data;
    this.cameras.main.setViewport(data.x, data.y, data.width, data.height);
    // 监听zone位置变化，自动刷新相机
    data.on('changedata', () => this.refresh());
  }

  refresh() {
    this.cameras.main.setPosition(this.parent.x, this.parent.y);
  }
}

//---------------------------------------

class Scene1 extends BaseClass {
  constructor(){
    super('scene1');
  }

  create(data){
    super.create(data);
    this.add.text(10, 10, 'Scene1').setOrigin(0).setDepth(100);
    this.add.rectangle(0, 0, this.parent.width, this.parent.height, 0xffff00).setOrigin(0);
  }
}

//---------------------------------------

class Scene2 extends BaseClass {
  constructor(){
    super('scene2')
  }

  create(data){
    super.create(data);
    this.add.text(10, 10, 'Scene2').setOrigin(0).setDepth(100);
    this.add.rectangle(0, 0, this.parent.width, this.parent.height, 0x555555).setOrigin(0);
  }
}

//---------------------------------------

class Main extends Phaser.Scene {

  zone1;
  zone2;

  constructor(){
    super('main')
  }

  create(){
    this.openScenes();

    // click to move all
    this.label = this.add.text(10, 10, 'MOVE ALL').setOrigin(0).setDepth(110).setInteractive();
    // 箭头函数绑定上下文，确保this指向Main场景
    this.label.on('pointerdown', () => {
      console.log('MOVE ALL');
      this.tweens.add({
        targets    : this.zone1, // 访问场景的zone1属性
        x          : 100, // 基于当前位置平滑过渡到目标值
        duration   : 1000,
        onComplete : () => console.log('onComplete')
      });
    });
  }

  openScenes(){
    let layout = ['scene1', 'scene2'];
    let roomWidth = config.width/2;
    let roomHeight = config.height/2;
    for (let idx = 0; idx < layout.length; idx++){
      let room = this.add.zone(idx * roomWidth, 50, roomWidth, roomHeight).setOrigin(0);
      this.scene.run(layout[idx], room);
      this['zone'+(idx+1)] = room;
    }
  }
}

//---------------------------------------

var config = {
  type   :Phaser.AUTO,
  width  :536,
  height :183,
  scene  :[Main, Scene1, Scene2],
  banner :false
};

new Phaser.Game(config);
console.clear();

关键修改说明 #

1. 上下文绑定：将pointerdown回调改为箭头函数，保证this始终指向Main场景，能正确访问tweens和zone1。
2. 自动同步相机：在BaseClass的create方法中给zone对象添加changedata事件监听，当zone位置变化时自动调用refresh更新相机，无需手动在tween中处理。
3. 简化Tween参数：去掉冗余的from配置，让动画基于zone当前位置平滑过渡到目标值。

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