Sign in to follow this  
Alex4co

Combine diffrent loaders

Recommended Posts

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.  

Share this post


Link to post
Share on other sites

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 !

JSiHGqyv_o.png

 

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.

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.