LWF Loader

Loads LWF in a simple and elegant way.

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); }


//Self-defined hook functions will be bound
//Supports handler for exception and loadError, callback on onLoad function

getCurrentFPS getCurrentFPS()

Return current FPS.

=> 60

getRenderer getRenderer()

Return the current renderer name in string, null if undefined.

=> '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.

//same as calling LWF.loadLWFs, not frequently used in loader
//should be used mainly for compatibility issue

pause pause()

Stop playing LWF.

//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: {

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 given lwf into lwfLoader.requests

resume resume()

Resume playing LWF from pause state.

//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

//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';
=> '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

setPreventDefaultBehaviour setPreventDefaultBehaviour(boolean)

Manually sets preventDefault's behaviour.

//Disable preventDefault

Assets Management


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.


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');


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);