PIXI+TypeScript使用TexturePacker加载雪碧图报Uncaught (in promise)错误

• 核心错误1：你没有从加载完成的资源对象中获取雪碧图实例，直接调用Texture.from可能因为纹理还没注册到全局缓存中导致读取失败
• 核心错误2：加载完成回调没有接收resources参数，无法正确获取加载后的雪碧图资源
• 路径错误：需要确保两个路径正确：
  1. 加载game.json的路径../assets/game.json在运行时可正常访问
  2. game.json中meta.image指定的cheenko.png和game.json存放在同一目录下

代码修改示例 #

针对PIXI v6及更早版本（使用Loader API） #

首先修改startLoadingAssets方法，给回调传入资源参数：

private startLoadingAssets(): void {
    PIXI.Loader.shared.onComplete.add((loader, resources) => { 
        this.onAssetsLoaded(resources); 
    });
    PIXI.Loader.shared.load();
    console.log('Loading assets');
}

再修改onAssetsLoaded方法，从雪碧图实例中直接取纹理：

private onAssetsLoaded(resources: PIXI.IResourceDictionary): void {
    // 加载时指定的别名是game，直接取对应雪碧图实例
    const gameSpritesheet = resources.game.spritesheet;
    const backBoardTexture = gameSpritesheet.textures['backBoard.png'];
    const sprite = new PIXI.Sprite(backBoardTexture);
    // 把精灵添加到舞台，否则不会渲染
    this.app?.stage.addChild(sprite);
    console.log('AssetsLoaded');
}

针对PIXI v7及更高版本（Loader已废弃，使用Assets API） #

直接替换原有的资产加载逻辑即可：

// 移除原来的addAssets、startLoadingAssets方法，替换为异步加载逻辑
private async loadAssets(): Promise<void> {
    // 直接加载雪碧图JSON，PIXI会自动解析关联的png和纹理
    await PIXI.Assets.load('../assets/game.json');
    const backBoardTexture = PIXI.Texture.from('backBoard.png');
    const sprite = new PIXI.Sprite(backBoardTexture);
    this.app?.stage.addChild(sprite);
    console.log('AssetsLoaded');
}
// 在createRenderer后调用这个异步方法即可

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