loader

namespace loader

string

a small class to manage loading of stuff and manage resources

Summary


Properties from loader

Public Properties


crossOrigin loader.js:27
crossOrigin: string = undefined

string

crossOrigin attribute to configure the CORS requests for Image and Video data element. By default (that is, when the attribute is not specified), CORS is not used at all. The "anonymous" keyword means that there will be no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication as described in the Terminology section of the CORS specification.

  // allow for cross-origin texture loading
 me.loader.crossOrigin = "anonymous";

 // set all ressources to be loaded
 me.loader.preload(game.resources, () => this.loaded());
See:
onError loader.js:159
onError: Function = undefined

Function

onError callback
each time a resource loading is failed, the loader will fire the specified function giving the actual asset as argument.

// set a callback for error notification
me.loader.onError = this.loaderError.bind(this);
onload loader.js:135
onload: Function = undefined

Function

onload callback

// set a callback when everything is loaded
me.loader.onload = this.loaded.bind(this);
onProgress loader.js:146
onProgress: Function = undefined

Function

onProgress callback
each time a resource is loaded, the loader will fire the specified function, giving the actual progress [0 ... 1], as argument, and an object describing the resource loaded

// set a callback for progress notification
me.loader.onProgress = this.updateProgress.bind(this);
withCredentials loader.js:47
withCredentials: boolean = false

boolean

indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. Setting withCredentials has no effect on same-site requests.

  // enable withCredentials
 me.loader.withCredentials = true;

 // set all ressources to be loaded
 me.loader.preload(game.resources, () => this.loaded());
See:

Public Methods


getBinary loader.js:637
getBinary(elt: string) → {object}

return the specified Binary object

Parameters:
Name Type Description
elt string

name of the binary object ("ymTrack");

Returns:
Type Description
object

requested element or null if not found

getImage loader.js:652
getImage(image: string) → {HTMLImageElement}

return the specified Image Object

Parameters:
Name Type Description
image string

name of the Image element ("tileset-platformer");

Returns:
Type Description
HTMLImageElement

requested element or null if not found

getJSON loader.js:668
getJSON(elt: string) → {JSON}

return the specified JSON Object

Parameters:
Name Type Description
elt string

name of the json file

Returns:
Type Description
JSON
getTMX loader.js:622
getTMX(elt: string) → {object}

return the specified TMX/TSX object

Parameters:
Name Type Description
elt string

name of the tmx/tsx element ("map1");

Returns:
Type Description
object

requested element or null if not found

getVideo loader.js:683
getVideo(elt: string) → {HTMLVideoElement}

return the specified Video Object

Parameters:
Name Type Description
elt string

name of the video file

Returns:
Type Description
HTMLVideoElement
load loader.js:442
load(asset: loader.Asset, onload: Function, onerror: Function) → {number}

Load a single asset (to be used if you need to load additional asset(s) during the game)

