Orbis.js

An open source asynchronous assets loader written in Javascript.

About

The main purpose was to provide a simple way to load assets only when needed instead of loading everything when the main page loads.

  • Setup your json config file containing all your assets (images, textures, sprites, sounds, musics, texts, jsons),
  • launch the loader and use onProgress callback to set your own progress bar design,
  • wait for onComplete callback to start using your freshly loaded assets.

Check Example and Code section for more information on how to use Orbis.js. There is also a documentation if you need to go deeper.

You can help develop Orbis.js on Github.

Example

Please note the loader must be launched on a web server in order to avoid "Cross origin requests" errors.
Follow this link to learn more.

Code

HTML (index.html)

<button id="launcher" type="button" onclick="loadAssets()"> LOAD ASSETS </button>

<progress id="progressBar" value="0" max="100"></progress>
<input id='progressText' disabled> 

Json config (assets.json)

Structure

{
  "type":{
    "folder": "folder_name",
    "files" : [
      { "name":"file1.txt",
        "other_info":"other info"
      },
      { "name":"file2.txt",
        "other_info":"other info"
      }
    ]
  },
}

Example

{
  "audio":{
    "folder": "audio",
    "files"	: [
      { "name":"sound1.mp3",
        "volume":0.2,
        "loop":false,
        "type":"sfx"
      },
      { "name":"sound2.txt",
        "volume":0.6,
        "loop":true,
        "type":"music"
      }
    ]
  }
}

Javascript (main.js)

instantiate a loader with your onProgress and onComplete callback functions.

var loader = new Orbis.Loader();

Launches the asynchronous loading with the assets file path, the assets folder path and the progressBar and ProgressText CSS IDs in parameters.

loader.launch('../public/assets.json', '../public/assets/','progressBar', 'progressText').then(
  function(){
    console.log('complete');
    console.log(loader.getList('textures')); //get a list of a specific type of assets.
    console.log(loader.getAsset('texture1.png')); //get a loaded asset by name.
  }
);

Contact me

Feel free to ask me about my work, give me suggestions, or just to say hi.