LWF Loader Document

Lwf Loader

LwfLoader Constructor `new LwfLoader()`

lwf-loaderの新しいインスタンスを生成します。 lwf-loaderは初期値で初期化されます。

new LwfLoader();
//全てのメンバ変数は初期値で初期化されます。

LwfLoader class members

        
initializeHooks : [],                    バインドされたフック関数を含む配列です。

requests : [],                           読み込まれたLWFパラメータを含む配列です。

pausing: false,                          このフラグはアニメーション中かどうかを示します。

loadingCount : 0,                        LWFとリソースの読み込み進捗をスタックします。

debug : false,                           このフラグを立てるとデバッグ情報を画面に出したりログを出します。

backgroundColor : null,                  描画領域の背景色をARGBで指定します。

resizeMode : 'fitForWidth',              fitForWidthかfitForHeightかfitToScreenで画面の伸縮方法を指定します。

fitToScreen : false,                   　fitToScreenをtrueにすると画面サイズに合わせて自動に伸縮します。

displayDivId : null,                     LWFのリソースが含まれているDOMエレメントをIDで指定します。

stageWidth : 0,                          ステージの横幅

stageHeight : 0,                         ステージの縦幅

screenWidth : 0,                         表示領域の横幅

screenHeight : 0,                        表示領域の縦幅

stageHAlign : -1,                        -1: 左寄せ, 0: 中央寄せ, 1: 右寄せ

stageVAlign : -1,                        -1: 上寄せ, 0: 中央寄せ, 1: 下寄せ

useLargeImage : false,                   このフラグを立てると画像のファイル名の最後に'_@2x'をつけます。

useWebGL : false,                        WebGL対応環境の場合、WebGLレンダラーを使用するかを設定します。

useAbsImagePath : false,                 trueの場合、子LWFの素材を絶対パスで読み込むようにする。

rootOffset : { x:0, y:0 },               rootムービーの描画領域座標を指定します。

addInitializeHook `addInitializeHook(hookFunc)`

LWFを再生する前に、対応するフック関数を追加します。デバッグ用の関数などを定義するのが主な使い方です。

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

//自前で定義したフック関数がバインドされます。
//サポートされるのは exceptionとloadError, コールバックされるonLoad関数です。

getCurrentFPS `getCurrentFPS()`

現時点のFPSを返します。

lwfLoader.getCurrentFPS();
=> 60

getRenderer `getRenderer()`

今使っているレンダラーの名前を文字列で返します。

lwfLoader.getRenderer();
=> 'useCanvasRenderer' //canvasレンダラーの場合

loadLWF `loadLWF(lwf, lwfId, imageMap, privateData, callbackFunc)`

LWFに外部から読み込んだLWFをアタッチします。

lwfLoader.loadLWF(lwf, lwfId, imageMap, privateData, callbackFunc);
//読み込んだリソースを既にあるLWFのインスタンスにアタッチします。

loadLWFs `loadLWFs(callbackFunc)`

LWF本体のloadLWFs関数をloaderから呼びます。

lwfLoader.loadLWFs(callbackFunc);
//LWF.loadLWFsと同じ呼び出しをできますがloaderでは頻繁に使われません。
//主に後方互換対応で使われます。

pause `pause()`

LWFの再生を止めます。

lwfLoader.pause();
//アニメーションを一時停止します。

playLWF `playLWF(lwfDOMElement, lwfSetting)`

渡したパラメータを使ってLWFを再生します。ユーザーが定義したフィールドからLWFの再生に必要なパラメータを取り出しセットします。データが渡されない時はデフォルト値をセットします。一つのLWFに呼び出されたすべてのLWFが、同じloaderの設定を使う必要があるため、親LWFを再生する時に必ず使用してください。playLWF内でloaderの設定を保存し、子LWFの再生の時に使いまわします。

var targetElem = document.getElementById('lwf-DOM');

var lwfSetting = {
  lwf: "./example.lwf",
  prefix: "./lwf/",
  imagePrefix: "./lwf/",
  privateData: {
    limitTimeSeconds:360
  }
};

lwfLoader.playLWF(targetElem, lwfSetting);
//LWFアニメーションを再生します。
//パラメータはlwfParamに保存されLWFに渡されます。

parameters can be set in lwfSetting field are:

        
lwf : "testlwf.lwf",                          必須: LWFバイナリーのURLかlwf.jsを指定します。

onload : onloadFunction,                      必要な全データを読む関数です。

stage : stage,                                div か canvasです。

js : "testlwf_debug.js",                      自動セットの代わりにJavaScriptをセットします。

useBackgroundColor : true,                    描画領域にLWFデータの背景色を使います。

setBackgroundColor : 0xfff,                   描画領域にARGBで指定された背景色を使います。

fitForHeight : true,                          LWFを縦幅にフィットさせます。

fitForWidth : true,                           LWFを横幅にフィットさせます。

prefix : "",                                  全URLのプレフィックスを設定します。

imageMap : imageMap,                          画像名を再マッピングする関数です

imagePrefix : "",                             画像パスの先頭に付与される文字列です。

imageSuffix : "@2x",                          画像ファイルの末尾に付与する文字列で、デフォルトは空です。

use3D : true,                                 CSSの3Dtransformを使うかどうかのフラグです(デフォルトはtrue)

