(V3) Correct use of loader to setup textures and sprites

[systemx17]

var sprites = {};var loader = PIXI.loader.add('cloudstars',"imgs/cloudstars.jpg").load(function (loader, resources){ sprites.cloudstars = new PIXI.TilingSprite(resources.cloudstars.texture); }).add('star1',"imgs/star1.png").load(function (loader, resources){ sprites.star1 = new PIXI.TilingSprite(resources.star1.texture); }).add('star2',"imgs/star2.png").load(function (loader, resources){ sprites.star2 = new PIXI.TilingSprite(resources.star2.texture); }).add('star3',"imgs/star3.png").load(function (loader, resources){ sprites.star3 = new PIXI.TilingSprite(resources.star3.texture); }).add('star4',"imgs/star4.png").load(function (loader, resources){ sprites.star4 = new PIXI.TilingSprite(resources.star4.texture); }).add('ship',"imgs/ship_blue.png").load(function (loader, resources){ sprites.ship = new PIXI.Sprite(resources.ship.texture); }).add('shield_straight',"imgs/shield_straight.png").load(function (loader, resources){ sprites.shield_straight = new PIXI.Sprite(resources.shield_straight.texture); }).add('shield_edge',"imgs/shield_edge.png").load(function (loader, resources){ sprites.shield_edge = new PIXI.Sprite(resources.shield_edge.texture); }).add('title_ship',"imgs/title_ship.png").load(function (loader, resources){ sprites.title_ship = new PIXI.Sprite(resources.title_ship.texture); }).once('complete',function(){ var ready = setTimeout(accountSetup,3000); }).load() 

This seams to work but I figure it's not the correct way to do this as I kinda guessed my way through some of it. Will this cause a problem if I use this method to load all of my sprites into a standard javascript array for use later on? Talking about maybe 100 sprites including some tiling sprites for backgrounds. Also do I really need to use the "loader" in "function(loader, resources)" part? I don't seem to use it inside the function.

[xerver]

Generally, creation of game objects is just done in the load callback:
 

var sprites = {};var loader = PIXI.loader    .add('cloudstars',"imgs/cloudstars.jpg")    .add('star1',"imgs/star1.png")    .add('star2',"imgs/star2.png")    .add('star3',"imgs/star3.png")    .add('star4',"imgs/star4.png")    .add('ship',"imgs/ship_blue.png")    .add('shield_straight',"imgs/shield_straight.png")    .add('shield_edge',"imgs/shield_edge.png")    .add('title_ship',"imgs/title_ship.png")    .load(function (loader, resources) {        sprites.cloudstars = new PIXI.TilingSprite(resources.cloudstars.texture);        sprites.star1 = new PIXI.TilingSprite(resources.star1.texture);        sprites.star2 = new PIXI.TilingSprite(resources.star2.texture);        sprites.star3 = new PIXI.TilingSprite(resources.star3.texture);        sprites.star4 = new PIXI.TilingSprite(resources.star4.texture);        sprites.ship = new PIXI.Sprite(resources.ship.texture);        sprites.shield_straight = new PIXI.Sprite(resources.shield_straight.texture);        sprites.shield_edge = new PIXI.Sprite(resources.shield_edge.texture);        sprites.title_ship = new PIXI.Sprite(resources.title_ship.texture);        var ready = setTimeout(accountSetup,3000);    })

Are yo looking for something easier than that? The loader passes itself as the first param to the complete callback. It does this so you can bind the method to run under whatever context you want and no matter what you have access to the loader instance since it is passed in.

 

Remember the loader is generic and not specific to PIXI, so it covers a lot of use cases

[d13]

 

Remember the loader is generic and not specific to PIXI, so it covers a lot of use cases

Is it possible to use it to load sound and font files too?

[systemx17]

That's a lot cleaner code especially when it gets bigger I am sure I will appreciate it doing the way you have put it. I plan to run other functions after to load other media such as music and fonts. If say I wanted to include some sort of loading bar, would I be best off just incrementing the value of a variable called loadProgress or something like that? I understand that the larger images will take longer to load so this won't give an accurate "time till live" loading bar but that's not important to me. Just want to make the user feel like something is actually progressing. Any suggestions other than a += 1 value and a hard coded count of the number of images?

[xerver]

> Is it possible to use it to load sound and font files too?

 

You can load them as blobs (binary) but there is no special parsing for audio or font files. Feel free to write a middleware for it.

 

> If say I wanted to include some sort of loading bar...

 

Use the progress event:

PIXI.loader.on('progress', function (loader, loadedResource) {    console.log('Progress:', loader.progress + '%');});

[systemx17]

Getting this warning (not error) when using this code now.. do I just add the "extras." part in front?

 

The TilingSprite class has been moved to extras.TilingSprite, please use extras.TilingSprite from now on.

[xerver]

Yup

[d13]

@systemx17: This might be what you're looking for?

