exponenta / pixi5-playables-boilerplate Goto Github PK

Hi,
I have been using this boilerplate for a while now, but I encountered this strange issue, which I do not know how to solve.
Just as a playable scene, I made a loading scene, where I would do all the preloading and show a progress bar with a logo. After preloading is finished, it would start the playable scene as before. Here is the code for preload method on the loading scene
loading/index.ts

async preload(loader?: PIXI.Loader): Promise<PIXI.Loader> {
    this.loader = loader; 
    
    console.log("before loading the logo");
    
    await new Promise((resolve, _) => {
      loader.add(
        'logo',
        'logo.png',
        () => {
          console.log("callback");
          resolve("done");
        }
      );
    });
    // logo is now loaded so I can init  this scene with a logo and use 
    // PIXI.Graphics to draw a progress bar
    console.log("logo is loaded, showing the scene");

    //@ts-ignore
    const assets = Object.values(Assets.Assets).map(asset => {
      asset.url = Assets.BaseDir + asset.url;
      return asset;
    });
    
    return loader.add(assets);
  }

src/index.ts

async load() {
   //@ifdef DEBUG
   this.loader = new PIXI.Loader(Config.BaseResDir);
   //@endif
   //@ifndef DEBUG
   this.loader = new InlineLoader(Resources);
   //@endif
    this._init = true;
    const loading = new Loading(this);
    const playable = new Playable(this);
    
    const start = performance.now();

    // calling loading scene to do the preloading stuff
    await loading.preload(this.loader);

    console.log("loading:", performance.now() - start);
    
    this.start(playable);
  }

What it does is it only prints "before loading the logo" to the log. It should print callback, resolve the promise, and print "logo is loaded, showing the scene". However, it does not happen. I also checked the resources.ts, and my b64 asset is there, so I don't know why it would not work. If what I have written is correct, then it is an issue with Pixi.Loader. Could you please help me make this work?

Hi,

I just cloned the repo in my local, did npm install, and then run gulp command from cmd. The server started with this log:

C:\Users\user\js\pixi5-playables-boilerplate>gulp
[17:43:02] Using gulpfile ~\Documents\projects\js\pixi5-playables-boilerplate\gulpfile.js
[17:43:02] Starting 'default'...
[17:43:02] Starting server...
[17:43:02] ==Watch==
[17:43:02] Dev app started http://localhost:8080
[17:43:02] LiveReload started on port 35729
[17:43:02] Running server

Then when I visited http://localhost:8080/templates/debug/index.html to see the live version of the project I get this errors.

How can I overcome this error? or maybe I opened the wrong file. I will appreciate it if you include some kind of Readme.md in the repo for beginners to right away start their projects and do not get stuck on this type of issue. Let me know if you need any additional info. Btw, here is the full screenshot.
If you want to contact me here is my discord username for quick response: "SenPie#1915"