Lwf Loader
LwfLoader Constructor
new LwfLoader()
Create a new instance of a lwf-loader. The loader will be initialized with default values.
new LwfLoader();
//all members will be initialized with default values
LwfLoader class members
initializeHooks : [], array containing hook functions to be bound.
requests : [], array containing load-ready LWF parameters
pausing: false, flag tells whether the animation is going on
loadingCount : 0, counter stores the loading progress
debug : false, turn this flag on to display debug information in the log
backgroundColor : null, color used to fill stage (ARGB integer)
resizeMode : 'fitForWidth', 'fitForWidth', 'fitForHeight' or 'fitToScreen'
fitToScreen : false, flag tells whether stretch LWF to match window size
displayDivId : null, ID of DOM element which contains LWF resource
stageWidth : 0, stage width
stageHeight : 0, stage height
screenWidth : 0, display area width, use screen size by default
screenHeight : 0, display area height, use screen size by default
stageHAlign : -1, -1: align-left, 0: align-center, 1: align-right
stageVAlign : -1, -1: align-top, 0: align-center, 1: align-bottom
useLargeImage : false, boolean tells whether use images with suffix '_@2x'
useWebGL : false, boolean tells whether use WebGL renderer when available
useAbsImagePath : false, whether using absolute path for child LWF assets
rootOffset : { x:0, y:0 }, root offset coordinate
addInitializeHook
addInitializeHook(hookFunc)
Add hook functions that will be bound to corresponding functions before LWF is played. Mainly used for defining custom debugging functions.
var paramHandler = function() {
return {
handler: {
loadError: function(e) { console.log(e); },
exception: function(e) { console.log(e); }
}
};
};
var paramCallback = function() {
return {
callback: {
onLoad: function(lwf) { console.log(lwf); }
}
};
};
lwfLoader.addInitializeHook(paramHandler);
lwfLoader.addInitializeHook(paramCallback);
//Self-defined hook functions will be bound
//Supports handler forexceptionandloadError, callback ononLoadfunction
getCurrentFPS
getCurrentFPS()
Return current FPS.
lwfLoader.getCurrentFPS();
=> 60
getRenderer
getRenderer()
Return the current renderer name in string, null if undefined.
lwfLoader.getRenderer();
=> 'useCanvasRenderer' //when using canvas renderer
loadLWF
loadLWF(lwf, lwfId, imageMap, privateData, callbackFunc)
Load external LWF resource to attach on current running LWF.
lwfLoader.loadLWF(lwf, lwfId, imageMap, privateData, callbackFunc);
//Used to load LWF resources to attach on existing instance.
loadLWFs
loadLWFs(callbackFunc)
Call LWF's loadLWFs function via loader.
lwfLoader.loadLWFs(callbackFunc);
//same as calling LWF.loadLWFs, not frequently used in loader
//should be used mainly for compatibility issue
pause
pause()
Stop playing LWF.
lwfLoader.pause();
//pause the animation
playLWF
playLWF(lwfDOMElement, lwfSetting)
Load and play LWF using given parameters. playLWF will set necessary parameters to play LWF animation.
It retrieves parameters from user defined field and sets the default value when no data are given.
This function is used to load and play parent LWF which all LWF attached to this LWF should be using the same loader settings.
Thus the loader settings are saved for the further loading purpose.
var targetElem = document.getElementById('lwf-DOM');
var lwfSetting = {
lwf: "./example.lwf",
prefix: "./lwf/",
imagePrefix: "./lwf/",
privateData: {
limitTimeSeconds:360
}
};
lwfLoader.playLWF(targetElem, lwfSetting);
//play LWF animation
//passes parameter stored in lwfParam to LWF
parameters can be set in lwfSetting field are:
lwf : "testlwf.lwf", mandatory: URL of lwf binary data or lwf.js
onload : onloadFunction, function on load the all data and bitmaps
stage : stage, div or canvas
js : "testlwf_debug.js", set JavaScript file instead of automatically set
useBackgroundColor : true, fill the stage with the background color of lwf data
setBackgroundColor : 0xfff, fill the stage with the specified color(ARGB integer)
fitForHeight : true, fit lwf size for the height
fitForWidth : true, fit lwf size for the width
prefix : "", set the prefix of any url
imageMap : imageMap, name map or renaming function for images
imagePrefix : "", the prefix is (imagePrefix || prefix || "")
imageSuffix : "@2x", suffix of image, default is empty
use3D : true, Use 3D transform in CSS (default is true)
onprogress : function(loadedCount,total){}, onprogress function
worker : false, Use Web Workers or not, default is true
name : name, out: LWF name (string)
error : [{"url":url, "reason":reason}], out: filled information about error if error occurred
loadedCount : loadedCount, out: loaded count
total : total, out: total count
requestLWF
requestLWF(lwf, lwfId, imageMap, privateData, callbackFunc)
Sets up parameters for given LWF data and store it in requests array
Stored requests will be loaded via loadLWFs function
lwfLoader.requestLWF(lwf, lwfId, imageMap, privateData, callbackFunc);
//Stores the parameter required to play givenlwfintolwfLoader.requests
resume
resume()
Resume playing LWF from pause state.
lwfLoader.resume();
//Resume from pause state.
setDisplaySetting
setDisplaySetting(displaySetting)
Sets the LwfLoader display setting from input parameters.
var displaySetting = {
resizeMode: "fitForWidth",
displayDivId: 'stg',
stageWidth: 640,
stageHeight: 480,
screenWidth: 800,
screenHeight: 600,
stageHAlign: 0,
stageVAlign: 0,
useLargeImage: false
};
lwfLoader.setDisplaySetting(displaySetting);
//Play LWF with given display settings.
Available settings are:
renderer : 'canvas', rendering mode(canvas, css, webgl)
resizeMode : 'fitForWidth', 'fitForWidth', 'fitForHeight' or 'fitToScreen'
displayDivId : 'lwf-stage', ID of DOM element which contains LWF resource, used for stretch purpose
stageWidth : 0, display stage width, set 0 to use default value
stageHeight : 0, display stage height, set 0 to use default value
screenWidth: 0 , screen width, set 0 to use window's innerWidth
screenHeight: 0, screen height, set 0 to use window's innerHeight
stageHAlign : -1, -1: align-left, 0: align-center, 1: align-right
stageVAlign : -1, -1: align-top, 0: align-center, 1: align-bottom
useLargeImage : false, boolean tells whether use images with suffix '_@2x'
setRenderer
setRenderer(renderer)
Set loader's rendering mode to given renderer.
var myRenderer = 'webkitcss';
lwfLoader.setRenderer(myRenderer);
lwfLoader.getRenderer();
=> 'useWebkitCSSRenderer' //set to use CSS renderer
Available renderers are:
canvas //short form for Canvas Renderer
webkitcss //short form for CSS Renderer
webgl //short form for WebGL Renderer
useCanvasRenderer
useWebkitCSSRenderer
useWebGLRenderer
setPreventDefaultBehaviour
setPreventDefaultBehaviour(boolean)
Manually sets preventDefault's behaviour.
lwfLoader.setPreventDefaultBehaviour(false);
//Disable preventDefault
Assets Management
prefix
Prefix of resource directory. LWF Loader will attempt to retrieve resources with the given prefix.
prefix: prefix of LWF resources.
imagePrefix: prefix for images, 'prefix' will be copied if empty.
imageMap
Set imageMap to manually link resource image to the specified custom path.
var setting = {
imageMap: {
"lwf_foo.png": "/IMG_PATH/foo.png",
"misc_item_1.png": "/IMG_PATH/1.png"
};
};
var lwfLoader = new LwfLoader();
lwfLoader.playLWF(element, setting);
Alternatively, users can override getImageMapper() function to specify their custom image paths.
var lwfLoader = new LwfLoader();
lwfLoader.getImageMapper_ = function() {
return function(imageId) {
//Your custom function goes here
return pimageId.replace(/REGEX/, 'IMG_PATH');
};
}
lwfMap
Set lwfMap to manually link lwf asset to the specified custom path.
Useful while child LWFs to be included are placed not in the same directory.
var setting = {
//loading lwf_sample_x will retrieve resource from the given path
lwfMap: {
"lwf_sample_a": "/CUSTOM_PATH/a.lwf",
"lwf_sample_b": "/CUSTOM_PATH/b.lwf"
};
};
var lwfLoader = new LwfLoader();
lwfLoader.playLWF(element, setting);