live2DをUnityで表示させてみました。

ayumegu(プログラマー)
よろしくお願いします。

今回は前回作成したlive2Dのあゆめぐちゃんを少しバージョンアップしたものをUnityで動かしてみました。
ちなみにUnityのバージョンは4.6.5f1 環境はmacです。
なぜ前回やらなかったかというと、まさにこれにはまり一度あきらめたのであります。

作成したモーションがunityで認識されない

macで拡張子を表示していない私が悪いのでございますがね・・・。
これで無事Unity上でモデル表示されましたよ^^

あ、ダウンロードしたsdkのサンプルフォルダの中の
sample\SampleApp1\Assets\Editor\Live2DImporter.csがmocファイルをドロップするだけで勝手に.bytesに変更してくれるEditor拡張らしいのでこれさえ有ればOK!

ふふふ かわいい

さて早速動かしてみよう。

##そのまえに・・・
Live2D Viewerでデスクトップに表示するとすこぶるかわいい
二匹表示すれば双子ちゃん・・・

かわいい かわいい^^
かわいいの二匹とも小さくして表示しておくことにしましたw
もう一種類のあゆめぐちゃんもつくらなければ・・・。

##さてさて・・・ではUnityで・・・。 ではではLive2D Modelerでmoc用ファイルで書き出したファイルがこちら

UnityはとりあえずLive2Dのデモのプロジェクトを開きました。
そしてもともとあるライブ2Dのインスペクターをこんな感じで修正

あ、Demoから始める場合はSampleApp1/Editorの下のScriptを持ってきておくと
.bytesにする作業を自動で行ってくれる。

Playするともうマウスでアクションする! かわいい

##なにをしようかな 勝手に動いてくれるのは困るのでScriptを新しく作ることにする
とりあえず瞬きのみ残していらないものを削除した新しいクラスを作成しました。
今回はまだあゆめぐちゃんのアニメーションなど用意していないので本当にシンプルに

Live2D Modelerで設定したIDで各パラメーター動かせるので動かしてみる

下記のようなソースで動かせます
angleをUpdateメソッド内で変動させて動かしています

live2DModel.setParamFloat( "PARAM_MOUTH_OPEN_Y" , angle) ;

動かせるところをいくつか動かしてみたところ

これだけだとちょっと寂しいので表情差分として目を追加してみました。

全部表示した状態でmocを書き出して・・・。
非表示だと書き出されないらしいので注意です。
 

ちなみにパーツの詳細はこんな感じになっています。
目つぶりと目ぱっちり追加です。

パーツの表示非表示きりかえはこんな感じで透過度を設定して切り替えました。

live2DModel.setPartsOpacity("PARTS_EYE_ROUND", 1f);
live2DModel.setPartsOpacity("PARTS_EYE_CLOSE", 0f);
live2DModel.setPartsOpacity("PARTS_01_EYE_BALL_001", 0);
live2DModel.setPartsOpacity("PARTS_01_EYE_001", 0);

こんな感じ

##いざ!実装
さて、だいたいの準備はできたので何か作ろうかと思います。
よくある会話を・・・そう会話を・・・。
NGUIをインポートして・・・。あれ・・・?
カメラのレイヤーを指定しても両方のカメラにあゆめぐちゃんがうつっているではないか・・・。
まぁ今回の場合はカメラ一つでもいいんだけど・・・。

どうやらこれらしい
描画モードの設定について
描画されるモデルにレイヤーを設定できない。とのことなので、
draw()をカメラのOnPostRender()に移動させたらうまく指定のカメラのみうつるようになりました。

##なんとなくつくったもの ちょっとした会話を作成してみました。
こちら

##感想
いくつか気になるリンクを・・・
形状生成のアドバイス

当たり判定の配置

いろいろ見ていたら、あたり判定をつけることができるようですね。
これによってタッチされた場所によって反応をかえたりもできるのか〜。
と思いつつそれはまたいつか・・・