【Live2D】スキニング機能を試してみた

###【自己紹介】
こんにちはaonekoと申します。m(_ _)m
最近Live2D関連いじっていまして、
個人的な備忘録+誰かしらのお役に立てればという感じでちょこちょこ
記事を投稿して行ければと思っています。
アウトプット大切。あと筋トレも大切。（片言の日本語で）

Live2D制作用のイラストは、以下で無料公開されている素材をお借りしています。
[ジュエルセイバーFREE http://www.jewel-s.jp/]
 ※余談ですがイラスト描けないけどLive2D触ってみたいって人は
　ここおすすめですよ。

#-スキニング機能って？
Live2D Cubism3.1で新たに追加された機能で、
髪の毛などを滑らかに動かしたい（揺らしたい）ときに、
少ない手数で実現できます。

これまでは髪の毛揺らしたりするの結構大変だったので、
かなり手数少なく髪揺れが実現出来るようになったと思います。
ただあくまで手段の一つなのでやりたい事に応じて選択するといいかもです。

詳しくは公式のドキュメントを参照してもらえると良いと思います。
[CubismEditorマニュアル　スキニング（β）](http://docs.live2d.com/cubism-editor-manual/skinning/)
この記事はあくまでも実際に試してみた個人的な備忘録です。。

#-設定まで
・揺らしたいメッシュ選択
・変形パスツールを設定
・メニューから[モデリング]⇒[スキニング]⇒[変形パスからスキニング(β)]

　※この段階で、元のメッシュがコピーされて（元のメッシュは非表示になって残っている）、
　　スキニング用の新しいメッシュが生成されます。メッシュは回転デフォーマの数だけ
　　自動で分割され、またグルーで自動的に頂点が保管された状態で生成されます。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【Live2D】スキニングの設定まで <a href="https://t.co/NM078fhBka">https://t.co/NM078fhBka</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; aoneko (@_aoneko_) <a href="https://twitter.com/_aoneko_/status/957602938557362176?ref_src=twsrc%5Etfw">2018年1月28日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#-動かしてみた（手動）
スキニングの設定後にアニメーションつける方法は、
物理演算利用する方法と手動でアニメーション付ける方法、
あるいは２つ組み合わせる（物理演算後に手動で微調整する）方法があると思います。

この辺まだ中の人は色々と試せてないので、
まずはざっくり手動で動かしてみたバージョン。

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【Live2D】スキニング（手動で動かしたもの） <a href="https://t.co/qNIhLSPFuv">https://t.co/qNIhLSPFuv</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; aoneko (@_aoneko_) <a href="https://twitter.com/_aoneko_/status/957604141089505283?ref_src=twsrc%5Etfw">2018年1月28日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

今回は回転デフォーマ10個になっていますが、もう少し少なめでも良かったかも。
パラメータ多いのでぱっと見、作業量多そうに見えますが、
揺れ物など周期的な動きするものは、基本の動き付けてから、
周期をずらしつつ頂点コピペしていけば結構それっぽく動きます。

#-動かしてみた(物理演算）
facerig使ったり、unity上で直接動かすような場合はこちらが本命でしょうか。
PVなどの動画用途だと、物理演算でざっくり動きつけた後に、
手動で調整するやり方もあると思います。

・動かしたいメッシュにスキニングまで設定
・メニューから[モデリング]⇒[Viewerを開く]

でViewer画面を開きます。

・物理演算タブで新しいグループを「追加」します。
　　-名前 : 任意
　　-入力のプリセット : 今回は拙作モデルの胴体の動きを入力に設定しました。
　　-物理モデルのプリセット : 10段　（ここは動かすものに応じて選択）

　　![WS000000.JPG](https://qiita-image-store.s3.amazonaws.com/0/232924/d9513ebc-b1aa-29d1-d304-5a4eaa985b3d.jpeg)

・出力設定タブの「追加」
・スキニング設定で追加されたパラメータを一括で選択

　　![WS000001.JPG](https://qiita-image-store.s3.amazonaws.com/0/232924/0b5c3116-f80e-b4e4-0130-ec33aaa2c859.jpeg)

ここまでで基本設定は完了なのですが、
現状だと物理演算の出力の係数？が低くて全然動かないので、

・出力設定の「倍率」を一括で20くらいに設定します。

　　![WS000002.JPG](https://qiita-image-store.s3.amazonaws.com/0/232924/eacfa064-5a0f-61c4-3e26-a282e547fba3.jpeg)

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">【Live2D】スキニング（物理演算で動かしたもの） <a href="https://t.co/RkygyVbi2J">https://t.co/RkygyVbi2J</a> <a href="https://twitter.com/YouTube?ref_src=twsrc%5Etfw">@YouTube</a>さんから</p>&mdash; aoneko (@_aoneko_) <a href="https://twitter.com/_aoneko_/status/957604219728535553?ref_src=twsrc%5Etfw">2018年1月28日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

んー、ここまでの設定だけで髪揺れの動きが簡単に実現出来ますね。。
現状だとやや揺れが柔らかすぎるので物理演算機能の細かいパラメータの設定は、
追々いじり倒してみたいと思います。