如何在Phaser3游戏中添加Spine动画？加载报错求助

错误根源 #

你在create()方法中调用add.spine时传入的资源key错误，导致程序找不到已加载的Spine数据，从而触发skeletonData为null的报错。

修正步骤 #

1. 修正资源key参数
   加载Spine资源时你设置的key是'spineboy'，创建动画实例时直接使用这个key即可，不需要额外添加.spineboy后缀：

   this.spineBoy = this.add.spine(2400, 900, 'spineboy', 'idle', true);
   

2. 确认资源完整性与路径

   • 确保assets/images/目录下存在完整的三个Spine文件：spineboy-ess.json、spineboy.atlas以及对应的纹理图片（比如spineboy.png），.atlas文件会依赖纹理图，缺失会导致加载失败。
   • 检查setPath设置的路径是否准确，确认资源文件确实存放在该目录下。

3. 匹配Phaser与Spine版本
   保证你使用的Phaser版本和示例版本一致，不同版本的Phaser对Spine数据的兼容性不同，比如Spine 4.x的数据需要对应支持Spine 4的Phaser插件版本。

完整示例代码 #

class MyGameScene extends Phaser.Scene {
    preload() {
        this.load.setPath('assets/images/');
        // 加载Spine资源，key指定为'spineboy'
        this.load.spine('spineboy', 'spineboy-ess.json', 'spineboy.atlas');
    }

    create() {
        // 使用正确的key创建Spine动画实例
        this.spineBoy = this.add.spine(2400, 900, 'spineboy', 'idle', true);
        // 可选：根据需求调整动画缩放比例
        this.spineBoy.setScale(0.5);
    }
}

内容的提问来源于stack exchange，提问作者Nguyễn Hải Long