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

提供: LWF Wiki
移動: 案内検索
(イベント発生)
(アニメーション)
 
(1人の利用者による、間の14版が非表示)
11行: 11行:
 
加算効果などをかけたい場合はブレンドモードを加算にしてください。<br/>
 
加算効果などをかけたい場合はブレンドモードを加算にしてください。<br/>
 
(2013/12のバージョンからブレンドモード加算に対応)<br/>
 
(2013/12のバージョンからブレンドモード加算に対応)<br/>
 +
<br/>
 +
マスクのかけかた<br/>
 +
親Movieのブレンドモード = レイヤー<br/>
 +
マスク形状のMovieのブレンドモード = 消去<br/>
 +
マスク対象のMovieのブレンドモード = レイヤー<br/>
  
 
==タイムライン制御==
 
==タイムライン制御==
各環境で問題ない構造にするためには、環境に依存してしまうフレームスクリプトは使用できません。<br/>
+
各環境で問題ない構造にするためには、環境に依存してしまうスクリプトは使用できません。<br/>
 
  /* js
 
  /* js
 
     this.gotoAndPlay(2)
 
     this.gotoAndPlay(2)
 
  */
 
  */
※上記はjsに依存する書き方なので、HTML5以外では使えません。<br/>
+
<b>上記はjsに依存する書き方なので、HTML5以外では使えません。</b><br/>
 
<br/>
 
<br/>
 
各環境で問題ないようにする場合は<b>actionScript</b>を使用します。<br/>
 
各環境で問題ないようにする場合は<b>actionScript</b>を使用します。<br/>
24行: 29行:
 
<br/>
 
<br/>
 
【対応一覧】<br/>
 
【対応一覧】<br/>
・play()<br/>
+
*play()<br/>
・stop()<br/>
+
*stop()<br/>
・gotoAndPlay(フレーム 又は ラベル名)<br/>
+
*gotoAndPlay(フレーム 又は ラベル名)<br/>
・gotoAndStop(フレーム 又は ラベル名)<br/>
+
*gotoAndStop(フレーム 又は ラベル名)<br/>
 +
*nextFrame()
 +
*prevFrame()
  
 
==イベント発生==
 
==イベント発生==
 
下記のスクリプトでLWFに対してイベントを発生することができます。<br/>
 
下記のスクリプトでLWFに対してイベントを発生することができます。<br/>
 +
イベントを受け取ることでアニメーション中の特定のタイミングを検知することができます。<br/>
 
  fscommand("event","EVENT_NAME");
 
  fscommand("event","EVENT_NAME");
 
focommand()の第1引数には"event"<br/>
 
focommand()の第1引数には"event"<br/>
 
第2引数には発生させたいイベント名を入れてください<br/>
 
第2引数には発生させたいイベント名を入れてください<br/>
 
<br/>
 
<br/>
イベントを受け取る場合は下記のスクリプトを記述します。<br/>
+
イベントを受け取る場合は各環境で下記に相当するコードを記述します。<br/>
 
  //html5版の場合
 
  //html5版の場合
 
  <LWFインスタンス>.setEventListener("EVENT_NAME",function(){
 
  <LWFインスタンス>.setEventListener("EVENT_NAME",function(){
 
     console.log("イベントを受け取りました!");
 
     console.log("イベントを受け取りました!");
 
  });
 
  });
 +
 +
==Flash CCの注意点==
 +
Flash CCは、AS3しか書けない関係上、AS3が対応していないスクリプトがあるとエラーが発生します。<br/>
 +
回避策としては、下記のように /* as */ で囲んでください。<br/>
 +
/* as
 +
    tellTarget("hoge"){
 +
        stop();
 +
    }
 +
*/
 +
ボタンに直接スクリプトを記入することもできないので、ボタンにスクリプトを仕込みたい時は<br/>
 +
ボタンがあらわれるフレームのタイムラインスクリプトに下記のように/* as */で囲んでください。<br/>
 +
/* as
 +
on (press) {
 +
  gotoAndPlay("ButtonOn");
 +
}
 +
on (release) {
 +
  gotoAndPlay("ButtonOff");
 +
}
 +
*/
  
 
==ラベル設定==
 
==ラベル設定==
 +
ラベル設定に関してはFlashと同様に任意のフレームにラベルを設定してください。<br/>
  
==ファイル確認==
+
==使用するファイル==
 +
各環境で使用する場合、LWFファイルは下記のフォルダのものを使用してください。<br/>
 +
【HTML5】<br/>
 +
LWFS_work_output/html5<br/>
 +
【Unity】<br/>
 +
LWFS_work_output/unity<br/>
 +
【その他】<br/>
 +
LWFS_work_output/native<br/>
 +
==テクスチャアトラス==
 +
テクスチャアトラスの作り方についてはコチラを参考にしてください。<br/>
 +
<br/>
 +
[http://lwf-users.org/index.php?title=%E3%83%86%E3%82%AF%E3%82%B9%E3%83%81%E3%83%A3%E3%82%A2%E3%83%88%E3%83%A9%E3%82%B9 テクスチャアトラスの作り方]
 +
==各環境の機能対応表==
 +
マスクや着色、加算ブレンド機能の各環境ごとの対応表です<br/>
 +
https://github.com/gree/lwf/wiki/RendererComparison<br/>

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