loader
namespace loader
a small class to manage loading of stuff and manage resources
Summary
Properties from loader
string |
|
Function |
|
Function |
|
Function |
|
boolean |
|
Public Properties
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());
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: Function = undefined
Function
onload callback
// set a callback when everything is loaded
me.loader.onload = this.loaded.bind(this);
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: 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());
Public Methods
getBinary(elt: string) → {object}
return the specified Binary object
Name | Type | Description |
---|---|---|
elt | string |
name of the binary object ("ymTrack"); |
Type | Description |
---|---|
object |
requested element or null if not found |
getImage(image: string) → {HTMLImageElement}
return the specified Image Object
Name | Type | Description |
---|---|---|
image | string |
name of the Image element ("tileset-platformer"); |
Type | Description |
---|---|
HTMLImageElement |
requested element or null if not found |
getJSON(elt: string) → {JSON}
return the specified JSON Object
Name | Type | Description |
---|---|---|
elt | string |
name of the json file |
Type | Description |
---|---|
JSON |
getTMX(elt: string) → {object}
return the specified TMX/TSX object
Name | Type | Description |
---|---|---|
elt | string |
name of the tmx/tsx element ("map1"); |
Type | Description |
---|---|
object |
requested element or null if not found |
getVideo(elt: string) → {HTMLVideoElement}
return the specified Video Object
Name | Type | Description |
---|---|---|
elt | string |
name of the video file |
Type | Description |
---|---|
HTMLVideoElement |
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");
});
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 |
Type | Description |
---|---|
number |
the amount of corresponding resource to be preloaded |
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());
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(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);
})
}
);
Name | Type | Description |
---|---|---|
src | string |
src of asset to reload |
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/")
Name | Type | Attributes | Default | Description |
---|---|---|---|---|
type | string |
"*", "audio", "video", "binary", "image", "json", "js", "tmx", "tsx" |
||
url | string |
<optional> |
"./" |
default base URL |
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);
Name | Type | Description |
---|---|---|
type | string |
asset type |
parserFn | Function |
parser function |
unload(asset: loader.Asset) → {boolean}
unload the specified asset to free memory
me.loader.unload({name: "avatar", type:"image"});
Name | Type | Description |
---|---|---|
asset | loader.Asset |
Type | Description |
---|---|
boolean |
true if unloaded |