Phaser 3中动画首帧未翻转的技术问题求助

问题根源 #

调用play()播放动画时，Phaser会重置精灵的flipX/flipY属性为动画创建时的默认状态，后续直接设置回第一帧时，翻转配置不会自动恢复。

解决方案 #

方案1：设置帧后重新应用翻转

在将精灵帧重置为第一帧后，再次设置flipX属性，确保翻转状态生效：

// 初始设置翻转
BaseScene.ball.flipX = targetObject.info.index % 2 === 0;   

// 播放动画
BaseScene.ball.play(this.ballRotationAnimation);

// 停止动画
BaseScene.ball.stop();

// 重置到第一帧
BaseScene.ball.anims.setCurrentFrame(BaseScene.ball.anims.currentAnim.frames[0]);

// 重新应用翻转设置
BaseScene.ball.flipX = targetObject.info.index % 2 === 0;

方案2：播放动画时传入翻转配置

播放动画时通过配置参数传递当前的flipX状态，让动画继承该属性，避免重置：

// 初始设置翻转
BaseScene.ball.flipX = targetObject.info.index % 2 === 0;   

// 播放动画时指定翻转状态
BaseScene.ball.play({
  key: this.ballRotationAnimation,
  flipX: BaseScene.ball.flipX
});

// 停止动画
BaseScene.ball.stop();

// 重置到第一帧，翻转状态已被保留
BaseScene.ball.anims.setCurrentFrame(BaseScene.ball.anims.currentAnim.frames[0]);

补充说明 #

如果希望动画全程保持固定翻转状态，也可以在创建动画时为每个帧指定flipX：

this.anims.create({
  key: 'ball',
  frames: [
    { key: 'ball1', flipX: true }, // 根据需求设置固定翻转
    { key: 'ball2', flipX: true },
    { key: 'ball3', flipX: true },
    { key: 'ball4', flipX: true },
    { key: 'ball5', flipX: true }
  ],
  frameRate: 10, 
  repeat: -1 
});

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