Jump to content

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


Recommended Posts

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 by Vizions
Link to post
Share on other sites

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.

Link to post
Share on other sites
  • 3 weeks later...

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.

 

image.png.a13c3d76774fe766d8e1b1882b2d9163.png

image.thumb.png.1fe60f33a14c5a0263fe2e3c9eeb603d.png

 

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. 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...