ImageResource.ts:182 未捕获（承诺），PIXI 和 Typescript 使用 pixi 和 texturepacker 没有纹理加载

Question

我正在尝试使用 PIXI 和 Typescript 做一些非常简单的事情。我决定切换到使用纹理打包器从加载单个 png 文件和运行到这个问题。问题是当尝试访问通过 spritesheet json 文件加载的纹理时，我收到了承诺错误。代码非常简单，我尝试了各种方法，但没有成功。这个例子是最简单的，它使用了来自 CodeAndWeb（Texture packer devs 站点）的例子，但试图将它运行slate 成 typescript 并稍微分离功能。非常感谢任何建议。谢谢

代码沙箱在这里： https://codesandbox.io/s/empty-hooks-9g8j6?file=/src/index.ts

import { Container, Sprite, Graphics, Texture, Spritesheet } from "pixi.js";
import * as PIXI from "pixi.js";


// This example is based on the following
// https://www.codeandweb.com/texturepacker/tutorials/how-to-create-sprite-sheets-and-animations-with-pixijs5

export class Game extends Container {
    
    static GAME_WIDTH = 320;
    static GAME_HEIGHT = 568;  

    private static _instance: Game;

    public app: PIXI.Application | undefined;


    constructor() {

        super();

        window.onload = (): void => {
            
            this.createRenderer();  
            this.addAssets();
            this.startLoadingAssets();
        };

        console.log('Game Constructed');
    }

    public static getInstance(): Game {

        if (!Game._instance) {
            Game._instance = new Game();
        }

        return Game._instance;
    }
    
    private addAssets(): void {
        
        PIXI.Loader.shared.add('game', '../assets/game.json');
        
        console.log('Assets added');
    }

    private startLoadingAssets(): void {        
        
        PIXI.Loader.shared.onComplete.add(() => { this.onAssetsLoaded(); });
        // PIXI.Loader.shared.onComplete.add(this.onAssetsLoaded);
        PIXI.Loader.shared.load();
        console.log('Loading assets');
        
    }   
     
    private onAssetsLoaded(): void {
        let sprite = new PIXI.Sprite(PIXI.Texture.from("backBoard.png"));

        // let sheet = PIXI.Loader.shared.resources["../assets/game.json"];
        // let sprite = new PIXI.Sprite(sheet.texture['backBoard,png']);

        // this.app?.stage.addChild(sprite);

        console.log('AssetsLoaded');
    }

    private createRenderer(): void {

        this.app = new PIXI.Application({
            backgroundColor: 0x001320,
        })

        document.body.appendChild(this.app.view);        
 
        console.log('Renderer Created');
    }

    public initialize(): void {


        console.log('Game initialized');
    }
    

}

json 看起来像这样

{"frames": {

"backBoard.png":
{
    "frame": {"x":1,"y":1,"w":318,"h":442},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":318,"h":442},
    "sourceSize": {"w":318,"h":442}
},
"buttonDisabled.png":
{
    "frame": {"x":321,"y":340,"w":30,"h":30},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30},
    "sourceSize": {"w":30,"h":30}
},
"buttonDown.png":
{
    "frame": {"x":353,"y":344,"w":30,"h":30},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30},
    "sourceSize": {"w":30,"h":30}
},
"buttonSmallDisabled.png":
{
    "frame": {"x":395,"y":224,"w":22,"h":22},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22},
    "sourceSize": {"w":22,"h":22}
},
"buttonSmallDown.png":
{
    "frame": {"x":395,"y":248,"w":22,"h":22},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22},
    "sourceSize": {"w":22,"h":22}
},
"buttonSmallUp.png":
{
    "frame": {"x":395,"y":272,"w":22,"h":22},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":22,"h":22},
    "sourceSize": {"w":22,"h":22}
},
"buttonUp.png":
{
    "frame": {"x":321,"y":372,"w":30,"h":30},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":30,"h":30},
    "sourceSize": {"w":30,"h":30}
},
"coin.png":
{
    "frame": {"x":368,"y":311,"w":31,"h":33},
    "rotated": true,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":31,"h":33},
    "sourceSize": {"w":31,"h":33}
},
"logo.png":
{
    "frame": {"x":321,"y":213,"w":125,"h":45},
    "rotated": true,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":125,"h":45},
    "sourceSize": {"w":125,"h":45}
},
"meter_big.png":
{
    "frame": {"x":321,"y":100,"w":92,"h":47},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":92,"h":47},
    "sourceSize": {"w":92,"h":47}
},
"meter_small.png":
{
    "frame": {"x":368,"y":213,"w":43,"h":25},
    "rotated": true,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":43,"h":25},
    "sourceSize": {"w":43,"h":25}
},
"meterDisplay.png":
{
    "frame": {"x":321,"y":149,"w":89,"h":49},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":89,"h":49},
    "sourceSize": {"w":89,"h":49}
},
"meterDisplayBig.png":
{
    "frame": {"x":321,"y":1,"w":97,"h":97},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":97,"h":97},
    "sourceSize": {"w":97,"h":97}
},
"meterMinus.png":
{
    "frame": {"x":368,"y":258,"w":25,"h":25},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":25,"h":25},
    "sourceSize": {"w":25,"h":25}
},
"meterPlus.png":
{
    "frame": {"x":368,"y":285,"w":24,"h":24},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":24,"h":24},
    "sourceSize": {"w":24,"h":24}
},
"peg.png":
{
    "frame": {"x":399,"y":200,"w":11,"h":22},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":11,"h":22},
    "sourceSize": {"w":11,"h":22}
},
"target_guide.png":
{
    "frame": {"x":321,"y":200,"w":11,"h":76},
    "rotated": true,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":11,"h":76},
    "sourceSize": {"w":11,"h":76}
}},
"meta": {
    "app": "https://www.codeandweb.com/texturepacker",
    "version": "1.0",
    "image": "cheenko.png",
    "format": "RGBA8888",
    "size": {"w":419,"h":444},
    "scale": "1",
    "smartupdate": "$TexturePacker:SmartUpdate:507f67780e7f85c65d491493063f25f9:181b9d624fffd3a88b16c67d21e19ad7:3dbd62212b1a89304e8d06008f40f33d$"
}
}

Answer 1

对于遇到此问题的任何人，我都遇到了完全相同的错误。我在 Whosebug 上很难找到解决方案，但最终我想通了。

首先，如果您想使用 public 服务器，则必须启用 COR。然后，它应该可以正常工作。

如果您想使用本地服务器上托管的图像（例如，使用 http-server 包到运行本地文件存储库），对于图像源，您必须使用完整的 link – 例如http://127.0.0.1:8001 而不是像 localhost:8001 这样的东西，这将不起作用。您还必须启用 CORs 选项（例如，对于 http-server，这意味着添加 --cors 标志）

ImageResource.ts:182 未捕获（承诺），PIXI 和 Typescript 使用 pixi 和 texturepacker 没有纹理加载

ImageResource.ts:182 Uncaught (in promise), with PIXI and Typescript no texture loads using pixi and texturepacker

typescript

pixi.js

texturepacker