Best practice loading 80 images

[darkshifty]

I am fairly new at PIXI.js and i like it so far, however I can't really see how to load 80+ images in a best performant and clean way.
All the examples speak of the loader (which requires a huge 320 lines of image loading code) and a json file, but as far as i could find the json file only supports frames to be loaded (am i wrong?) 
 

app.loader
    .add({
        name: 'clouds',
        url: 'images/clouds.png'
    }, function () {})
    .add({
        name: 'background',
        url: 'images/landscape/wet.png'
    }, function () {})
    .add({
        name: 'delta',
        url: 'images/climate/wet/w-delta.png'
    }, function () {})
    .add({
        name: 'moorland',
        url: 'images/climate/wet/w-moorland.png'
    }, function () {})
    .on("progress", loadProgressHandler)
    .load(setup);

Please advise, is there any best practice in (pre) loading a big selection of images?

Thanks in advance!

[ivan.popelyshev]

Hello, and Welcome to the forums!

If you have many small images make an atlas with texturepacker/shoebox/"http://free-tex-packer.com/"

For your knowledge, pixi loader is actually https://github.com/englercj/resource-loader/tree/release/3.x and it has a queue with 5 parallel requests.

If you want better API, just pass an array to `add`.

 

 

 

[jonforum]

320 line of code ! hum..
This approach would more clear for your user case.
12 line only

        const list = [
            ['name','url'],
            ['name','url'],
            ['name','url'],
            ['name','url'],
            ['name','url'],
            ['name','url'],
        ]
        const loader = new PIXI.loaders.Loader();
        list.forEach(arr => loader.add(arr[0], arr[1]) ) // or .add(...arr)
        loader.load();
        loader.onError.add((loader, res)=>{
            //stuff
        })
        loader.onProgress.add((loader, res) => {
            //stuff
        })
        loader.onComplete.add((loader, res) => {
            //stuff
        })

And as ivan say to you , for the  best practice in (pre) loading a big selection of images

You will need a texture packer software.
You also have this one free
https://www.codeandweb.com/texturepacker
Work fine in pixijs, or if you use multipack or normals (premium feature) you will need to code your own manager in the pixi loader.

 

 

 

 

Edited February 28, 2020 by jonforum

[darkshifty]

Awesome suggestions, thank you very much. I was aware of the texturepacker but i'm not really looking forward to create them separately. ? I definitely will switch on a later stage