resources

MelonJS handles resources such as images, and map data by storing it in a single hash. You can see an example from our boilerplate:

game.resources = [

  /* Graphics.
   * @example
   * {name: "example", type:"image", src: "data/img/example.png"},
   */

  /* Atlases
   * @example
   * {name: "example_tps", type: "tps", src: "data/img/example_tps.json"},
   */

  /* Maps.
   * @example
   * {name: "example01", type: "tmx", src: "data/map/example01.tmx"},
   * {name: "example01", type: "tmx", src: "data/map/example01.json"},
    */

  /* Background music.
   * @example
   * {name: "example_bgm", type: "audio", src: "data/bgm/", channel : 1},
   */

  /* Sound effects.
   * @example
   * {name: "example_sfx", type: "audio", src: "data/sfx/", channel : 2}
   */
];

To make it easy for you on handling your resources, melonJS allows you to load them all at once. This is done by first setting your callback function:

me.loader.onload = function() {
  // code
}

Then telling melon to load the resources:

me.loader.preload(game.resources);
// display the loading screen
me.state.change(me.state.LOADING);

Once the loading screen finishes, all your resources will be loaded. MelonJS uses AJAX requests to grab the file data, and will then parse the data. MelonJS will parse and load the data differently depending on the type specified.

Resource Types

The types currently supported are:

• binary
• image
• json
• tmx
• tsx
• xml

binary This can be used to load all other sorts of data. If you need to even just load a text file, it's a option to go.

image This loads all different image types that you will use for your sprites. Note that image type should be used even when it's a packed texture. Ensure that the file you reference here is of a proper image mime type.

json Simple loads and parses a json file. This format should be used for loading the Texture Packer atlas file, or any other supported sprite sheet atlas.

tmx & tsx This is to load the Tiled map file. You can also save the TMX file as JSON instead, however be sure to still use this file type.

xml Similar to the JSON type, this can be used to load an XML data file.

Load Resources Later

If you need to load a resource after the fact, you can do so by using the same hash that you would in the resources.js file. For example:

me.loader.load({name: 'workstation', type: 'image', src: 'data/img/workstation.jpg'}, callback, errorcallback);

Much like the example there, you simply use the same options. Pass a callback to execute when the loading is done, and optionally provide a callback if the resource fails to load.