Live2DでアニメーションGIFを作った

作りました。

　PCに向き合い続け、まるでテレワークです。青魚です。
　昨日、Live2Dを触り始めたといった内容の投稿をしました。今日はその続きです。ほぼ半日触っていると慣れてくるもので、先ほどアニメーションの作成を終えました。用途は配信中に画面隅に置くことしか想定していないので、バストアップしかまともに作っていません。だいぶ理解を深めたと思うので、制作過程などをおさらいを兼ねてまとめていこうと思います。なお、超の付く初心者であり解説を目的とした投稿ではないです。

顔にパラメーターを設定する

　とにもかくにも顔をぐるぐる動かせるようにならないと人間らしい挙動は夢のまた夢です。前回、目にパースをつけすぎたせいで浮いて見えてしまった、という話をしました。直したので比較を置いておきます。

　左を向いた時の違和感がほとんどなくなったのがわかると思います。うっすらと見えてるデフォーマ―の輪郭（重なってる四角の枠）を見ると、同じ向きでも二枚目のほうがほとんど傾き(パース)がないのが見えるんじゃないかな…。

　両目のデフォーマ―です。向かって左の目に若干、右にはほとんどつけてません。顔の輪郭のデフォーマ―の形に合わせて目を動かすと不気味になります。
　目は「上睫毛」「追加睫毛(上の睫毛のバサバサしてるところ)」「横睫毛」「下睫毛」「上睫毛ハイライト(上睫毛の輪郭に引いてある水色の線)」「瞳孔」「瞳孔ハイライト」「隈」「白目」の9パーツに分けました。瞳孔を白目にクリッピングし、瞼からはみ出さないようにし、各パーツに開閉のパラメーターをつけていきます。目を見開く挙動もさせたかったので、デフォルトの開きを0.8に設定し、閉じた時を0、開く最大値を1.0にしました。あと、上のタブのモデリング→パラメーター→パラメーター設定からデフォルト値を0.8に設定しなおしました。

　ちなみに瞳孔と目のハイライトを白目にクリッピングしており、それ以外とデフォーマ―を分けています。これが構成です。(左追加だけまつげが漢字なの気になるな…)

　分けた瞳孔と白目には目玉X.Yのパラメーターを付与します。
　目ができると製作のモチベーションが上がる、というのもあるんですが、パーツが大きくわかりやすい指標になるので目から先に作るといいと思います。

　次に鼻を作りました。顔の傾きをわかりやすくする一番のマーカーになると思います。目で決定し鼻でくっきりさせる感覚です。顔自体を大きく動かすと破綻するので鼻を少しオーバーに動かして「横を向いてる感」を出しました。出せてるかな…。公式のチュートリアルにも書いてあったと思いますが、鼻筋をしっかり描くのはあまりおすすめしません。

　次に口です。きれいな三角形よりもにへらっと笑う感じにしたかったので、口の端を細かく調整しています。閉じた口を描いたらそれをコピペして下の口部分を作り、口内を隠すように上下を肌色で塗っています。アートメッシュはこんな感じです。正三角形を作るようにパスを引くといいらしいですが、技量がないので汚いです。
　歯が下の歯なのは性癖です。ジブリの制作秘話みたいな番組で見ましたが、上の歯がくっきり描かれていると意思が強そうに見えるらしいです。なので弱気な子や儚げな子には似合わないかもしれません。

　この調子で他のパーツにもデフォーマ―を作り、パラメーターを設定していきます。基本的にはこれの繰り返しです。おそらくですが、デフォーマ―の操作と調整に慣れたら一番頭を悩ませるのがデフォーマ―の管理だと思います。かなり苦しみました。
　どこのサイトを見てもあらかじめ基準面というものが設置してある、あるいは作れるというようなことが書いてあるのですが、どうやっても作れなかったので無理やりすべてのパーツを選択し「全身」という名前で曲面のデフォーマ―を作っています。「全身の曲面」デフォーマ―(親)の中に「顔の曲面」「身体の曲面」デフォーマ―(子)を格納したかったからですね。

　パラメーター基準で見ていくと、

角度X・Y……………......…すべてのパーツ
左目右目開閉/笑顔……左目・右目パーツ
目玉X・Y……………......…瞳孔とハイライト
左・右眉変形……........…左・右眉
口開閉……………….…….…口パーツ
呼吸…………………...…...…上半身のパーツ
髪揺れ横…………….......…髪のパーツ

