Live2Dで翼を羽ばたかせよう！

こんにちは。
Live2DやE-moteを使って仕事をしているフリーランスのmakotok1です。

先日開催されたLive2D社さん主催のイベント「alive」に影響されて、なにかノウハウ的なものを書いてみたくなりました！
ということで、今回はLive2Dで作る翼の羽ばたきを解説します。

パーツ構成

羽を広げた状態と折りたたんだ状態の2種類の画像を作ります。
房ごとにパーツを分けましょう。

もっと大まかな状態でも出来ないことはないですが、全体的に大雑把な変形になり自然な動きにしにくくなるので、あまりオススメできません。
ここで手を抜くと、後々さらに大変なことになるので、涙を飲み込んで頑張っておきましょう。

PSDインポート・メッシュ設定

パーツ分けしたPSDが出来上がったら、Live2Dにインポートしてメッシュを設定してください。
このあたりの解説は、Live2D社さんが公式でアナウンスしているものがたくさんあるので、わからない方はそちらへGO！

パラメーター設定

パラメーターは３つ設定します。

1つ目のパラメーターには羽ばたきの動きを入れます。
パラメーターは範囲を「-1 ～ 0 ～ 1」で作成。
-1のときは翼を折りたたんだ状態、1のときは翼を広げた状態になるように作ります。

まずは【折りたたんだ状態のパーツ】を、0の時に動きの中間点になるように変形させます。

最初の関門です。自分のセンスを信じて、「これこそが中間画像だ！」という変形を頑張りましょう。
ちなみに、位置も重要になります。どちらかに偏っていたりすると、アニメーションがぎこちないものになってしまいます。

次に、【広げた状態のパーツ】を、先に変形した【折りたたんだ状態のパーツ】に重なるように変形させます。

見にくければ、【折りたたんだ状態のパーツ】は透明度をいじって見やすくしましょう。
形が完全に一致していなくてもなんとかなります。それよりも、大きさを合わせるようにしましょう。

【広げた状態のパーツ】と【折りたたんだ状態のパーツ】を切り替えるために透明度を設定します。

今回の例では、パラメーターの-0.1にキーを入れて、
【折りたたんだ状態のパーツ】は、0と1の時に不透明度を0％
【広げた状態のパーツ】は、-0.1と-1の時に不透明度を0％にしています。

【広げた状態のパーツ】を0の時に不透明度を0％にしていないのは、0の瞬間にどちらのパーツも消えてしまう状態を発生させないためです。

2つ目のパラメーターは、翼全体の拡縮を入れます。
パラメーターは範囲を「-1 ～ 0 ～ 1」で作成。
-1のときは全体的に縮んだ状態、1のときは全体的に伸びた状態を作ります。
今回は翼全体が入る1つのデフォーマで変形させています。

【広げた状態のパーツ】と【折りたたんだ状態のパーツ】で別の変形をつけることも出来ますが、モーションを作成する時に違和感が発生する可能性が大きいので、慣れてくるまでは、あまりオススメできません。
逆に言うと、慣れてきて仕組みを理解したあとであれば、個々に変形させることで、よりダイナミックな動きになる！……かもしれません。
（個人的には、やってみたところ、苦労の割にあまり大きな差異はなかったように思いますが…）

3つ目のパラメーターには翼全体の角度を入れます。
パラメーターは範囲を「-1 ～ 0 ～ 1」で作成。
今回は-1の時に25度、1の時に-25度を設定しています。

角度は好みで。
というより、最終的にどのくらい羽ばたかせたいかによります。
ただし、大きい数値を入れたからといって、ダイナミックな動きになるとは限りません。やりすぎると違和感が出まくるだけです。ほどほどに。

-1～0の角度と0～1の角度は同じ割合にしておきましょう。
違う割合にしてしまうと、モーション作成時に違和感が出る可能性が高くなり、後で苦労します

複製して反対側の翼を作る

今まで作った翼をそっくりそのままコピペ、反転させて、反対側の翼を作ります。

今まで作った翼のパーツの一番上に、回転デフォーマをつくります。
その回転デフォーマを右クリックして「子を含めて選択」
そのままコピー＆ペースト。
選択を解除せずに、Live2Dエディターのメニューから「モデリング」→「形状の編集」→「反転」。
表示されるダイアログは「水平方向に反転」のみチェック。
反対側の翼の完成。

正直、慣れてないと、ここが一番の山場だと思います。
慣れてると、何も考えずに当然のようにできるんですけどね。
どうなってるのか詳細が知りたい人は、「Live2D　反転コピー」等でググってみましょう！
先人の苦労の歴史が垣間見えるかもしれません。
どうしても出来ない場合は……片翼なんてのもかっこいいかもしれませんよ。厨二的に…。

モーション作成

最後にAnimatorでのモーション作成。

まずは1つ目の羽ばたきのパラメーターのキーフレームを設定しましょう。
基本的にマイナス値とプラス値を交互に入れ替えます。
等間隔ではなく、タメ・ツメを意識するのがポイントです。
1つ目のパラメーターの設定ができるとこんな状態に。

次に2つ目、3つ目のパラメーターを設定します。
1つ目のパラメーターのキーフレームから若干ずらした位置にキーフレームを打ちます。
イメージとしては、メインの動きである1つ目のパラメーターに若干遅れて追随するような感じでしょうか。
Animatorのキーフレームはいくらでも打ち直しができるので、何度も再生してみて、自分の一番気持ちがいい動きになるようにチャレンジしてみましょう。

すべてのパラメータを設定するとこんな感じになります。
1つ目の羽ばたきを設定したモーションよりも、ダイナミックさがまして抑揚も出るようになると思います。

最後に

ざっくりとした解説になりましたがどうだったでしょうか。
今回は正面の羽ばたきでしたが、角度のついたイラストの翼の羽ばたきも、またものすごく面白いので、興味を持たれましたら、是非チャレンジしてみてください！

では、また！