PhaserJS分层角色动画问题：眼睛图层在动画时消失

问题描述 #

我正在尝试用两张精灵表制作可自定义外观的玩家角色：一张作为角色基础精灵表，另一张为可更换的眼睛精灵表。我的实现步骤如下：

• 加载游戏、精灵表及动画数据
• 利用RenderTexture从已加载资源创建初始纹理
• 将新纹理保存到纹理管理器
• 传入创建好的纹理生成Arcade物理精灵，并基于新纹理制作动画
• 将新精灵添加到场景并关联逻辑

目前初始加载时能正确显示基础精灵和蓝色眼睛图层，但角色移动时，动画仅播放基础角色图层，眼睛图层消失。我需要让眼睛图层在动画播放过程中始终保持可见，但不清楚问题出在哪里。

预期效果：使用合成后的新纹理播放动画，自定义眼睛图层全程可见
实际效果：播放动画时仅显示基础精灵动画，眼睛图层消失

问题根源 #

你当前的实现是先合成基础+眼睛的纹理，再基于这个合成纹理创建动画，但Phaser的动画系统是直接读取原始精灵表的帧数据——当播放动画时，会直接替换精灵的纹理帧为基础精灵表的单帧，覆盖了你之前合成的纹理。

修复方案 #

方案一：多精灵嵌套（推荐） #

不要将眼睛合成到基础纹理中，而是采用子精灵嵌套的方式，让眼睛跟随基础角色同步运动：

// 场景create方法中
// 1. 创建基础角色精灵，负责播放动画
this.player = this.physics.add.sprite(100, 100, 'playerBase');
// 2. 创建眼睛精灵并设置为基础角色的子精灵
this.eyes = this.add.sprite(12, 8, 'eyes', 'blue_eye'); // 调整坐标匹配基础角色的眼睛位置
this.eyes.setOrigin(0.5);
this.player.add(this.eyes);
// 3. 给基础角色创建动画（逻辑不变）
this.anims.create({
    key: 'walk',
    frames: this.anims.generateFrameNumbers('playerBase', { start: 0, end: 3 }),
    frameRate: 10,
    repeat: -1
});

// 移动逻辑中仅控制基础角色的动画
if (cursors.left.isDown || cursors.right.isDown) {
    this.player.anims.play('walk', true);
} else {
    this.player.anims.stop();
}

这种方式实现简单，性能更优，还能随时更换眼睛精灵的帧来实现自定义效果。

方案二：预生成所有合成动画帧 #

如果必须使用RenderTexture合成纹理的方式，需要为动画的每一帧都单独合成纹理：

// 资源加载完成后预生成合成帧
const baseFrames = this.anims.generateFrameNumbers('playerBase', { start: 0, end: 3 });
const compositeFrames = [];
const rt = this.make.renderTexture({ width: 32, height: 32 }, true);

baseFrames.forEach(frame => {
    // 清空渲染纹理
    rt.clear();
    // 绘制当前基础帧
    rt.draw('playerBase', frame.frame.name);
    // 绘制眼睛
    rt.draw('eyes', 'blue_eye');
    // 保存合成后的纹理到纹理管理器
    const textureKey = `composite_frame_${frame.index}`;
    this.textures.addImage(textureKey, rt.canvas);
    compositeFrames.push({ key: textureKey });
});

// 使用合成帧创建动画
this.anims.create({
    key: 'walk',
    frames: compositeFrames,
    frameRate: 10,
    repeat: -1
});

// 创建精灵时使用第一帧合成纹理
this.player = this.physics.add.sprite(100, 100, 'composite_frame_0');

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