onprogress : function(loadedCount,total){},   進捗を表示する関数です。

worker : false,                               Web Workersを使うかどうかの設定です。デフォルトは使います。

name : name,                                  LWFの名前を出力します。

error : [{"url":url, "reason":reason}],       エラーとエラーの原因を出力します。

loadedCount : loadedCount,                    読み込みが完了しているリソース数です。

total : total,                                全リソースの数です。

requestLWF `requestLWF(lwf, lwfId, imageMap, privateData, callbackFunc)`

与えられたLWF用のパラメータを設定し、それがリクエストした配列に格納し
格納されたリクエストは、loadLWFs関数からロードされます

lwfLoader.requestLWF(lwf, lwfId, imageMap, privateData, callbackFunc);
//格納されたパラメータはLWFを再生するのに必要です

resume `resume()`

一時停止した状態からLWFを再生しはじめます。

lwfLoader.resume();
//一時停止した状態から再生しはじめます。

setDisplaySetting `setDisplaySetting(displaySetting)`

渡されたパラメータでLwfLoaderの表示設定を行います。

var displaySetting = {
  resizeMode: "fitForWidth",
  displayDivId: 'stg',
  stageWidth: 640,
  stageHeight: 480,
  screenWidth: 800,
  screenHeight: 600,
  stageHAlign: 0,
  stageVAlign: 0,
  useLargeImage: false
};

lwfLoader.setDisplaySetting(displaySetting);
// LWFの再生時に表示設定を渡します。

有効な設定は以下の通りです。

        
renderer : 'canvas',          レンダラーを指定できます。(canvas, css, webgl)

resizeMode : 'fitForWidth',   ウィンドウリサイズ時の動作を指定できます。(fitForWidth, fitForHeight, fitToScreen)

displayDivId : 'lwf-stage',   LWFのリソースがあるDOMエレメントのIDです。LWFを伸び縮みする為の物です。

stageWidth : 0,               再生ステージの横幅

stageHeight : 0,              再生ステージの縦幅

screenWidth : 0,              表示領域の横幅、デフォルトでスクリーンサイズを使用

screenHeight : 0,             表示領域の縦幅、デフォルトでスクリーンサイズを使用

stageHAlign : -1,             -1: 左寄せ, 0: 中央寄せ, 1: 右寄せ

stageVAlign : -1,             -1: 上寄せ, 0: 中央寄せ, 1: 下寄せ

useLargeImage : false,        このフラグを立てると画像のファイル名の最後に'_@2x'をつけます。

setRenderer `setRenderer(renderer)`

レンダリングモードを指定できます。

var myRenderer = 'webkitcss';
lwfLoader.setRenderer(myRenderer);
lwfLoader.getRenderer();
=> 'useWebkitCSSRenderer' //CSS レンダラーがセットされています。

以下のレンダラーが使用できます。

        
canvas  //Canvasレンダラーの短縮形です。

webkitcss  //CSS レンダラーの短縮形です。

webgl  //WebGL レンダラーの短縮形です。

useCanvasRenderer

useWebkitCSSRenderer

useWebGLRenderer

setPreventDefaultBehaviour `setPreventDefaultBehaviour(boolean)`

preventDefaultの挙動を手動で設定できます。

lwfLoader.setPreventDefaultBehaviour(false);
//様々なイベントに対してpreventDefaultを無効にします。

Assets Management

prefix

アセットディレクトリの`prefix`です、デフォルトで指定されたパスからアセットを読み込みます。

prefix: LWF素材全般のprefix。
imagePrefix: 画像素材のprefix, 未指定の場合はprefixの値が代わりに使われる。

imageMap

デフォルトのルールに従わずに直接各リンケージ名に対してカスタムパスを指定できます。

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

また画像パスを取得するための関数、getImageMapper()を直接overrideして使う方法もあります。

var lwfLoader = new LwfLoader();
lwfLoader.getImageMapper_ = function() {
  return function(imageId) {
    //Your custom function goes here
    return pimageId.replace(/REGEX/, 'IMG_PATH');
  };
}

lwfMap

デフォルトのルールに従わずに直接各LWF素材に対してカスタムパスを指定できます。

var setting = {
  //lwf_sample_aを呼び出す場合、指定されたパスから取得するようになります
  lwfMap: {
    "lwf_sample_a": "/CUSTOM_PATH/a.lwf",
    "lwf_sample_b": "/CUSTOM_PATH/b.lwf"
  };
};
var lwfLoader = new LwfLoader();
lwfLoader.playLWF(element, setting);

LWF Loader

Loads LWF in a simple and elegant way.

Lwf Loader

LwfLoader Constructor new LwfLoader()

addInitializeHook addInitializeHook(hookFunc)

getCurrentFPS getCurrentFPS()

getRenderer getRenderer()

loadLWF loadLWF(lwf, lwfId, imageMap, privateData, callbackFunc)

loadLWFs loadLWFs(callbackFunc)

pause pause()

playLWF playLWF(lwfDOMElement, lwfSetting)

requestLWF requestLWF(lwf, lwfId, imageMap, privateData, callbackFunc)

resume resume()

setDisplaySetting setDisplaySetting(displaySetting)

setRenderer setRenderer(renderer)

setPreventDefaultBehaviour setPreventDefaultBehaviour(boolean)