Jump to content

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.  

Link to comment
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() {
    const jsLibs = [
       // "pixi-heaven",
    const jsLoader = [

    const jsCores = [//TODO:
        //#GAME OBJETS



    //#STEP5:Trouver et scanner tous les DATA2, creer une list dans loader

    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;
    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`;
            script.onload = function() {


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();
                    return file.contains('SOURCE') || file.contains('source');
                    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,"/")} );
                        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.

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.

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.


  • Recently Browsing   0 members

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