Live2Dで水滴を作る（解説）

〇この記事について

　「垂れて落下する液体」をLive2Dで表現する、という趣旨の記事です。こういうのが作れます。

Live2Dで水滴を作りました#Live2D pic.twitter.com/qFg5cmLnsY

— hino36 (@hino1296) August 26, 2021

・今回作ったデータをnizimaにて公開しています。

https://nizima.com/item/detailItem/24492

・かなり単純化したモデルでの説明になっています。また、少なくともLive2D公式のチュートリアルをやったことがある、くらいの知識がある人を対象としているので、用語の解説などはしていません。

・英語版はこちら (English version is here.)

〇自己紹介

　趣味で二次創作などをしています。立ち絵よりも一枚絵を動かしていることのほうが多いです。

〇パーツ分けについて（原画）

　落下する液体をモデル化したのが以下のイメージ図です。

■イメージ図とパラメータの割り当て

（前提）
・一つのパラメータのみを使います。なので、使用するパラメータについて、文中ではただ単に「パラメータ」と呼びます。

・パラメータの最小値は0、最大値は80、初期値は0のものを使用し、10刻みでキーフォームを打ち込む、という前提で話を進めます。

・また、文中で「パラメータ：数字」というような表記をすることがありますが、これは「パラメータがその数字のとき」を意味しています。例えば、「パラメータ：50」であれば「パラメータが50のとき」という具合です。

　大体の目安として、パラメータ：50~60くらいで水滴を分離させる感じにしたいので、イメージ図の①～②を0~50、②～③を50～80くらいになるようにします（下図）。

（※図中のPはパラメータを意味しています）

TIPS
水滴が分離するのは多少前倒しになってもいいと思いますが、パラメータ付けの時点でイージング（スローイン・アウト）をしておくとアニメーションを作る時だいぶ楽なので、40～60くらいで分離させるのが個人的にはオススメです。
（※イージングというのはざっくり言うと「緩急をつける」みたいなことです。ゆっくりと水滴が溜まっていって、あるタイミングで水滴が素早く落ちる、という動きを、そもそもパラメータを設定する時点で組み込んでおくと楽だよね、という話です）

■原画の作成

　以上を踏まえて、パラメータ：50くらいを想定して描いた原画がこちらです。

（なんかちょっとよくわかんない絵になりましたが、真ん中の半透明の部分が液体を表しています）

　AとBはそれぞれ以下のようになっています。「A」「B」は、それぞれ、イメージ図にある通り、Aは水が溜まるところ（上）、Bは落下する水滴のパーツ（下）となっています。

　実際のパーツ分けは以下のようになります。

TIPS
・動きの「途中」の原画を描くと動かしやすいと思います。また、Live2Dの場合、大きいものを縮小するのは楽ですが、小さいものを大きくするのは難しい場合も多いので、今回は、「A」と「B」がともに（ほぼ）最大になる、パラメータの数値で50くらいの感じで描きました。
・多少変でも大げさに描いておいた方がいい気はします（モデリングの段階で原画ごと修正することもできるので）
・原画によってはAとBの描画順を逆にした方がいいかもしれません

〇モデリング

・まず最初に、Aのパラメータ：0~50を先にモデリングして、Bのパラメータ：0~50を一つずつ合わせていきます。

・「A」も「B」も、とりあえず「標準」で自動的にメッシュを割りますが、線画の近くとかは適宜修正した方がいいです（後述）。

（メッシュを割りました）

・プリセットのパラメータ群は邪魔なので全て消して、新たに「水滴」という名前のパラメータを設定します（以後の文中の「パラメータ」は全てこの「水滴」パラメータを指します）。「水滴」パラメータの最小値は0、最大値は80、初期値は0です。「A」「B」どちらも10刻みにキーフォームを入力していきます。

（こういう風になると思います）

① 「A」のパラメータ：0~50を作る

※後で修正できるので、この段階で正確に作る必要はありません

　パラメータの値で「50」のときに原画の状態になることを想定しつつ、ひとまずAの方から、「0~50」のパラメータを埋めていきます。

　パラメータ：0の状態を最初に作って、パラメータ：50（原画の状態）との間を埋めていく、というやり方でやりました。ただ、パラメータが「0」のときの先端（AとBが繋がる部分）の形が崩れてしまい、手動で自然な形に復元していくのがちょっと難しそうだったので、「0～30」までは形状を都度コピペしながら「0」→「10」→「20」→「30」の順に作り、パラメータ：40の時だけは「50」の形状を元に作りました。
　こうすることによって際どい部分の変形を作らずに済むので（「30」→「40」の中割はソフトウェア側が生成してくれる）、結構難しそうな変形を上手いこと誤魔化す方法としては結構便利だと思います。

　実際の「A」のパラメータ：0～50までは、それぞれ以下のようになります。

（※図中のP：0、という表記は、「水滴」パラメータが0のとき、を意味します。以降もこういう表記をしています）
（※また、以降のスクリーンショットにも大文字のAとかBとかが描かれている場合がありますが、「これはA（またはB）についての図です」という意味です）