　をそれぞれ設定しています。これ以外のパラメータ―は作成していません。表情が豊かな子ではないので眉をほとんど作っていないのが理由ですが、眉用に元から作られているパラメーターはほかにも左右で各3つずつあります。
　あと、個人的にわかりやすくするために「顔揺れ」というパラメーターを-30.0.30で作り、顔を正面に向けたまま左右に振る挙動をつけています(つまり「吹 っ 切 れ た」)。髪揺れ横にはこの動作に呼応するような髪の挙動を付与しています。
　呼吸は上半身に作ったデフォーマ―をうっっっっすら上下に動かします。動かしすぎると息切れになります。

　今回、差分として眼鏡を用意しました。これは作画によると思いますが、眼鏡に反射を描画する場合は、眼鏡本体と分離してパーツを用意し顔の動きと逆に動かすとリアリティが出ると思います。

　GIFでは左右の反射光の可動域が違うのがわかると思います。眼鏡のフレームとレンズのレイヤーを分け、反射光をレンズにクリッピングするときれいに動くんじゃないかな…。弦がないのは仕様です。ないほうがかわいかったので。

　これからGIFを作りますが、その前の下準備としてモデリング→パラメーター→まばたき・リップシンク設定から、まばたき欄の左・右目の開閉ボックスにチェックして保存してください。アニメーション作成時に必要になります。

GIFを作る

　すべてのパーツにパラメーターを付与しました。ファイル→新規作成→アニメーションで作成画面に移ります。保存した.cmo3データをドラッグし読み込むと、モデルと枠が出てくると思うので、この枠のサイズを使用するモデルの範囲に合わせて変更します。インスペクタのタブにあるサイズ(幅)、(高さ)で変更できます。今回はバストアップのみ使用とすると決めていたので、1500×1500で作りました。サイズによりけりなのでちょうどいい大きさはモデルによりけりです。

　一番最初にまばたきを作りました。これがないと不気味ですね。タイムラインに紫で表示されているファイル名の左の▼をクリックすると格納されている緑色の「まばたき」が出てくると思うので、それも展開します。まばたきと効果の2つラインがありますが、まばたきしか使いませんでした。効果の使いどころさんわからなかったな…。

　文での説明が難しいので図解します。

　まばたきのラインにキーフレーム(黒いドット)を打っていきます。まばたきを１.00にすると基準値、0にすると最小値(閉じた状態)になります。なので、まばたきを開始したい場所にまばたきの始点(1.00)を置きます。これがないとタイムラインの初めからゆっくりと閉じ続けていくことになります。比較です。上が視点を打ってない方になります。

　つまりまばたき1回で3回、連続で2回なら5回、連続3回なら7回キーフレームを打つことになります。基本的に挙動を切り替えるタイミングで始点を打たないとゆるやかに動き続けることになります。逆に言えば、頭や体など常に揺れていてほしいパーツには必要がありません。

　アニメーション作成は明確な動きを考えていなかったので見る方向も頭の動きもふわふわしています。ゲーム中の立ち絵を想定しているので若干左方向を向いています(まっすぐこっちを向いてゲームしているのは怖いので)。強いていうなら、頭の向きが切り替わった時に瞳孔も同じ方向を向くようにするといいんじゃないでしょうか。あと呼吸はフレームの間隔が短いとこれも息切れしてるみたいになるのでゆっくりでいいと思います。2：20ごとに打ちましたが適当です。

　できたGIFがこちらになります。

　およそ13秒のループGIFです。うるさくなりすぎないようにしつつ、髪の毛の動きが見えるくらいの挙動を目指しました。見返してみるとまばたきの目を閉じる間隔がもう少し短くてもいいかもしれません。

　元原画のラフを作ってからおよそ1週間、Live2Dに触ってから4日でここまでできればまあなかなかだと思います。最後の最後で注釈を入れますが、今までのやり方は初心者が特急で仕上げたものであり、用語ややり方が間違っていたり、もっと効率よく簡単にできる方法があるかもしれません。備忘録程度によろしくお願いします。
　Live2Dが予想以上におもしろかったのでこのモデルのSDVerなんかを作ってみても面白いかもしれません。作ったら適当にまた投稿します。それでは今回はここまで。