// load an image asset
me.loader.load({name: "avatar",  type:"image",  src: "data/avatar.png"}, () => this.onload(), () => this.onerror());
// load a base64 image asset
 me.loader.load({name: "avatar", type:"image", src: "data:image/png;base64,iVBORw0KAAAQAAAAEACA..."};
 // load a base64 video asset
 me.loader.load({
    name: "avatar",
    type:"video",
    src: "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZ.."
 };
// start loading music
me.loader.load({
    name   : "bgmusic",
    type   : "audio",
    src    : "data/audio/"
}, function () {
    me.audio.play("bgmusic");
});
Parameters:
Name Type Attributes Description
asset loader.Asset
onload Function

<optional>

function to be called when the asset is loaded

onerror Function

<optional>

function to be called in case of error

Returns:
Type Description
number

the amount of corresponding resource to be preloaded

preload loader.js:347
preload(assets: Array<loader.Asset>, onloadcb: Function, switchToLoadState: boolean) → {}

set all the specified game assets to be preloaded.

game.assets = [
  // PNG tileset
  {name: "tileset-platformer", type: "image",  src: "data/map/tileset.png"},
  // PNG packed texture
  {name: "texture", type:"image", src: "data/gfx/texture.png"}
  // PNG base64 encoded image
  {name: "texture", type:"image", src: "data:image/png;base64,iVBORw0KAAAQAAAAEACA..."}
  // TSX file
  {name: "meta_tiles", type: "tsx", src: "data/map/meta_tiles.tsx"},
  // TMX level (XML & JSON)
  {name: "map1", type: "tmx", src: "data/map/map1.json"},
  {name: "map2", type: "tmx", src: "data/map/map2.tmx"},
  {name: "map3", type: "tmx", format: "json", data: {"height":15,"layers":[...],"tilewidth":32,"version":1,"width":20}},
  {name: "map4", type: "tmx", format: "xml", data: {xml representation of tmx}},
  // audio resources
  {name: "bgmusic", type: "audio",  src: "data/audio/"},
  {name: "cling",   type: "audio",  src: "data/audio/"},
  // base64 encoded audio resources
  {name: "band",   type: "audio",  src: "data:audio/wav;base64,..."},
  // binary file
  {name: "ymTrack", type: "binary", src: "data/audio/main.ym"},
  // JSON file (used for texturePacker)
  {name: "texture", type: "json", src: "data/gfx/texture.json"},
  // JavaScript file
  {name: "plugin", type: "js", src: "data/js/plugin.js"},
  // Font Face
  {name: "'kenpixel'", type: "fontface",  src: "url('data/font/kenvector_future.woff2')"},
  // video resources
  {name: "intro", type: "video",  src: "data/video/"},
  // base64 encoded video asset
  me.loader.load({name: "avatar", type:"video", src: "data:video/mp4;base64,AAAAIGZ0eXBpc29tAAACAGlzb21pc28yYXZjMW1wNDEAAAAIZnJlZ..."};
];
...
// set all resources to be loaded
me.loader.preload(game.assets, () => this.loaded());
Parameters:
Name Type Attributes Default Description
assets Array<loader.Asset>

list of assets to load

onloadcb Function

<optional>

loader.onload

function to be called when all resources are loaded

switchToLoadState boolean

<optional>

true

automatically switch to the loading screen

reload loader.js:413
reload(src: string) → {}

retry loading assets after a loading failure

event.on(
    event.LOADER_ERROR,
    (res) => {
        // custom function
        showErrorNotification({
            text: `Error during loading content: ${res.name}`,
            done: loader.reload(res.src);
        })
    }
);
Parameters:
Name Type Description
src string

src of asset to reload

setBaseURL loader.js:103
setBaseURL(type: string, url: string) → {}

change the default baseURL for the given asset type.
(this will prepend the asset URL and must finish with a '/')

// change the base URL relative address for audio assets
me.loader.setBaseURL("audio", "data/audio/");
// change the base URL absolute address for all object types
me.loader.setBaseURL("*", "http://myurl.com/")
Parameters:
Name Type Attributes Default Description
type string

"*", "audio", "video", "binary", "image", "json", "js", "tmx", "tsx"

url string

<optional>

"./"

default base URL

setOptions loader.js:74
setOptions(options: Object) → {}

Sets the options for the loader.

 // Set the crossOrigin attribute to "anonymous"
 me.loader.setOptions({ crossOrigin: "anonymous" });

 // Enable the nocache mechanism
 me.loader.setOptions({ nocache: true });

 // Enable withCredentials
 me.loader.setOptions({ withCredentials: true });
Parameters:
Name Type Attributes Description
options Object

The options to set.

options.crossOrigin string

<optional>

The crossOrigin attribute to configure the CORS requests for Image and Video data element.

options.nocache boolean

<optional>

Enable or disable the nocache mechanism.

options.withCredentials boolean

<optional>

Indicates whether or not cross-site Access-Control requests should be made using credentials.

setParser loader.js:314
setParser(type: string, parserFn: Function) → {}

specify a parser/preload function for the given asset type

// specify a custom function for "abc" format
function customAbcParser(data, onload, onerror) {
   // preload and do something with the data
   let parsedData = doSomething(data);
   // when done, call the onload callback with the parsed data
   onload(parsedData);
   // in case of error, call the onerror callback
   onerror();
   // return the amount of asset parsed
   return 1
}
// set the parser for the custom format
loader.setParser("abc", customAbcParser);
Parameters:
Name Type Description
type string

asset type

parserFn Function

parser function

See: loader.Asset.type
unload loader.js:495
unload(asset: loader.Asset) → {boolean}

unload the specified asset to free memory

me.loader.unload({name: "avatar",  type:"image"});
Parameters:
Name Type Description
asset loader.Asset
Returns:
Type Description
boolean

true if unloaded

unloadAll loader.js:560
unloadAll() → {}

unload all resources to free memory

me.loader.unloadAll();

Powered by webdoc!