Combine diffrent loaders

[Alex4co]

Hello everyone! 

Guys, tell me please :  if we have custom loader ( not pixi ) for load resources such as png/jpg - how to combine them with pixi loader? For example custom loader load /assets/ image folder before game starts, then in pixi we want to use this resources such as Texture.from('assets/img/...")  or loader.add("someImage", "/assets/img/someImage.png") - is it possible ??? Question about caching, we dont want to load the same image twice in our custom loader, and then in pixi . Maybe if after loading resources in our custom loader and then 

this._loader.add("bg", "assets/bg.png");

in Pixi - the file will not load twice and getting it from cache???

Sorry for my bad english.  

[jonforum]

hum, this can maybe give you some inspiration.
When i boot my app.exe it load from node first.

this is not finish yet but here how it can look.

window.onload = function() {
    //#STEP1: CHARGER LES LIBS
    const jsLibs = [
        //#PIXI
        "pixi",
        "pixi-filters",
        "pixi-layers",
        "pixi-lights",
        "pixi-spine",
       // "pixi-heaven",
        "pixi-projection-spine",
        "pixi-sound",
        "pixi-zero",//custom
        //#TWEEN
        "TweenMax",
        "TimelineLite",
        "EasePack",
        //#OTHER
        "papaparse",
        "polyfill",//custom
    ];
    //#STEP2: CHARGER LE LOADER
    const jsLoader = [
        'engine/loaders',
    ];
    //#STEP3: PRELOAD DATA

    //#STEP4: CHARGER LES CORE
    const jsCores = [//TODO:
        //#UTILITY
        "utility/ECC",
        //#ENGINE
        "engine/app",
        "engine/stage",
        "engine/displayGroups",
        "engine/camera",
        "engine/systems",
        "engine/battlers",
        "engine/players",
        //#GAME OBJETS
        "obj/objs",

        //#SCENE
        "scene/scene_base",
        "scene/scene_Loader",
        "scene/scene_Boot",
        "scene/scene_IntroVideo",
        "scene/scene_Title",
        "scene/scene_Map1",

        //#UTILITY
        "utility/pixiMapEditor",
        

    ];
    //#STEP5:Trouver et scanner tous les DATA2, creer une list dans loader
    //#STEP6:$app.initialize()

    let step = 0;
    function nextStep() {
        switch (++step) {
            case 1: loadJs(jsLibs,'libs'); break;
            case 2: loadJs(jsLoader,'core'); break;
            case 3: $loader.mainLoad(nextStep); break;
            case 4: loadJs(jsCores,'core'); break;
            default:$app.initialize();break;
        }
    };
    function loadJs(links,folder) {
        const head = document.getElementsByTagName('head')[0];
        let length = links.length;
        links.forEach(name => {
            const script = document.createElement('script');
            script.async = false;
            script.src = `js/${folder}/${name}.js`;
            head.appendChild(script);
            script.onload = function() {
                if(!--length){nextStep()};
            };
        });
    };
    nextStep();

 

i cool way to scan all folder from you projet and create link files for after use it in pixijs

        /** SCAN ALL RESSOURCE IN DATA2 and create link */
        const scanDATA2 = () => {
            const recursive = require('recursive-readdir');
            function ignoreFunc(file, stats) {
                const isDirectory = stats.isDirectory();
                if(stats.isDirectory()){
                    return file.contains('SOURCE') || file.contains('source');
                }else
                if(stats.isFile()){
                    return !file.contains('.json') && !file.contains('.webm');
                };
              };
              recursive("data2", ["secure.dll", ignoreFunc], (err, files) => {
                files.forEach(PATH => {
                    const split = PATH.replace('.','\\').split('\\');
                    const name = split[split.length-2];
                    if(name.contains('-')){ // isMultipack
                        const _name = name.split('-')[0]; // nom sans -0
                        !this.LINKS[_name] && (this.LINKS[_name] = []);
                        this.LINKS[_name].push( {name:name,path:PATH.replace(/\\/g,"/")} );
                    }else{
                        this.LINKS[name] = PATH.replace(/\\/g,"/");
                    };
                });
                return nextStep();
              });
        };

you will get all your project files links like that's for easily use pixiloader !

 

note :

check for `

loader.onComplete.add((loader, res) => { callback() });

when loader finish you can call a callback and start a new loader with new stuff.