Help us understand the problem. What is going on with this article?

Live2Dで胸揺れ物理演算してみる

More than 5 years have passed since last update.

Live2Dには、モデリングソフトとモーション付けソフトの他にLive2D ViewerというFlash製の動作確認ツールがあります。
Viewerを使うと髪揺れなどの物理演算の値を簡単に編集できます。

Live2Dのワークフロー

Unityに組み込む時のワークフローとしてはこんな感じです01.ワークフロー.png

モーション付けソフトでも作れますが、Unityなどでインタラクティブな胸揺れする場合は物理演算を使うと便利かと思います。
ぶっちゃけ言うとモーションファイルや物理演算ファイルは、サンプルモデルから流用してもOKです。
サンプルの物理演算ファイルに、胸揺れがなかったのでさせてみました。

準備するもの

Modelerソフトのメニューからmocを書き出して、mocファイルをViewerにドラッグ&ドロップします
(moc出力したフォルダでもjsonファイルをドラッグ&ドロップしてもOKです)
 ※ 書き出しはModelerの[ファイル]-[mocファイル書き出し]からできます
 02.書き出し.png

物理演算のやり方(髪揺れ)

まずは髪揺れの物理演算の仕方です。

1)物理演算ファイルを追加します
03.髪揺れ.png

2)マウスドラッグすると髪揺れします
04.髪揺れ動作.gif

3)物理演算ファイルを保存すれば、UnityなどSDKで使えます
05.保存.png

髪揺れの仕組みですが、Viewerで物理演算のファイルを選択すると前髪、横髪、後髪の選択リストが出ます。
06_リスト.png
ざっくり言うと入力でセットしたパラメータを動かした時、出力でセットしたパラメータが動きます。
07_入出力.png
入力の影響度は、一番下の行から揺れ具合を計算していきます。
一番下の行が1=100%とし、上の行で0.5を掛ける事により2つのパラメータをそれぞれが50%ずつ影響する計算になっています。
詳しくはLive2D Manualの01.物理演算の設定を見てみて下さい。

物理演算のやり方(胸揺れ)

では胸揺れをさせていきましょう!

1)胸揺れ用の新しい項目を追加します
08_項目追加.png

2)簡単設定にチェックを入れ、簡単な物理演算設定をします
09_簡易設定.png
 参考ページ:Live2D Manualの02.物理演算の簡単設定

3)値を修正しつつ、Viewerで動作確認します。値はこんな感じで10分程度でできました
10_パラメータ.png

4)Viewerでmocファイルを選択すると、パラメータ操作ができます
11_確認.gif

5)あとは物理演算ファイルを保存して、UnityのLive2D SDKサンプルのDemoプロジェクトでファイルを変えれば完成です!
12.png

あとDemoのソースを見るとわかりますが、L2DPhysics.csを参照する事でメインソースでは以下の4行で物理演算が簡単にできます。
using live2d.framework;
private L2DPhysics physics;
if (physicsFile != null) physics = L2DPhysics.load(physicsFile.bytes);
if (physics != null) physics.updateParam(live2DModel);

本業じゃないので揺れ具合が甘いですが、とりあえず簡単にできました♪

naotaro0123
Webエンジニアです。BlenderとWebGLと漫画が大好きです ◆ソース http://github.com/naotaro0123
http://ameblo.jp/chicktack123/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away