「各環境共通のLWFの作り方」の版間の差分

2014年8月21日 (木) 18:23時点における最新版

はじめに

LWFはHTML5、Unity、cocos-2d-x等の様々な環境で動かすことが出来ます。
LWFには制御用のAPIがあり、これらを利用することで動的に動かしたりすることができます。
HTML5ではjavaScript。cocos-2d-xではC++を利用するという形になり、ここから先は各環境に合わせた実装が必要になってきます。
しかし、アニメーションの作り方、タイムライン制御、イベント発生、ラベル設定　等はどの環境でも、ほぼ共通になっています。

このwikiはHTML5版で動かすことを想定した情報が主ですが、各環境共通のLWFを制作する方法にも触れていきたいと思います。

アニメーション

アニメーションに関しては作り方はHTML5版と変わりません。
フレームスクリプトは一部タイムライン制御用を除いて使用することは出来ません。
加算効果などをかけたい場合はブレンドモードを加算にしてください。
(2013/12のバージョンからブレンドモード加算に対応)

マスクのかけかた
親Movieのブレンドモード = レイヤー
マスク形状のMovieのブレンドモード = 消去
マスク対象のMovieのブレンドモード = レイヤー

タイムライン制御

各環境で問題ない構造にするためには、環境に依存してしまうスクリプトは使用できません。

/* js
    this.gotoAndPlay(2)
*/

上記はjsに依存する書き方なので、HTML5以外では使えません。

各環境で問題ないようにする場合はactionScriptを使用します。
実はLWFは　stop()、play()、gotoAndPlay()　等の簡単なタイムライン制御のasを使用することができます。
これらをフレームスクリプトに使用することで各環境で問題なくタイムライン制御を行うことが出来ます

【対応一覧】

• play()
  
• stop()
  
• gotoAndPlay(フレーム 又は ラベル名)
  
• gotoAndStop(フレーム 又は ラベル名)
  
• nextFrame()
• prevFrame()

イベント発生

下記のスクリプトでLWFに対してイベントを発生することができます。
イベントを受け取ることでアニメーション中の特定のタイミングを検知することができます。

fscommand("event","EVENT_NAME");

focommand()の第1引数には"event"
第2引数には発生させたいイベント名を入れてください

イベントを受け取る場合は各環境で下記に相当するコードを記述します。

//html5版の場合
<LWFインスタンス>.setEventListener("EVENT_NAME",function(){
    console.log("イベントを受け取りました!");
});

Flash CCの注意点

Flash CCは、AS3しか書けない関係上、AS3が対応していないスクリプトがあるとエラーが発生します。
回避策としては、下記のように /* as */　で囲んでください。

/* as
    tellTarget("hoge"){
        stop();
    }
*/

ボタンに直接スクリプトを記入することもできないので、ボタンにスクリプトを仕込みたい時は
ボタンがあらわれるフレームのタイムラインスクリプトに下記のように/* as */で囲んでください。

/* as
on (press) {
  gotoAndPlay("ButtonOn");
}
on (release) {
  gotoAndPlay("ButtonOff");
}
*/

ラベル設定

ラベル設定に関してはFlashと同様に任意のフレームにラベルを設定してください。

使用するファイル

各環境で使用する場合、LWFファイルは下記のフォルダのものを使用してください。
【HTML5】
LWFS_work_output/html5
【Unity】
LWFS_work_output/unity
【その他】
LWFS_work_output/native

テクスチャアトラス

テクスチャアトラスの作り方についてはコチラを参考にしてください。

テクスチャアトラスの作り方

各環境の機能対応表

マスクや着色、加算ブレンド機能の各環境ごとの対応表です
https://github.com/gree/lwf/wiki/RendererComparison