Phaser 3无法从精灵表正确生成单帧精灵求助

核心问题 #

创建精灵时未指定初始帧，或精灵表加载配置未正确切割帧，导致Phaser无法识别单帧区域。

解决方案 #

1. 创建精灵时指定初始帧
   在physics.add.sprite的第四个参数传入目标帧的索引（从0开始计数，比如选第1帧填0，第4帧填3）：

   this.p1 = this.physics.add.sprite(1535, 730, 'PeefSide', 0);
   

   也可以创建后单独设置帧：

   this.p1.setFrame(0);
   

2. 修正精灵表加载配置
   确保frameWidth和frameHeight与精灵表的单帧实际尺寸完全一致。如果帧之间存在空白间隙，需添加spacing参数：

   this.load.spritesheet('PeefSide', "assets/PeefSide.png", {
       frameWidth: 50,
       frameHeight: 60,
       spacing: 2 // 替换为你实际的帧间隙像素值
   });
   

3. 验证帧加载状态
   在create函数中添加调试代码，确认Phaser正确识别了8帧：

   console.log(this.textures.get('PeefSide').frames.length);
   

   如果输出不是8，说明frameWidth/frameHeight设置错误，需重新核对单帧尺寸。

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