Webで2Dキャラクターに命を吹き込む！？ 「Live2D」のWebGL SDKを使ってみる！

こんにちは！　ダンサー兼フロントエンドエンジニアのシスコです！

ブレイクダンスの世界大会「Red Bull BC One 2016」行ってきました！
生で世界レベルを見ると迫力がありますね！　Bboy Isseiが日本人初優勝を果たし大熱狂の1日でした。2016年で一番デカい声で叫んでた気がします……！
次は、DANCE ALIVE HERO’Sですねっ！

今回もLive2Dになります！　WebGL SDKを使って WebでもLive2Dキャラを動かすのに挑戦したいと思います！

Live2D Cubism での作成編と、Viewer での表示編も、ぜひ合わせて見てください……！

[Live2D -作成編-]

2Dイラストから立体感ある表現を作れる「Live2D」を試してみた！ – 作成編 –

シスコ

2016.10.27

[Live2D -表示編-]

2Dイラストから立体ある表現を作れる「Live2D」を試してみた！ – 表示編 –

シスコ

2016.11.28

下準備（WebGL SDKを使う）

まずは、Live2D公式サイトからWebGL SDKをダウンロードします！
Live2D -WebGL SDK-

Webサーバー（何でも良いです）を起動させて、サンプルを実行してみます。
ちなみに、Macを使っている方は、以下のコマンドで、ターミナルで簡易サーバーを立ち上げることができます！　

Bracket というフリーエディタでも、簡単にサーバーを起動することができます（Windows は Web アプリなどでできます）。

$ cd 'WebGL　SDKダウンロード先のパス'

$ python -m SimpleHTTPServer '利用したいポート番号（８０００など）'
サンプルを見てみる
サーバーを起動したら、ブラウザで 'http://localhost:指定したポート番号' にアクセスして、表示確認できると思います。

リストが3つ並んでるので、クリックして動作を見てみてください！
すると、このようなものが表示されるはずです……！（Sample Multi Canvas ディレクトリの Simple.html はいろんなサイズの Canvas で表示されているものになります）

sample > Simple ディレクトリをベースにやっていきたいと思います！
Modelの表示を変えたい！
「src > Simple.js」 内の以下のコードで、Model 設定がされています（コメントが付いているので分かりやすいと思います！）。
srcディレクトリと同じ階層の、assets ディレクトリから読み込んでいます。
/*
* Live2D モデル設定。
*/
this.modelDef = {        
    "type":"Live2D Model Setting",
    "name":"haru",
    "model":"assets/haru/haru.moc",
    "textures":[
        "assets/haru/haru.1024/texture_00.png",
        "assets/haru/haru.1024/texture_01.png",
        "assets/haru/haru.1024/texture_02.png"
    ]
};

モデルの切り替えかた
任意のモデル・テクスチャファイルを assets ディレクトリに追加して、以下を書き換えれば、自分の好きなモデルを表示させられます！


"name": "表示させるmocファイル、テクスチャをまとめたディレクトリ名"
"model": "表示させるmocファイルのパス"
"textures": ["表示させるテクスチャのパス（テクスチャの数だけ追加）"]



こういう感じになりました！


※ちなみに、デフォルトで付いている首振りですが、パラメータ操作の設定によって動いています（以下のコード）。止めたい場合は、このコードの30　→　1に変えればよいです！


live2DModel.setParamFloat("PARAM_ANGLE_X", 30 * Math.sin(t/cycle));


モーションを追加しよう！
Live2DFramework.js　を追加
モーションを再生するためには 'Live2DFramework.js' が必要です。html に追加しましょう！
<!-- Live2D Framework -->
<script src="../../framework/Live2DFramework.js"></script>
モーション用の変数を用意する
Simple.js にモーション、モーションマネージャー変数を新たに追加します。
/*
* モーション、モーションマネージャー。
*/    
var motion = null;
var motionManage = null;
モデル設定にモーションを追加する
モデル設定の部分に motion を追加します。
/*
* Live2D モデル設定。
*/
this.modelDef = {
    "type":"Live2D Model Setting",
    "name":"ganfeli",
   　　"model":"assets/ganfeli/ganfeli.moc",
    "textures":[
        "assets/ganfeli/ganfeli.2048/texture_00.png",
        "assets/ganfeli/ganfeli.2048/texture_01.png",
        "assets/ganfeli/ganfeli.2048/texture_02.png",
        "assets/ganfeli/ganfeli.2048/texture_03.png",
        "assets/ganfeli/ganfeli.2048/texture_04.png",
        "assets/ganfeli/ganfeli.2048/texture_05.png",
        "assets/ganfeli/ganfeli.2048/texture_06.png"
    ],
    "motion": "assets/ganfeli/idle.mtn"
};
モーションのロード、再生処理を追加する
モーションの初期読み込みと再生の処理を、以下のように設定します。
// モーションをロード
Simple.loadBytes(modelDef.motion, function(buf){
    motion = new Live2DMotion.loadMotion(buf);
});
motionManage = new L2DMotionManager();
// モーション終了してたら再生
if(motionManage.isFinished()) {
    motionManage.startMotion(motion);
}
motionManage.updateParam(live2DModel);
これでブラウザを見てみると、アイドリング（待機中のアニメーション）が再生されているはずです……！

モーションチェンジをさせてみる！
アイドリングの追加をしましたが、Canvas 内をクリックするとモーションが切り替わるようにもしてみました！
先ほどモデル設定に追加した 'motion' 部分を配列化してモーションを追加しましょう！
"motion": [
    "assets/ganfeli/idle.mtn",
    "assets/ganfeli/01.mtn",
    "assets/ganfeli/02.mtn",
    "assets/ganfeli/03.mtn",
    "assets/ganfeli/04.mtn",
    "assets/ganfeli/05.mtn",
    "assets/ganfeli/06.mtn",
    "assets/ganfeli/07.mtn",
    "assets/ganfeli/08.mtn",
    "assets/ganfeli/09.mtn"
]
切り替えるためのクリックイベントを実装します（モーションの番号と配列用の変数も追加しておきます）。
// モーションチェンジのクリックイベント
canvas.addEventListener("click", function(e) {
   motionChange = true;
   if(motion.length - 1 > motionNum) {
       motionNum++;
   } else {
       motionNum = 0;
   }
}, false);
ロードと再生処理を配列用に書き換えます。
// モーションをロード
for(var i = 0; i < modelDef.motion.length; i++) {
    Simple.loadBytes(modelDef.motion[i], function(buf) {
        motion.push(Live2DMotion.loadMotion(buf));
    });
}
motionManage = new L2DMotionManager();
// モーション終了してたら再生
if(motionManage.isFinished() || motionChange === true) {
    motionManage.startMotion(motion[motionNum]);
    motionChange = false;
}
// モーション指定がない場合、何もしない
if(motionNum !== null) {
    motionManage.updateParam(live2DModel);
}
このような感じでクリックでモーションが切り替わっています！

まとめ
Web上で表示・モーション再生することができたでしょうか！
サイトに組み込むなど考えるとモデルのレンダリング、モーションロード時のモーション遅延回避なども必要になってくると思います！　WebGL が使われているので難しいですが、（自分も含めて）ひとつずつ頑張っていきましょう……！
それでは、また！！
         
                         
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
              Webサイト制作の実績・料金を見る