Jump to content

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


systemx17
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 + '%');});
Link to comment
Share on other sites

  • 4 weeks later...

@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  :)

Link to comment
Share on other sites

  • 3 months later...

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

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;
        });

    }


}

 

Link to comment
Share on other sites

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.

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...