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

シスコ


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 -作成編-]

[Live2D -表示編-]

下準備(WebGL SDKを使う)

スクリーンショット 2016-12-13 21.05.32

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

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

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

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

$ python -m SimpleHTTPServer '利用したいポート番号(8000など)'

サンプルを見てみる

サーバーを起動したら、ブラウザで ‘http://localhost:指定したポート番号’ にアクセスして、表示確認できると思います。
リストが3つ並んでるので、クリックして動作を見てみてください!

すると、このようなものが表示されるはずです……!(Sample Multi Canvas ディレクトリの Simple.html はいろんなサイズの Canvas で表示されているものになります)

live2d-gl

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 ディレクトリに追加して、以下を書き換えれば、自分の好きなモデルを表示させられます!

  1. name“: “表示させるmocファイル、テクスチャをまとめたディレクトリ名”
  2. model“: “表示させるmocファイルのパス”
  3. “textures“: [“表示させるテクスチャのパス(テクスチャの数だけ追加)”]

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

ganfeli

※ちなみに、デフォルトで付いている首振りですが、パラメータ操作の設定によって動いています(以下のコード)。止めたい場合は、このコードの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);

これでブラウザを見てみると、アイドリング(待機中のアニメーション)が再生されているはずです……!

ganfeli_02-1

モーションチェンジをさせてみる!

アイドリングの追加をしましたが、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);
}

このような感じでクリックでモーションが切り替わっています!

gafeli03-1

まとめ

Web上で表示・モーション再生することができたでしょうか!

サイトに組み込むなど考えるとモデルのレンダリング、モーションロード時のモーション遅延回避なども必要になってくると思います! WebGL が使われているので難しいですが、(自分も含めて)ひとつずつ頑張っていきましょう……!

それでは、また!!

シスコ
この記事を書いた人
シスコ

フロントエンドエンジニア

関連記事