loader

namespace loader

a small class to manage loading of stuff and manage resources

Summary


Properties from loader

Public Properties


crossOrigin settings.js:9
crossOrigin: string = undefined

string

crossOrigin attribute to configure the CORS requests for Image 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 in WebGL
 me.loader.crossOrigin = "anonymous";

 // set all ressources to be loaded
 me.loader.preload(game.resources, () => this.loaded());
See: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes
onError loader.js:48
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:24
onload: Function = undefined

Function

onload callback

// set a callback when everything is loaded
me.loader.onload = this.loaded.bind(this);
onProgress loader.js:35
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 settings.js:28
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: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

Public Methods


getBinary loader.js:489
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:504
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:520
getJSON(elt: string) → {object}

return the specified JSON Object

Parameters:
Name Type Description
elt string

name of the json file to load

Returns:
Type Description
object
getTMX loader.js:474
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

load loader.js:322
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..."};
// 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:231
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')" }
];
...
// 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:293
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 settings.js:54
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", binary", "image", "json", "js", "tmx", "tsx"

url string

<optional>

"./"

default base URL

setParser loader.js:198
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:365
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:422
unloadAll() → {}

unload all resources to free memory

me.loader.unloadAll();

Powered by webdoc!