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

0%

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>
<span id="progressPercentage">0%</span>
<span id="progressFile"></span>

Json config (assets.json)

basic

{
  "type":{
    "folder": "folder_name",
    "files" : [
      "file1.txt",
      "file2.txt"
    ]
  },
}
{
  "shaders":{
    "folder": "shaders",
    "files"	: [
      "shader1.txt",
      "shader2.txt"
    ]
  }
}

advanced

{
  "type": {
    "folder": "folder_name",
    "files" : [
      {
        "file":"file1.png",
        "option1":{},
        "option2":[],
        "option3":"string",
        "option4":bool
      }
    ]
  }
}
{
  "sprites": {
    "folder": "sprites",
    "files" :[
      {
        "file":"sprite1.png",
        "texSize":[124,70],
        "frameSize":[62,70]
      }
    ]
  },
  "sounds": {
    "folder": "sounds",
    "files" : [
      {
        "file":"sound1.mp3",
        "volume":0.2,
        "loop":false,
        "type":"sfx"
      }
    ]
  }
}

Javascript (main.js)

instantiate a loader with your onProgress and onComplete callback functions.

var loader = ORBIS.create(updateProgress, animateProgress, complete, null, null);

Launches the asynchronous loading with the assets file and the assets folder in parameters.

loader.launch('../public/assets.json', '../public/assets/');

onProgress callback. With progress data and last file loaded in parameters.

function updateProgress( progress, file ) {
  document.getElementById('progressPercentage').innerHTML = progress + '%';
  document.getElementById('progressFile').innerHTML       = file.name;
}

onAnimate callback. Returns the loaded percentage at each frame.

function animateProgress(percentage){
  document.getElementById('progressBar').value = percentage;
}

onComplete callback. With every loaded assets in parameter.

function complete( assets ) {
  document.getElementById('progressFile').innerHTML = 'complete';
}

Once the loading is complete, you can call any asset in your program like this.

var shader1     = loader.getAsset('shader1.txt'); //get a loaded asset by name.
var spritesList = loader.getList('sprites'); //get a list of a specific type of assets.

Contact me

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