トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

Live2Dの本を見ながら作業&unityでパチクリ

 前回開いてサンプルを触るところまでやりました。

bibinbaleo.hatenablog.com

 今回はこの本を元に、自分のモデルを動かしたり、アニメーションのつけ方を学んで生きます。

ビギナーのためのLive2Dテクニックガイド (I・O BOOKS)

ビギナーのためのLive2Dテクニックガイド (I・O BOOKS)

 

ただ、バージョンの違いのせいで、操作が結構違っているので自分で模索しつつやります。

私は最新のver3を使っていますが、本はver2かな?

追記:新しい本が出ていました。ver3対応。2017/8発売

 

 

データを作る 

photoshopで元データを作ります。

f:id:bibinbaleo:20171001163729p:plain

こんな感じで細かくレイヤーを分けて見ました。

f:id:bibinbaleo:20171001163724p:plain

Live2D読み込み

ドラックアンドドロップで読み込まれました。

f:id:bibinbaleo:20171001164014p:plain

本によれば、目などのレイヤー場で離れたパーツは自動的に別オブジェクトになるそうですが、なっていませんでした。

そのため単体で選べない・・・

しょうがないので、データを作り直して目とつのを分けました。

パラメーターをつける

目の開閉

右目を選んで、パラメーターの右目開閉のところで1にキーフォームを追加を押します(緑の丸)。

f:id:bibinbaleo:20171001170100p:plain

次に0に移してまたキーを打ってから、目を潰します。

f:id:bibinbaleo:20171001170105p:plain

そうして、スライドさせたら右目が開閉するようになりました。

左目も同様に。

f:id:bibinbaleo:20171001170057p:plain

f:id:bibinbaleo:20171001170050p:plain

キーを打ってから変形させるという手順なんだ・・・普通と違う

回転

オブジェクトを選択して、上の方の回転デフォーマーの作成を押して、デフォーマーという、位置や角度大きさを変えれるものを作ります。

f:id:bibinbaleo:20171001170835p:plain

今回は上のヘタの部分に作りました。

f:id:bibinbaleo:20171001170828p:plain

ただし根元に回転軸を置きたいので、macならcommandを押しながらドラッグするとデフォーマー自体を移動させたり回転させたりできます。

これを使って角や顔全体にもデフォーマーを設定して、適当なパラメーターに回転のキーを打ちました。ツノは眉毛にしたりした。

顔の回転

ワープデフォーマーを使って、顔が軽く左右を向くようにした。

Animated GIFs - Find & Share on GIPHYwww.giphy.com

メッシュの自動生成

f:id:bibinbaleo:20171004092117p:plain

部品を選択して、上の方のメッシュの自動生成を押すと、部品の形にあったメッシュが生成されます。プリセットでメッシュの細かさを選べる。

f:id:bibinbaleo:20171004092124p:plain

f:id:bibinbaleo:20171004092108p:plain

これでまつげなどを目を閉じた時の形にしました。

f:id:bibinbaleo:20171004092104p:plain

アニメーション適用

live2dのページからサンプルをダウンロードして、そのアニメーションを今回のモデルに適用して見ました。

Animated GIFs - Find & Share on GIPHYwww.giphy.com

おおー!目をパチクリしてくれた。

Live2D Viewer

本ではLive2D Viewerでアニメーションを適用していた。これはver2用のものみたいで、HPからダウンロードできる。

Live2D Viewer - Live2D Cubism 2 マニュアル

これに書き出すには.moc形式に書き出さないといけない。

f:id:bibinbaleo:20171001203005p:plain

ただし事前にテクスチャアトラスというのを作っておかないと書き出せないらしい。

上の方にボタンがある。

f:id:bibinbaleo:20171001203012p:plain

こんな感じで一枚に部品を並べてくれる。

f:id:bibinbaleo:20171001203018p:plain

そうして書き出したものを、viewerに入れて、プロジェクトからサンプルを選んだけど動かなかった><

f:id:bibinbaleo:20171001202823p:plain

