ケモミミ大好きイラストブログ

「ケモミミは至高」と語る主のイラスト創作ブログです。

【Live2D】描いたイラストをLive2Dで動かそう〜通常モーション追加編〜

こんにちは、立花です。(`・ω・´) 

前回から引き続きキャラクターのモデリングをして行きたいと思います。

afami1682.hatenablog.com

前回はキャラクターの口と瞬きを設定しました。この調子で全身をモデリングして行くと時間がかかるので、今回はテンプレート機能を使用してパパッとモデリングしようと思います。(べっ別にこの機能を忘れてたんじゃないんだからね(⌒▽⌒; )

【テンプレート機能とは】

テンプレートモデルの素材を使用することで、テンプレートモデルの設定を現在のモデルに継承する事が出来ます。詳しくは下記の公式サイトをご覧ください。

テンプレートモデル - Live2D Cubism 2 マニュアル

【イラストの修正】

調整しやすいようにキャラクターの口を閉じてる状態に修正しました。

f:id:afami1682:20170422030257j:plain

【テンプレートモデルを使用する】

新規プロジェクトを作成し、キャラクターのPSDデータをインポートします。その後、「ファイル」の「テンプレート適応」を選択して、「テンプレート一覧」を表示します。表示された一覧の中から作成するモデルに一番似ている状態のテンプレートを選択します。

f:id:afami1682:20170422030256j:plain

 テンプレート選択後、テンプレートモデルが半透明で表示されますので、パラメータを操作して目や口などのパーツを作成するモデルに合わせます。

f:id:afami1682:20170422030252j:plain

パーツが合わせ終わったらプレビューを表示してキャラクターがうまく表示されて動くかチェックします。目や口がうまく閉じない場合は、再度パラメーター調整をします。

f:id:afami1682:20170422030253j:plain

 特定のパーツがなぜか動く・動かない場合は、そのパーツがテンプレートモデルのパーツに対応付けられているかチェックします。私の場合「二重」パーツがテンプレートモデルの誤ったパーツに対応付けされて動かなかった為、適切なパーツに対応付けし直して、動くように修正しました。

f:id:afami1682:20170422030206j:plain

 モデルがうまく動くようになったら「OK」を押して、テンプレートモデルを適応します。これでパーツのパラメーター設定が大体完了しました。

f:id:afami1682:20170422030254j:plain

狐耳や胸など、テンプレートモデルには無いパーツの設定をします。(耳ピョコ)

f:id:afami1682:20170422030255j:plain

これでモデリング終了です。ケモミミでなければほとんどモデリング無しで作れちゃいますねw

WebGLで表示する】

WebGLで表示してみます。

①まず公式サイトからWebGLSDKをダウンロードします。

WebGL 2.1 - Live2D Cubism SDK 2

 ②ダウンロードした「Live2D_SDK_WebGL_2.1.00_1_jp.zip」を解凍して、「sample/sampleApp1/assets/live2d/」の中に、出力したモデルデータを入れます。

f:id:afami1682:20170423100758j:plain

③下記2箇所を修正します。 

 Live2D_SDK_WebGL_2.1.00_1_jp/sample/sampleApp1/src/LAppDefine.js

 // モデル定義
MODEL_MAI : "assets/live2d/mai/model.model.json", ←33行目 ②で追加したモデルのパスを追記する。

  Live2D_SDK_WebGL_2.1.00_1_jp/sample/sampleApp1/src/LAppLive2DManager.js

  switch (no)
{
case 0: // ハル
this.releaseModel(1, gl);
this.releaseModel(0, gl);
// OpenGLのコンテキストをセット
this.createModel();
//this.models[0].load(gl, LAppDefine.MODEL_HARU);
this.models[0].load(gl, LAppDefine.MODEL_MAI); ←46行目付近 モデルを呼び出す。
break;

④修正した「Live2D_SDK_WebGL_2.1.00_1_jp」をWebサーバーにアップロードして「SampleApp1.html」 を開き、キャラクターが表示されれば成功です。「Brackets」を使用すれば、サーバーが無くてもデバック可能なのでオススメです。

f:id:afami1682:20170422043931j:plain

 【グリグリする!!】

キャラクターの周りをドラッグして見て下さい。動きますか?(*'▽'*)

という事で今回はここまでとなります。次回はこれにイベントモーションを追加して行こうと思います。

(`・ω・´)もしよければクリックお願いします。私のやる気が「+10」されます。

にほんブログ村 イラストブログ オリジナルイラストへ

ご閲覧ありがとうございました。(*゚▽゚*)ノシ