【Live2D】物理演算の基本とダミーパラメータを使った風表現のススメ

#-前段
こんにちは、aonekoです。
「人生とは風で揺れ動く髪のようなものである」（出典:不明）

今回はLive2Dでの物理演算機能の基本的な使い方と、
応用編として、ダミーパラメータを使った風の表現の紹介です。

※この記事で使用しているLive2D制作用のイラストは、以下で無料公開されている素材をお借りしています。
[ジュエルセイバーFREE http://www.jewel-s.jp/]

#-物理演算の基本（丸投げ）
Live2D上での物理演算機能の使い方について、
詳しくは公式ドキュメントを参照ください。（丸投げ）


[Cubism Editorマニュアル　物理演算の設定方法](http://docs.live2d.com/cubism-editor-manual/physical-operation-setting/)

上記を踏まえておさらいしておくと、
物理演算使うときの基本3要素は、、

・入力
・物理モデル
・出力

となります。
ちょっと図解して補足してみると、、

![WS000001.JPG](https://qiita-image-store.s3.amazonaws.com/0/232924/93eaa9d3-561e-157e-0434-fd2891378b80.jpeg)

って感じになるかと思います。

####**物理演算を使って髪の毛を揺らす**

というケースを考えてみます。

・入力……「首の回転のパラメータ」もしくは「体の回転のパラメータ」
　　　　　あるいは両方の組み合わせを設定します。

・物理モデル……基本的にはどんな振る舞いをさせるかの設定を行いますが、
　　　　　　　**出力する（動かす）ものに合わせた**設定をします。
　　　　　　　髪の毛が長いのか、短いかで物理モデルの設定は変わりますし、
　　　　　　　硬めの髪質か、柔らかめか(速度の設定に関わる）なども考慮しましょう。

・出力……実際に揺らす髪の毛のパラメータを設定します。
　　　　スキニング機能使ってる場合は自動で回転デフォーマのパラメータが出来ているはずなので、
　　　　それらを選択します。

各パラメータ設定する際、1回目で思い通りの動きには中々ならないと思いますので、
「モデラー（Viewer)」と「アニメーター」を何度も行き来しながら、
いい感じの設定を見つけて行きましょう。

■実際に動かしてみた例
![kamiyurerei.gif](https://qiita-image-store.s3.amazonaws.com/0/232924/eab374b7-b841-69e5-fc24-8cd3478b99e9.gif)

補足になりますが、Viewer上で直接パラメータ動かしていい感じの動きが出来ても、
いざアニメータ上で動きを設定するとイメージ通りの動きをしてくれない場合が多々あります。
物理演算の設定後の動きの最終確認はあくまでもアニメータ上でするようにしましょう。
※アニメーションベイクも忘れずに！
 [物理演算のアニメーションベイク](http://docs.live2d.com/cubism-editor-manual/physics-operation-bake/)
（「物理演算設定した筈なのにアニメータ上で動かない…！」と思ったらベイク忘れてたみたいな事がですね…多々ありまして…えぇ…。。）




#-【応用編】ダミーパラメータを使った風の表現

Live2Dを使ってアニメーション作っている時、
風に吹かれて髪の毛やスカートが揺れる…という表現、結構あるんじゃないでしょうか？

物理演算を使う時は必ず **"入力"** が必要になりますが
この**入力に風（を模したダミーパラメータ）を使ってみる**…というのが今回の趣旨です。

**1)ダミーパラメータを作ります。**
![WS000000.JPG](https://qiita-image-store.s3.amazonaws.com/0/232924/73a6fdf8-aa09-66e0-6a01-d6be8c2c6892.jpeg)
ダミーなのでモデラー上では何もパラメータは設定しません。あくまで物理演算の入力用として項目だけ作成します。
(※後でアニメータ上ではパラメータ設定します）

**2）Viewerの物理演算の「入力」に指定します。**
![WS000001.JPG](https://qiita-image-store.s3.amazonaws.com/0/232924/13cbbaaf-e86a-c75d-0795-24940efb1672.jpeg)

**2-2）出力設定**
出力先（動かすもの）を指定します。
今回は前回の記事で紹介した２軸パラメータに、
髪の毛の動きを設定しているのでその２つを出力先にします。
[2軸パラメータを使った揺れ表現のススメ](https://qiita.com/aoneko_aoneko/items/81ac886a4a56639267f2)

**3）Viewer上で動きの確認**
![kazenomii.gif](https://qiita-image-store.s3.amazonaws.com/0/232924/9ac47a5c-8161-a3e1-59d2-316a085977aa.gif)

**3-2）複数の入力を組み合わせてみる**
今回は風（ダミー）の入力と、既存の首の動きに応じた入力を組み合わせてみます。
キャラクタが何も動かず止まってる時でも風で髪が揺れて、
かつ、首の動きに応じて揺れ方が変化する様なイメージです。

Viewer上では2つの入力パラメータを同時に動かして確認する事は出来ないので、
実際にアニメータで動きを設定して行きます。

**4）アニメータ上で風のパラメータを設定する**
物理演算のダミー入力として風のパラメータを作りましたが、
アニメータ上では通常通り？パラメータ設定をしていきます。
この際風（を模した物）の振幅は一定に設定しましょう。

![WS000002.JPG](https://qiita-image-store.s3.amazonaws.com/0/232924/94583f82-6971-2f80-b1a5-78edf6a4247d.jpeg)
(注意点)……この方法は風の表現を謳っていますが、Live2D上で使える物理演算は振り子（重力？）のシミュレーションモデルです。それをあくまでも擬似的に風の動きに当てはめている為、途中で風のパラメータの振幅が変わると自然に動いてくれません。シーンの途中で風が強くなって急にバタバタとはためき始める…などの表現をする場合は個別手動でパラメータ設定する必要があると思います。（この辺どなたかいいアイデアあったらこそっと教えて下さい…。)

今回は風に加えて通常の首の動きも入力に設定しましたので、
動きの確認用に、首の動きも設定しておきます。

入力用のパラメータ設定が完了したらアニメーションベイクも忘れずに！

**■適用例**
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ダミーパラメータを使った風の表現テスト<a href="https://twitter.com/hashtag/Live2D?src=hash&amp;ref_src=twsrc%5Etfw">#Live2D</a> <a href="https://t.co/eSsQSHttj1">pic.twitter.com/eSsQSHttj1</a></p>&mdash; aoneko (@_aoneko_) <a href="https://twitter.com/_aoneko_/status/959853828911767552?ref_src=twsrc%5Etfw">2018年2月3日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


…どうでしょうか？風で揺れている感じ＋首の動きに応じてそこそこ自然に動いてくれてると思います。
実際にはそれらしい動きになるまで、物理演算のパラメータの設定を何度も行き来してますが、
一度パラメータが決まってしまえば、今後のアニメーション作業の工数はかなり減らせる様な気がします。

皆さんも物理演算を活用してLive2Dでいろんなものを揺らしてみてはいかがでしょうか？
（くれぐれもアニメーションベイクは忘れ…ry)