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

[Vizions]

I am trying to do something very simple with PIXI and Typescript. I decided to switch to using texture packer from loading individual png files and ran into this issue. The issue is when trying to access the texture that is loaded through the spritesheet json file I get a promise error. The code is very simple and I have tried various ways of doing this with no luck. This example is the simplest and uses the example from CodeAndWeb (Texture packer devs site) but in an attempt to translate it to typescript and separated the functionality a bit. Any advice is highly appreciated. Thanks.

 

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 looks like this

{"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$"
}
}

 

Code Sandbox link 
https://codesandbox.io/s/empty-hooks-9g8j6?file=/src/index.ts

Edited September 2, 2021 by Vizions

[ivan.popelyshev]

Post it on jsfiddle, codesandbox or something else please? That way people will spend less time setting up your code, and you'll have bigger probability that someone helps

[Vizions]

Sorry for the delay in response, here is the code sanbox

https://codesandbox.io/s/empty-hooks-9g8j6?file=/src/index.ts

 

 

[ivan.popelyshev]

Here, I cloned it: https://codesandbox.io/s/pedantic-surf-0kdci

btw, forgot to say that for codesandbox, options {crossOrigin: '*'} is required

OK, so main problem is that you used the wrong key. This works fine:

let sheet = PIXI.Loader.shared.resources["sheetData"];

Things are much easier when you use debugger. All you had to do is to place a breakpoint there and look in "resources" object.

[Vizions]

Thank you @ivan.popelyshev your help is much appreciated. 

[Vizions]

Hello,

So the example provide from Ivan and one that I did myself works great in code sandbox. However, when this is in TS files with the exact code I am still getting "Uncaught (in promise)" Event error. It does not load the textures. I am so boggled with this one. With the limited time I've had and banging my head on stuff I just got to the point where I figure I would just tack it on to this thread. 
Here is the project 
https://github.com/420visions/spritesheet_issue
The only node modules I have added are Parcel and Pixi.

I really do not understand why this is not working. If anybody could please take a look it will be so highly appreciated. 

npm run dev will run parcel and start the webservice. I am using VSCode so all I do after is press f5 key to launch the web application.

 

 

I feel like a total idiot with this one. I know it is extremely simple but I just cannot figure out why this is happening.