PIXI.loader  .add([    "images/one.png",    "images/two.png",    "images/three.png"  ])  .on("progress", loadProgressHandler)  .load(setup);function loadProgressHandler(loader, resource) {  //Display the file `url` currently being loaded  console.log("loading: " + resource.url);   //Display the precentage of files currently loaded  console.log("progress: " + loader.progress + "%");   //If you gave your files names with the `add` method, you can access  //them like this  //console.log("loading: " + resource.name);}function setup() {  console.log("All files loaded");}

Yay, Pixi's new loader is awesome 

[Wanderer777]

I really like the simplicity of the loader and to avoid code clustering I would like to use it to preload my sound files, too (I plan to use the Howler sound library for my game). How could this be done?

 

I just need to know if all sounds are loaded completely and ready to use, so the loader would do a good job here -but would howler be able to access them then?

 

Are assets loaded by the PIXI loader put to the browser's cache? If so, would I be able to load a sound file named "laser.wav", for example, and would Howler then be able to automatically grab the loaded sound from the browser's cache instead of loading a second instance?

[xerver]

I really like the simplicity of the loader and to avoid code clustering I would like to use it to preload my sound files, too (I plan to use the Howler sound library for my game). How could this be done?

 

I just need to know if all sounds are loaded completely and ready to use, so the loader would do a good job here -but would howler be able to access them then?

 

Are assets loaded by the PIXI loader put to the browser's cache? If so, would I be able to load a sound file named "laser.wav", for example, and would Howler then be able to automatically grab the loaded sound from the browser's cache instead of loading a second instance?

Yes it will go into the browser cache (depending on the headers from the server), but how to use it would be different based on the API of your lib and what API it uses underlying.

[Randore]

Hello,

Please help me with this loader thing.

1. I want the loader to load all assets while showing a progress bar

2. After loading all assets and 100% progress bar, I want to add game MainStage where game will be played.

Here is my code, I have tried so many things but both loader and cat image is visible on stage. Please help me to fix this, Thank you in advance.

 

window.onload = () => {

    const game = new PIXI.Application(),
        Container = PIXI.Container,
        loader = PIXI.loader,
        Texture = PIXI.Texture,
        TextureCache = PIXI.utils.TextureCache,
        resources = PIXI.loader.resources,
        Sprite = PIXI.Sprite;

    //Add application to DOM
    document.body.appendChild(game.view);

    let stage_1 = new Container(),
        stage_2 = new Container();


    loader
        .add('cat', 'sprites/cat.png')
        .add('dice_1', 'sprites/dice_01.png')
        .add('dice_2', 'sprites/dice_02.png')
        .add('dice_3', 'sprites/dice_03.png')
        .add('dice_4', 'sprites/dice_04.png')
        .add('dice_5', 'sprites/dice_05.png')
        .add('dice_6', 'sprites/dice_06.png')
        .add('dice_7', 'sprites/dice_07.png')
        .add('dice_8', 'sprites/dice_08.png')
        .add('dice_9', 'sprites/dice_09.png')
        .add('dice_10', 'sprites/dice_10.png')
        .load(loadProgress);

    loader.once('complete', mainStage);

    //Global variables used in functions
    let cat, progressBar, progWrapper, progWrapperTex, progressBarTex;

    progWrapperTex = Texture.fromImage('sprites/white-silloute.png');
    progressBarTex = Texture.fromImage('sprites/redbar.png');

    function loadProgress(loader, res) {

        progWrapper = new Sprite(progWrapperTex);
        progressBar = new Sprite(progressBarTex);

        progWrapper.x = (game.renderer.width / 2 - progWrapper.width / 2);
        progWrapper.y = (game.renderer.height / 2 - progWrapper.height / 2);

        progressBar.x = (game.renderer.width / 2 - progressBar.width / 2);
        progressBar.y = (game.renderer.height / 2 - progressBar.height / 2);

        stage_1.addChild(progWrapper);
        stage_1.addChild(progressBar);

        game.stage.addChild(stage_1);

        progressBar = Math.round(loader.progress);
        console.log("Loader:", res.name, "Progress:", Math.round(loader.progress));


    } //Loader


    function mainStage() {

        cat = new Sprite(resources.cat.texture);

        //Positions
        cat.x = game.screen.width / 2 - cat.width /2;
        cat.y = game.screen.height / 2 - cat.height /2;

        //Rotate around the center
        cat.anchor.set(0.5, 0.5);

        //Add cat to the scene
        stage_2.addChild(cat);
        game.stage.addChild(stage_2);

        //Listen for the frame updates
        game.ticker.add(function() {
            cat.rotate += 1;
        });

    }


}

 

[xerver]

The callback you pass into the .load() method is the function to call when loading *completes*.

You want:

loader
        .add('cat', 'sprites/cat.png')
        .add('dice_1', 'sprites/dice_01.png')
        .add('dice_2', 'sprites/dice_02.png')
        .add('dice_3', 'sprites/dice_03.png')
        .add('dice_4', 'sprites/dice_04.png')
        .add('dice_5', 'sprites/dice_05.png')
        .add('dice_6', 'sprites/dice_06.png')
        .add('dice_7', 'sprites/dice_07.png')
        .add('dice_8', 'sprites/dice_08.png')
        .add('dice_9', 'sprites/dice_09.png')
        .add('dice_10', 'sprites/dice_10.png')
        .on('progress', loadProgress)
        .load(mainStage);

Also move all your object creation out of the loadProgress function, or it will create them every time you load a resource, which you don't want. Just move it out of the function to just above it.