TIPS
この時のコツとしては、
・「動く場所(a)」と「それほど動かない場所(b)」があるので注意（下図を参照してください）。特に下の真ん中らへんの先端部分（AとBが本来繋がっている部分。図中の「a」のところ）は大きく動くので、周り（図中の「ｂ」のところ）の動きはそこに合わせていく。
・「一つ前のパラメータ」と「一つ後のパラメータ」へ遷移するショートカットキーの設定が出来るのでしておいた方が便利（僕はテンキーの4と6にそれぞれ割り振っています）

② 「A」の動きに合わせて「B」を動かす

・その前に、自動分割したメッシュが線画から離れすぎていてやりづらいので割り直す

（図の右側のようにします。メッシュの自動接続を忘れないようにしましょう）

・動かす前に変形パスを導入します。Bは基本的に、変形パスを使ってシルエットを重視しながら変形させていきます。

TIPS
変形パスと線画をなるべく正確に一致させておいた方がよいです。また、コントロールポイントはなるべく少なめの方が動かしやすいと思います。線画のない上部に関しては適当でいいですが、隣接するコントロールポイント同士は影響を及ぼし合うので、線画のある部分の形が崩れないようにしましょう。
（※変形パスはそれ自体に弾力性があるため、特に球形のものを動かすときは破綻もしづらいので便利）

・「B」を、パラメータ：50→40→30・・・の順に作っていきます。
　パラメータ：50~30まで作った様子が以下。

・パラメータ：30のところで破綻しているので修正します。

・「B」のパラメータ：20→10→0、を引き続き作っていきます。
　パラメータ：20についても同様に、破綻した点は一個一個直していきます。

・パラメータ：10、0についても同様に作っていきますが、「10」のとき不透明度を70くらいに、「0」のとき不透明度を0にしてフェードインするようにします。

・とりあえず0-50まで打ち込んだのがこちら。

TIPS
（必要があればこの時点でパラメータ「0」から「50」までの動きを修正しますが、今回は割愛します）

③ パラメータ：50-80の部分を作る（水滴が落下したあと）

・「B」の方から動きを作っていきます。「60」→「70」→「80」の順に作ります。

・パラメータ：60では、「B」の上部を繋げるのと、少し縦方向にも引き延ばします。

大体こんな感じになっていればいいと思います

静止画の状態では多少崩れていても大丈夫です

・パラメータ：70では画面外に消えていきます。パラメータ：50-70までの大まかな位置は以下（80は画面外にあれば適当でいい）。

TIPS
重力加速度があるので、パラメータ：50-60間の距離よりも60-70間の距離を大きくする。最低でも等間隔くらいにしましょう。

・Bは完成しました

・「A」のパラメータ：50-80は、水滴が落ちた反動を打ち込んでいきます。
「B」と同様に、「60」→「70」の順に作っていきます。「80」の時は「0」の時の形状をコピペするとループが綺麗になります。

・ひとまず完成しました。少し形を整えたりしたのがこちら

④ 修正

　パラメータ：30くらいの時、「A」と「B」が重なっている部分がかなり濃くなっているのが気になるので、クリッピングマスクを使って「B」の方だけを消すことにしました。

　Live2D側の「画像を統合」で出力したパラメータ「20」と「30」の時の画像を下書きにしてマスクのパーツを描きました（あとでLive2D側でマスクの不透明度を0にするので、色はなんでもいいです）

（原画の状態です）

　「B」にクリッピングマスクの設定と「反転」を適用させます。

（マスクの箇所が透過されているのが分かると思います）

　マスクのパーツもパラメータに応じて変形させつつ、完成したのがこちら

⑤ アニメーション作成

　Live2DのAnimationモードでアニメを作っていきます。

　最初の方に書いた「イージングをやっておくと便利」というのは、最初と最後にそれぞれ「0」と「80」の2点を打ち込んだだけでもそれっぽく見えるっていうことです。

　ちょっとタメてる感じが欲しかったので調整したのが以下。これで完成です。

〇あとがき

・3DCGと比較してエフェクトの類は表現しやすい可能性があるなと思いました（諸説）。

・正直Live2Dは元のイラストの画力依存なところはあるので、画力の高い原画があればもっとよくなるとは思います（超美麗な水滴が超美麗なまま落下するところを想像してみてください）。

・さらに「Live2Dでのエフェクト」について言えば、ひょっとするとBB素材のようにして使ったり、配布したりすることができるかもしれません。このことは、個人が勝手に作った成果物を共有することができる、という状況を意味しており（これは本当にすごいことです）、例えば、ペイントソフトでは他の人が作ったブラシとかをダウンロードして使うことができたり、MMD界隈ではモデルやモーションが配布されていますが、それと同じように、Live2Dでも外部からエフェクト素材を入手してきて、Animatorで取り込む、ということができるようになるかもしれません。
（・・・とはいえ、根本的には個々のLive2Dモデルに合わせて素材を調整する必要があるので、その辺をどう解決するのか、ということには多分課題があります。）

　以上で終わりです。解説記事を書くのは初めてだったので、分かりづらい箇所もあるかと思いますが、最後までお読み頂きありがとうございました。