Loader is async, right? So not sure how you'd structure this

[NibblyPig]

If your game is in a JS file, and you do

var myGame = new CoolGame();

myGame.Init();

myGame.Start();

for example, then CoolGame does loader.add(...); a bunch of times, it's my understanding that it's asynchronous, hence the need to do .load to add a complete event.

In the code above though, I would not want my code to continue onto the next line and start the game before it had loaded.

So how can I make the loader block until it's done? It also makes for messy code:

function Init() {

    LoadTextures();

    PrepareSprites(); // Might error if textures not finished loading

    SetupGameMap();

}

would have to be
 

function Init() {

    LoadTextures();

}

function TexturesLoaded() { // Invoked with .load(fn) on the loader

    PrepareSprites();

    SetupGameMap(); // Doesn't really belong in this method

}

 

Perhaps I can do something like

 

while (!loader.Isfinished) { }

 

I'm not massively au fait with javascript so perhaps you are supposed to chain things by nesting them, but it seems wrong to me.

[ivan.popelyshev]

while (!loader.Isfinished) is a very bad idea, it blocks everything, including loader events. I think you have to read and learn about async stuff, lookup "async await" approach. Pixi doesnt have support of Promises but people make their wrappers for pixi loader that works with them.

[NibblyPig]

I understand how async await works but I don't see any way to implement it pixi, nothing comes up on google apart from people asking if it will ever support promises, to which the answer is apparently, no.

[xerver]

Callbacks.

var myGame = new CoolGame();

myGame.Init(function() {
    myGame.Start();
});

// ...

function Init(cb) {
    LoadTextures(function () {
        PrepareSprites(); // Might error if textures not finished loading

        SetupGameMap();

        cb();
    });
}

// ...

function LoadTextures(cb) {
    loader.add(...).load(cb);
}

 

[ivan.popelyshev]

1 hour ago, NibblyPig said:

I understand how async await works but I don't see any way to implement it pixi, nothing comes up on google apart from people asking if it will ever support promises, to which the answer is apparently, no.

If you know how to use "new Promise" , you can make wrappers. Please read https://promisesaplus.com/  .

Pixi is not a framework, its a basic lib for your own engine. We cant just tell people whether to use promises/async.js or whatever, we provide basic API, you can wrap it into something that suits your code style.

[NibblyPig]

Hmm thanks for your answer xerver but I think it makes the code very hard to read. The game map shouldn't be set up as part of LoadTextures() method, it violates the single responsibility principle. I guess there is not much choice though.

[ivan.popelyshev]

4 hours ago, NibblyPig said:

Hmm thanks for your answer xerver but I think it makes the code very hard to read. The game map shouldn't be set up as part of LoadTextures() method, it violates the single responsibility principle. I guess there is not much choice though.

If you want to setup a map before this thing loads, you can use fromImage to create texture before its loaded, embed json in your app, parse it with Spritesheet (there's that class in pixi).

I understand why do you need it, its valid  

[xerver]

> The game map shouldn't be set up as part of LoadTextures() method, it violates the single responsibility principle.

It isn't, it is part of the Init() method.

>  I guess there is not much choice though.

Of course there is. There is always choice. You could wrap it in a Promise API instead, or use a transpiler to convert async/await to callbacks, or use something like the async library to make calbacks easier to read. All of the "async" features in JavaScript are just sugar over callbacks, which is why the loader is callback-based because then you can do anything you want.

[jasonsturges]

@NibblyPig or for future reference, I imagine something like:

Create an async wrapper around the loader:

const loadTextures = async () => {
  return new Promise((resolve, reject) => {
    const loader = new PIXI.Loader();
    loader
      .add(name1, url1)
      .add(name2, url2)
      .load();

    loader.onComplete.add(() => {
      resolve();
    });

    loader.onError.add(() => {
      reject();
    });
  });
};

Then, call it as follows:

await loadTextures()

That will block while waiting for the loader to complete, or error.

 

Edited February 27, 2022 by jasonsturges