何か間違ってるのかな〜

自分でアニメーションをつける

新規作成からアニメーションを選んで、モデルデータをドラックアンドドロップする。

f:id:bibinbaleo:20171002161428p:plain

キャンバスのサイズは左下のインスペクタタブから設定できる。(わかりにくい)

f:id:bibinbaleo:20171002164147p:plain

そしてパラメーターを開いて、キーを打って行く。動かしたら自動でキーが打たれる。

f:id:bibinbaleo:20171002161408p:plain

操作は結構直感的でした。

カーブの調整もできます。

f:id:bibinbaleo:20171002163730p:plain

書き出し

色々設定して書き出し。

f:id:bibinbaleo:20171002163723p:plain

こんな感じに書き出せました。

Unityに取り込む

あらかじめ3.0のsdkを入れて置きます。

Live2D @ GitHub

自分で作ったモデルを入れるには、moc3形式で書き出して、書き出されてもの全てをフォルダに入れ、フォルダごとUnityに入れたら自動でモデル化してくれるそうです。

f:id:bibinbaleo:20171002173623p:plain

SDKのインポート~モデルを配置 | Live2D Manuals & Tutorials

・・・モデル化してくれませんでした。

ただ、なぜかその時開いてたraycastingというシーンには表示されました。本当に謎

でもそのシーンに表示されたモデルをプレハブ化しても、実態が得られない。他のシーンに入れたら何も表示されない。

SDKを新しいのにアップデートしたら改善されました。

f:id:bibinbaleo:20171012224824p:plain

f:id:bibinbaleo:20171002192717p:plain

しょうがないので、このシーンで色々試して見ます。

ちなみにモデルのCubism Parameters Inspectorで設定した値を動かすことができます。

f:id:bibinbaleo:20171002194534p:plain

アニメーション

アニメーションの再生 | Live2D Manuals & Tutorials

まずアニメーションは、Live2Dソフト側で書き出したものを入れたら、unityの.anim形式で取り込まれました。

f:id:bibinbaleo:20171002192713p:plain

これをモデルにドラックアンドドロップしたら勝手にAnimatorがつくので再生したらちゃんと動きました!

f:id:bibinbaleo:20171002192851p:plain

Animated GIFs - Find & Share on GIPHYwww.giphy.com

LookAt

指定したものを目で追いかけてくれる

視線追従の設定 | Live2D Manuals & Tutorials

モデルにLookat controllerをつけ、追いかける対象となるオブジェクトをTargetのところに設置

f:id:bibinbaleo:20171002201814p:plain

対象オブジェクトにtarget behaviorスクリプトをつける。

そして、変化させるパラメーターにLookParametarをつける。目とか顔の向きとか

f:id:bibinbaleo:20171002201810p:plain

私はParamAngleX(角度X)に首の向きを変えるパラメーターを設置したのでそこに設置。

この状態でターゲットを動かしたらこんな感じで追ってくれました。

Animated GIFs - Find & Share on GIPHYwww.giphy.com

パラメーターが少ないからあんまり自然じゃないけど・・・

あとマニュアルに載っているスクリプトを使ったらマウスを見てくれるものもできました。

瞬き

自動まばたきの設定 | Live2D Manuals & Tutorials

モデルに二つのblinkスクリプトをつけ、目の開閉パラメーターにblink parameterスクリプトをつけたら自動で瞬きをしてくれるはずなのですが、私のモデルではしてくれませんでした。

f:id:bibinbaleo:20171002210700p:plain

モデルのインスペクタでは手動で目の開閉ができる

f:id:bibinbaleo:20171002210833p:plain

パラメーター名がサンプルモデルとは違うのが原因だそうです。

https://twitter.com/xsinryux_x/status/915092493745586176

最後に

細かいモデル作りをしていないので、全体的にざっくりした内容になりました。

次回は下手なりに細かい部位のある人体キャラを作ったり、unityでもっと応用したものを作ったり、facerigを買って遊んでみたりしたいです。

 

Unity+Facerigの本があった。