【Cubism2.1】FGOバトルキャラ風Live2Dモデルの作り方【後編】
どうも、カワナミです。
さて、早速後編いってみましょう！後編って何のこと？と思った方は前編記事から読んでね。
FGOバトルキャラ風Live2Dモデルの作り方【前編】 - Live2Dとか
目次は以下の通り。
Live2Dモデリング - 2.可動域の設定
やっとです。やっとLive2Dらしいことをします。お待たせしました。前編で散々整理整頓したパーツに動きをつけていきましょう。まだソフトはModelerのままです。
今まで「動きをつける」と言ってきましたが、これは要するに「可動域を設定する」ということです。「この腕のパーツはここからここまで動くようにする」「髪の毛の揺れで変形する幅はここからここまで」などなど。特殊なパラメータの場合はこの限りではないですが、やること自体は変わりません。
デフォーマについて
可動域を設定するにあたり、頻繁に使用するのが「デフォーマ」機能です。この機能のおかげで、ポリゴンの頂点を１つ１つ動かして変形…という作業を一気に圧縮することができます。デフォーマには「曲面デフォーマ」「回転デフォーマ」の２種類があります。特徴は下記の通り。
- 曲面デフォーマ：パーツを格納してポリゴンを変形させることができる箱みたいなデフォーマ。八ツ橋のあんこをパーツ、皮を曲面デフォーマとして、皮ごと引っ張ると中のあんこも変形されるぜーイェーイみたいなイメージです。前編でポリゴンの整理をしたのは、あんこを柔らかくするための作業です。
- 回転デフォーマ：主にパーツの関節部分に付けて位置や角度の動きを設定できる杭みたいなデフォーマ。関節が動く紙人形のピンみたいなイメージです。
▲左が曲面デフォーマ、右が回転デフォーマ。
曲面デフォーマは四隅や十字状に並んだ小さな四角、回転デフォーマは線の先についた丸を動かすことで変形や移動・回転を行います。曲面デフォーマの場合、周りの赤い枠をつかむことでデフォーマ全体の大きさや形を変えることもできます。
デフォーマは入れ子構造にすることでその本領を発揮します。今回のバトルキャラ風モデルだと、回転デフォーマの先にさらに回転デフォーマをつける、という使い方が一番多いかもしれません。
▲曲面デフォーマの中に曲面デフォーマの入れ子構造。親の変形が子にも影響してるのがわかります。八ツ橋の中にちび八ツ橋ですね。お腹すいてきたな。
▲回転デフォーマの先に回転デフォーマの入れ子構造。腕を曲げたり脚を曲げたり。
以上のような曲面同士・回転同士の入れ子構造のほか、曲面の中に回転、回転の先に曲面、という入れ子構造ももちろんできます。ただしその場合、「回転デフォーマを一度挟むと、その先の曲面デフォーマには変形が影響しない」という仕様が出てきたりします。
この仕様、今回はほぼ使いませんが、結構利用できるので覚えておきましょう。前にパーツを360°回転させる方法を解説したことがあるのですが、そっちでもこの仕様を利用しています。
Cubism Modelerでぐるぐる動かせる球体を無理矢理作ってみる - Live2Dとか
デフォーマの設定
肝心の設定方法ですが、画面上側にある「デフォーマを作成」ボタンを押すことで設定ウィンドウが開きます。デフォーマに入れ込みたいパーツをクリックした状態でボタンを押すと、自動でパーツを入れ込んだ設定にしてくれるので便利です。後からパーツを入れ込むこともできるので、まずは空のデフォーマをちゃっちゃと作ってもいいです。
▲前編で使ったテクスチャ編集ボタンの隣。
▲こんなウィンドウが出てきます。パーツをクリックした状態でこのウィンドウを出すと、一番下の「選択オブジェクト〜」にチェックマークがつきます。いろいろ設定した後にOKを押すと、デフォーマがポンと現れます。
「名前」はそのままデフォーマの名前。後から困らないようにわかりやすい名前をつけましょう。「挿入先のパーツ」は、デフォーマをパーツパレットのどの項目に所属させるか、です。前編の整理整頓同様、関連した項目に入れておきます。「所属するデフォーマ」は、入れ子構造を設定する部分。親にしたいデフォーマを選びます。入れ子構造を作る時は、親から子がはみ出ないように注意しましょう。
上の画像に出ている「- 基準面 -」というのはどこにも入れ込まれていない状態のことです。この３つは後から変更可能なので、サクッと設定しちゃいましょう。
▲前編で登場した画像。この＜デフォーマ＞という項目の中に格納されます。所属を適当にすると困るのでサボらずに設定しましょう。
「デフォーマのタイプ」は後から変えることができません。回転を作るか、曲面を作るかは最初に決めておくといいです。ちなみに設定中にタイプを変えると、名前が「◯◯の曲面」「◯◯の回転」というデフォルト名に書き換わってしまうので、最初にタイプを決めてから名前をつけるとスムーズです。
「ベジェの分割数」「変換の分割数」は今回は割愛。デフォルトのままで大丈夫だと思います。回転デフォーマの場合はそもそも設定しません。
既に作ってあるデフォーマに後からパーツを入れたい時、また、デフォーマの設定を後から変えたい時は、前編のパーツの整理でも使った「編集」パレットを使います。
▲パーツを入れ込みたい場合。前編で使った「パーツ」のプルダウンの下、「デフォーマ」のプルダウンから入れ込みたいデフォーマの名前を選びます。名前を適当にしてるとここでめちゃくちゃ選びづらくなるぞ。
▲デフォーマの設定を変えたい場合。赤枠で囲んだ部分で変更できます。IDというのは今回は気にしなくて大丈夫。
作ったデフォーマが小さすぎた！大きすぎた！角度がおかしい！でももうパーツが入ってて大きさや角度を変えるとパーツまで変形されちゃうよ…という時は、Ctrl（Macの場合はcommand）を押しながら変形してみましょう。幸せになれるぞ。
パーツを直接変形させるのはダメなの？
わざわざデフォーマに入れ込まなくても、ポリゴンの頂点を直接動かして変形させれば事足りるじゃん！と思うこともあるかもしれません。
パーツを直接変形させることももちろん必要です。今回のモデルでもいくつかのパーツは直接変形で可動域を設定しています。ただデフォーマには「パラメータの集中を防ぐ（後述）」という役割があったり、大量のポリゴンが割り振られたパーツの場合、デフォーマなしでは滑らかに変形させることが難しくなります。
付けるパラメータ（後述）の数が１つ、かつデフォーマではなかなかできない細かな動きが必要な時以外、基本的にパーツは曲面もしくは回転デフォーマに入れ込みましょう。
▲袖の揺れの変形。デフォーマを使えば少ない手数で滑らかに変形させられます。
▲直接変形だと試行錯誤しまくった挙句こうです。アイエエエエ！ポリゴン！？ポリゴンナンデ！？と叫んだあとに爆発四散して死にます。
と、まぁこんな感じでデフォーマを作ってどんどこ入れ子構造にしていきましょう。肩から腕、腕から手首…と、お人形を作るような感覚で入れ子を設定していくとわかりやすいかと思います。ていうかLive2Dモデル自体デジタルお人形みたいなものです。
作っていった結果がこちら。
▲ほとんどが回転デフォーマ。袖・裾はポリゴンが多いので、曲面デフォーマで揺れの変形をつけます。結んだ髪の揺れ変形はポリゴンが多いにも関わらず直接変形なのですが、やり方がちょっと特殊なので別途解説します。
パラメータを付ける
前編でも出てきたパラメータですが、ここでようやく本来の機能を使います。点に変形を覚えさせてうんぬんと前編に書いていたのを覚えていますでしょうか。では実際に、これまでで作ったデフォーマやパーツの変形をパラメータに覚えこませていきましょう。へっへっへ！二度と変形を忘れられないカラダにしてやるぜ！（？）
まずは変形させるデフォーマ、もしくはパーツをクリックしてから、「これは君が覚えてくれたまえよ」と思うパラメータの名前部分をクリックします。
パーツをクリックできるモードとデフォーマをクリックできるモードがあるので、使い分けていきましょう。もちろんパーツパレットから選択してもOKです。
▲画面上にボタンがあります。
▲パーツを直接変形させるときはパーツ、それ以外の時はデフォーマ。
▲こんな感じのウィンドウが出てきます。
ウィンドウ右上の目盛りに、変形を覚える点をクリックで打っていきます。ただ、３点もしくは２点がほとんどなので、「３点挿入（両端と真ん中）」「２点挿入（両端）」ボタン一発で打っちゃうことが多いです。腕振りや髪揺れといった振り子状の動きをするものは３点、まばたきなどON・OFF切り替えのような動きをするものは２点といった感じ。
OKを押すと、パラメータに緑の丸ができます。これが「最初にクリックしたデフォーマもしくはパーツの変形を覚える点」です。真ん中の丸のみ赤く囲まれていますが、これは「赤い丸が緑の丸の下にある」という認識でいてください。
▲今回は腕なので３点挿入。緑の丸が３つできました。
▲赤い丸をつかんでドラッグすると、線の上をスライドさせることができます。この赤い丸の位置が、現在のパラメータということです。あれです、放送室の機材についてる音量調節する上下に動かすレバーみたいな…カラオケルームの微調整できる電灯のレバーみたいな…そういうのを想像してもらえればいいかと。
よぉし！真ん中の点をデフォルトの状態として、パラメータの右側（＋）を上に振る可動域、左側（−）を下に振る可動域にしよう！などなど、パラメータのどっち側をどの方向の可動域にするか心に決めたら、赤い丸をエイッと端の点まで動かします。右クリックで点に吸着するので、ミスを減らすためにも点のそばで右クリックしときましょう。
赤い丸を点の位置に置いたら、今度はデフォーマをいじって変形させます。「可動域の限界」の状態を作りましょう。
▲上の可動域の限界はこの辺じゃ！うりゃー！
▲ｳｯﾋｮｧｧｧ（ﾌﾞﾝﾌﾞﾝﾌﾞﾝ)
すると大変便利なことに、点同士の間の動きをソフト側で補完してくれます。この調子で他のパーツやデフォーマの可動域をいろんなパラメータに覚え込ませていきましょう！…というところなのですが、ここで大変重要な注意点があります。パーツを直接変形させるのはダメなの？の項目でも出てきた「パラメータの集中」についてです。
【注意！】パラメータの集中について
パラメータ側に覚え込ませるパーツやデフォーマの数に制限はほぼありません。「腕を曲げたときに指や袖も一緒に動かしたい！」という時は、指や袖の変形を腕と一緒のパラメータに覚え込ませればいいだけです。もちろん数が多いとそれだけ気にしなければならないことも増えますが…
しかし、１つのパーツ・デフォーマに対応したパラメータはかなりの例外を除いて最大３つまでとしてください。システム的には4個でも5個でもできますが…お前…死ぬぞ…！
まぁこれだけだと「わかんないや」という方がほとんどだと思いますので、以下の図をどうぞ。
▲まずパラメータ１つ目。左右の揺れ。これは何の問題もありません。
▲パラメータ２つ目。上下変形。一見大丈夫そうに見えますが…
▲う、動かない…！？左右の揺れパラメータを１（右端）にした途端、上下に変形しなくなってしまいました…。
実は、同じパーツもしくはデフォーマにパラメータを２つ以上対応させた場合、「パラメータAが１の時のパラメータBの１」「パラメータAが−１の時のパラメータBの１」…など、パラメータの点それぞれの組み合わせ全ての変形を覚え込ませなければならないのです。
つまり上の画像の場合、「左右の揺れパラメータが１（右端）の時の上下変形」を別でつけていないので、動かなくなってしまったというわけ。
▲３点パラメータが２つ、３×３＝９通りの変形が必要。
ちょっと計算してみましょう。２点パラメータが３つであれば２×２×２＝８通り。うん、まだいけそうですね。じゃあ３点パラメータが３つだと…３×３×３＝２７通り。これ以上増やすとどんどん倍で増えます。マゾでもない限りやめましょう。
「えっ、でも複数パラメータつけたいよ…」という方、ご安心ください。ここでデフォーマの入れ子構造を利用しましょう。
上の例を解決しようとするのであれば、左右の揺れ用デフォーマと上下変形用のデフォーマを別で作り、上下変形（親）＞左右の揺れ（子）＞パーツの順で入れ子にした後、それぞれにパラメータをつければ大丈夫です。
このようにパラメータを分散させる役割もデフォーマにはあるわけです。積極的に使ってラクをしましょう。
特殊な変形方法
デフォーマのありがたみがわかったところで、特殊な変形方法についても紹介しておきます。今回のサンプルですと、「まばたき」と「結んだ髪の揺れ変形」がそれにあたります。
まばたき
前編でも書いたように、FGOバトルキャラのまばたきは２コマです。滑らかにまぶたが降りてくるのではなく、開いた目と閉じた目の画像を切り替えることでまばたきを表現しています。
Live2Dで画像切り替えを再現するにはどうすればいいのか？ということですが、そこまで難しくありません。
▲まばたきは通常２点パラメータですが、開き目・閉じ目のパーツにそれぞれ１つずつ点を打ちましょう。
▲こんな感じになっていればOK。途中で目が消えちゃってますが、後でうまいことやるので大丈夫。
あえて点同士の補完をなくすことで、画像の切り替えを再現しています。不透明度をいじるやり方もあるのですが、今回はこっちで。
結んだ髪の揺れ変形（変形パス）
髪の毛のようなパーツをくねくねと曲がるように変形させるのに、デフォーマでは難しい場合があります。そんなとき役に立つのが変形パスです。
▲画面上の右端にあるペンのボタンが「変形パス」。
くねくね曲げたいパーツをクリック後、変形パスボタンを押してカーソルをペン型にして、パーツに芯を作るようなイメージでちょんちょんとクリックしていってみましょう。このとき、最初にパーツをきちんとクリックしていないと変形パスが反映されないので忘れないように。
▲こんな青い線ができてきます。点の数は少なめのほうが滑らかに変形しやすいかも？
▲パーツモード（画面上の白矢印が描いてあるボタン）にして点を動かしてみるとこの通り。うねうねしてるぞ！
こうして作った変形パスをパラメータに覚えさせることで、髪の揺れを作ることができます。ただちょっと癖がありまして、変形パスを覚えさせる時は、それが反映されたパーツも一緒に選択して覚えさせてください。変形パスのみ、反映されたパーツのみだと、手直しができなくなったり、うまく動かなかったりします。
ここまでくればもう大丈夫。今度こそ、可動域をパラメータに覚え込ませていきましょう！どんな風に動かすかを妄想しつつ、シコシコ進めていきます…。ずっとポリゴンやデフォーマと戦っていると白目を剥きそうになるので、適度な休憩も大事です。
そして出来上がったものがこちら。
▲髪の根元に回転デフォーマをつけて全体を揺らせるようにしつつ、毛先は変形パスで曲げて…揺れものは１部品ごとにパラメータを作ってバラバラに揺らせるように…などなど。達成感もひとしお。あとは動かすだけ！
モーション付け
お世話になってきたModelerからついに離れ、Animatorへとバトンタッチします。Modelerデータはちゃんと保存しておくのよ！
Animatorを開くとプロジェクト選択の小窓が出てくるので、「新規プロジェクト作成」を選びましょう。「シーン名」やら「フレームレート」やら出てきますが、「シーン名」以外はデフォルトのままで大丈夫かと。「シーン名」は好きにつけちゃってください。サンプルの場合、シーン名を「待機」、サイズを1000×1080に変更しています。保存場所もお好きなように。
そして保存しておいたModelerデータ（拡張子.cmox）をドラック＆ドロップでぶち込む！すると画面にさっきまで作っていたモデルが表示されます。
▲でかーーーい！！！！
だいたいここででかく表示されてびっくりしますが、Ctrl（Macの場合はcommand）を押しながら周りの赤枠を縮めることで中心と縦横比を保ったまま拡縮できるので、落ち着いて画面内に納めます。
この時、画面下側の「タイムライン」のピンクの縦帯が左端（0秒0コマ）に来ているか確認しておきましょう。モデルの拡大率や位置もアニメーションの動きとして記録されてしまうので、中途半端な位置に帯があると変な動きがついたりします。
キーフレームを打つ
モデルを読み込んだら、あとはキーフレームを打つべし打つべし！キーフレームというのは、「動画全体を10秒として、1秒0コマのときにこういうポーズをする！」といった指定のことです。この指定をポチポチと散りばめれば、指定間の動きを自動でソフトが作ってくれます。
まずは0秒0コマの位置に、初期位置を固定するキーフレームを打っておきましょう。タイムライン左端にある「（データ名）.cmox」の左の▶を押すと、パカッと中身が開きます。
▲最初に画面に収まるよう大きさを変えたので、「配置＆不透明度」の部分に既にキーフレームが打たれています。
▲１番使うことになるのが「Live2Dパラメータ」です。ここに１つキーフレームを打ちます。Ctrl（Macの場合はcommand）+クリックでキーフレームが打てます。これで初期位置の固定ができました。
あとは好きなようにキーフレームを打ち、モーションをつけていきます。
▲たまに再生してグフフ…となりつつやると楽しいです。
▲「Live2Dパラメータ」の▶をクリックするとさらに中身が開きます。パラメータごとのキーフレーム（赤丸）をここでいじれるので、打ったキーフレームの位置を細かくずらしたいときはここからずらしましょう。ドラッグで選択した後につかむとずらせます。もちろん、上にある青い四角やピンクの丸もずらせますよ。
▲動画全体の長さやリピートを調節したいときは、右にスクロールした先にあるこれらの端をつかんで伸ばしたり縮めたりします。白い範囲・緑のバー（ワークエリア）・赤い範囲ごとに役割が違うので注意。
打ち方のコツ
キーフレームの打ち方のコツですが、まずは呼吸や全体を通してゆっくり動く手足などの大きな動きを打ってから、揺れものなど細かな動きを打っていくといい気がします。
また、FGOではキャラから見た正面〜背後に向けて風が吹き抜けているので、揺れものが揺れるタイミングをずらしていくとそれっぽいです。
▲４ブロックほどに分けて左から順番に。
▲揺れのパラメータを全部打ってから、ブロックごとに順番にずらして微調整していくといいかも。この画像はパラメータの順番がぐちょぐちょなのでキーフレームもぐちょぐちょしてますが、やってることは単純です。
風に対する揺れが１回分できたら、あとはコピペでキーフレームを増やして何回か繰り返しましょう。１回→少し経ってから２回連続という感じで揺らすとそれっぽさがでます。
「動かしてるのに、なんとなく機械的な印象に…」とお悩みの場合は、よく見ないとわからないくらいじわ〜っとした小さな動きを動かしてないパーツにつけるといいかもしれません。生き物は完全に静止することができないので、そういう「ブレ」みたいなものを意識すると生命感がでます。
まばたきの付け方
Modelerのほうで妙なパラメータを作ったまばたきですが、以下のようにキーフレームを打ちます。
▲ゆっくりまばたきさせたいときは、閉じ目の間隔を広くとりましょう。
これも１回分できたらコピペで増やして繰り返します。風に対する揺れと同じく、１回→少し経ってから２回連続、がオススメ。
キーフレームを打ち終わったら完成です！お疲れ様でした！メニューの書き出しからGIFもしくは静止画(連番)で書き出しましょう。サンプルではAfter Effectsに読み込むために静止画(連番)で書き出しました。
後加工
ここから先は余談です。GIFで書き出したものを早速公開してもいいし、ちょっと一手間加えてみるのもOK。
サンプルでは、After Effectsで背景と文字をつけました。FGOっぽいキラキラした粒子がふわふわ飛んでいく背景をParticularで作ったり、ステータス画面みたいな青いグラデーションにしたり。
▲今まで散々名前はちゃんとつけろよと言っておきながら、こういう時めんどくさがってコンポとかデフォルト名のままにしてるのがバレバレですね。テヘヘ！
▲ここまで読んでくださったお礼に、背景素材画像を載っけておきます。サイズは1280×720です。もしよかったら使ってね！
以上、FGOバトルキャラ風Live2Dモデルの作り方でした！いやー書いた書いた！ここまで読んでくれてる人いないんじゃないのか！？こんなポンコツ解説じゃちっともわからないんだけど💢という方は公式のマニュアルも参照すると良いと思います。作文苦手なんだって！！！！許して！！！！
気がつきゃもう3のリリースが明日。楽しみですね。これを機にLive2D面白いなって思った方、是非いろんなモデルを作ってみてください。そしてこの記事を宣伝してください。私が喜ぶだけですが。
ここまで本当にありがとうございました！長々とすみませんでした！ご質問等あればTwitterやコメントでお気軽にお声がけください。あとモデル作ったら見せてください。みんなのうちの子サーヴァントが見たいんじゃ私は。それではまた。うちの子FGOパロはいいぞ〜
