見出し画像

Live2D 高可動域モデルの顔の角度XYのすすめ①

はじめに

皆さんこんにちは。乾物ひものと申します。

この度、Live2D社から公式にご依頼いただき、「Live2D LAB」にて記事を書かせていただくことになりました。お話を頂いた時は飛び上がって喜びました。本当にありがとうございます!

今回は、私が普段Live2Dモデルを作る上で特にこだわっている、「顔の角度X」「顔の角度Y」の動きに焦点をあてた解説をしようと思います。

※斜め向きの顔にも一部参考になる部分はあると思いますが、今回は正面向きの顔を前提として書いていきます。

記事は3回に分けてお送りします。今回は「輪郭〜鼻」までを解説します。


それでは早速、本題に入っていきたいと思います。


制作にご協力いただいたVTuberさん

記事を公開するにあたって、私がLive2Dを制作したVTuberさん数名にご協力をいただきました。VTuberの皆さん、そしてイラストレーターの皆さん、制作過程公開の快諾、誠にありがとうございます!

【お名前一覧(敬称略)】

制作にご協力いただいたVTuberさん1

雨森青葉
Twitter
YouTube

制作にご協力いただいたVTuberさん2

駆動ルル
Twitter
YouTube
 イラストレーター:めーすけ

制作にご協力いただいたVTuberさん3

黒咲ユリア
Twitter
YouTube
 イラストレーター:本田ロアロ


Live2D 制作フロー

まず、私のLive2Dモデルの制作手順はこんな感じです。

Live2D 制作フロー

今回は、「顔の角度XY」に焦点を当てた記事なので、他の制作過程については割愛します。
(どこかのタイミングで、個人的に公開できたらいいなー、とは思っています)


下準備

顔の角度XYは基本的に、表情(まばたき・口・眉などの動き)が完成してから作ります。

下準備1

下準備2

(表情は先に作りましょう)

輪郭のパーツ分け

それでは、輪郭の動きから作っていきましょう。

輪郭のパーツは1パーツで作る方も多いと思いますが、私は

・線画
・ベース

2パーツに分けています。

輪郭のパーツ分け1

こうすることで、上下左右を向いたときに、線画のみをマスクで消して立体的な表現が可能になります。

輪郭のパーツ分け2


輪郭のアートメッシュ

アートメッシュの打ち方は基本こんな感じです。

輪郭のアートメッシュ

線画パーツにも、メッシュをコピーして全く同じ割り方にしています。


輪郭の変形(角度X)

アートメッシュの編集が終わったら、デフォーマで横向き(角度X)の変形をしていきます。

輪郭のデフォーマは、昔から使いまわしてるので形状が複雑になってしまっていますが、原理としては

輪郭の変形(角度X)1

・横を向いたときは奥行きの関係で横幅が狭くなる
・奥の頬の輪郭がカーブを描く
・手前の顎の輪郭が緩やかな丸みを帯びる
・前髪パーツからはみ出ないように手前のこめかみ部分を引っ込める

という感じで動きを付けています。

また、キャラクターの性別や年齢、絵柄によって、横を向いたときの頬の膨らみ方は違いますので、その都度デフォーマの形を微調整しています。

輪郭の変形(角度X)2

片側の輪郭の向きが出来上がったら、「動きの反転」機能で、反対側にも同じ動きを付けます。
(参考:Live2D公式チュートリアル「動きの反転」)

輪郭の変形(角度X)3

これで輪郭の角度Xは完成です。

輪郭の変形(角度Y)

次は角度Yの動きを付けます。デフォーマはあまり変形させずに、上下にずらしています。
(角度Yは、動きの反転機能は使わず、手動で上下の動きを作ります)

輪郭の変形(角度Y)1

角度Yの動きも、キャラによって個体差が大きいのでその都度微調整しています。
ユリアちゃんはかなり大きく変形させています。

輪郭の変形(角度Y)2

これで上下左右の動きが出来ました。

輪郭の変形(角度Y)3

輪郭の変形(斜め)

次は鬼門、斜めの動きを作ってきます。

Live2Dには「4隅の形状を自動生成」というとても便利なツールがあります。
(参考:Live2D公式チュートリアル「4隅の形状を自動生成」)

二つのパラメータの形状をかけ合わせて、自動的に斜めの動きを作ってくれる、というツールなのですが、これを高可動域の角度XYに反映させるとどうなるかというと…

輪郭の変形(斜め)1

こうなります。(ぎゃああああああああ)

一見、とんでもないことになっていますが、XYの動きのかけ合わせ自体はとても綺麗に出来ているので、あとは手動で微調整していきます。

そもそも、なんでこんな歪みが発生してしまうかというと、人体の動きには「パース」がかかっているからです。

輪郭の変形(斜め)2

人間の頭を単純化して立方体で考えた時、このように斜め上や斜め下を向いたときはパースがかかります。

しかし、「4隅の形状を自動生成」機能では、パースを考慮していないのでこのような動きになり、形が歪んで見えます。

輪郭の変形(斜め)3

つまり、パースのかかってない部分を斜めにずらせば、歪みは解決するのです。

輪郭の変形(斜め)4

(裏を返せば、動きが少ない=パースがかかりにくい体の動きなんかは、ほとんど無修正で綺麗な動きが作れる神機能です)


輪郭の動きに戻りましょう。まずは、4隅の形状を自動生成で斜めの動きを付けた後に、全体的に形を斜めにずらします。

輪郭の変形(斜め)5

輪郭の変形(斜め)6

デフォーマの編集レベルを3にすると動かしやすいです。

輪郭の変形(斜め)7

あとは、反対側の動きを、「動きの反転」機能で作れば、両側の斜めの動きが出来ました。

輪郭の変形(斜め)8

(デフォーマの形がかなり歪んでいますが、なるべくデフォーマだけで変形を終わらせたいためです。どうしても輪郭の歪みを無くすのが難しい場合は、アートメッシュもパラメータを打って直接弄ります。)

拡張補完について

最後に、角度Xのパラメータに「拡張補完」という機能を反映させます。

通常、デフォーマやアートメッシュは、パラメータ間を直線的に動きます。

拡張補完について1

なので、そのままだと斜めの動きの時にカクついた動きになってしまいます。

拡張補完について2

しかし、拡張補完機能を入れると、パラメータ間の動きを補完して、曲線的な動きを自動的に作ってくれます。

拡張補完について3

拡張補完について4

素晴らしいですね!!!!

(この機能が追加される前は、皆さん自分で補完する動きを点を打って作っていたみたいです…いにしえのモデラー達は凄い…)

拡張補完について5

これで輪郭の角度XYは完成です!
…と、言いたいところですが、私はさらに何点か工夫を加えています。

顎の影の生成

まずは顎の影の生成。

顎の影の生成1

こんな感じのパーツを新規に作って、輪郭のベース部分にクリッピングします。

そして、輪郭とは別のデフォーマを作成し、影をスライド状に動かして立体感を付けます。

顎の影の生成2

(分かりやすいように、クリッピングを外して表示しています)

線画とベースを別々に作っておくことで、線画に干渉せずに影を付ける事が可能になります。

輪郭の線画のマスク

さらに、今度はこのようなパーツを作ります。

輪郭の線画のマスク1

このパーツの不透明度を0%にし、線画をクリッピングさせ、「マスクの反転」を適用させると…

輪郭の線画のマスク2

このように、顎の線だけを消すことが出来ます!

これを利用して、横や上を向いた時の顎の線を削っていきます。

輪郭の線画のマスク3

輪郭の線画のマスク4

かなり立体的な動きになりましたね。今度こそ輪郭の角度XYの動きは完成です。

鼻のデフォーマの作り方

次は鼻の動きを作っていきます。

目や口など顔のパーツはとても複雑な動きをしますが、その動きの指標になるのが「鼻」の動きです。なので、顔のパーツは鼻から作っていきます。

鼻のパーツ分けやメッシュ割りも個体差が大きいです。女の子の単純化された鼻の方がパーツ数も少なく動かし方も単純に、男の子の高い鼻の方がパーツ数が多く複雑な動かし方になることが多いです。

鼻のパーツのデフォーマの入れ方にはコツがあって、

鼻のデフォーマの作り方1

このように、鼻の一番高い部分にデフォーマの中心が来るように入れます。

(デフォーマからアートメッシュがはみ出さないようにしましょう。多くの場合デフォーマの下部分が余ってしまうと思いますが、それで大丈夫です)

鼻のデフォーマの作り方2


鼻の変形(角度X)

男女共、基本的に横を向いたときに「く」の字になるようにデフォーマを動かします。

鼻の変形(角度X)1

このとき、くの線があごに繋がる位置にくるようにします。

鼻の変形(角度X)2

青葉くんは男の子ですが、キャラデザインも私のため、モデリングしやすい鼻の形状で作っています。

しかし、地味に難しいのがこういう鼻です。

鼻の変形(角度X)3

男性絵だとよくある描き方ですが、正面向きの時点でどちらかに向いている鼻だと、反対側に向かせる時にとても歪みやすいです。

鼻の変形(角度X)4

解決策としては、アートメッシュを直接弄って力技で変形させるか、鼻の折れ目でパーツを分けて別々に動かすといいでしょう。

鼻の変形(角度X)5

反対側の動きを「動きの反転」機能で付けたら、鼻のXの動きは完成です。

鼻の変形(角度Y・斜め)

こちらも原理は同じで、横向きのくの字になるように動かします。
このとき、奥になる方を縮めると立体感が出ます。

鼻の変形(角度Y・斜め)1

上下左右の動きが出来たら、輪郭の時と同じように、

4隅の形状を自動生成→手動調整

で斜めの動きを作っていきます。

鼻の変形(角度Y・斜め)2

拡張補完も忘れずに!

これで鼻の動きは完成です。

鼻の変形(角度Y・斜め)3

今回はここまで!

おわりに

いかがだったでしょうか。

次回は、目の動きから解説していきたいと思います。

今回の解説で登場した雨森青葉くんですが、彼のモデルの制作過程はYouTubeでも公開しています。

そちらでは、音声付きで原画作成から詳細に解説している(しかも英語字幕付き!)ので、もし興味があったら是非ともご覧下さい。

お読みいただきありがとうございました!!

それでは。

乾物ひもの

----------------------------------------------------------

ひものさん

HP
Twitter
YouTube

乾物(かんぶつ)ひもの
バーチャルYouTuberとしてメイキング動画・ゲーム実況・歌ってみた動画などをYouTubeとニコニコ動画に投稿する傍ら、フリーランスのLive2Dモデラーとして多数のVTuberモデルを制作。元々はイラストレーターとして活動。


昨年11月には「Live2Dクリエイター表彰プログラム」を受賞


代表的なLive2Dモデルの制作実績

リスちゃん

ホロライブID/Ayunda Risu
Twitter…https://twitter.com/ayunda_risu
YouTube…https://www.youtube.com/channel/UCOyYb1c43VlX9rc_lT6NKQw/
ⓒ 2016 COVER Corp.

メイカ君

歌衣メイカ
Twitter…https://twitter.com/meikahaotoko
YouTube…https://www.youtube.com/channel/UC7-N7MvN5muVIHqyQx9LFbA/

イツミちゃん

歌衣イツミ
Twitter…https://twitter.com/Itsumi_V
YouTube…https://www.youtube.com/c/%E3%82%A4%E3%83%84%E3%83%9F%E3%81%A1%E3%82%83%E3%82%93%E3%81%AD%E3%82%8B/

アズミちゃん

歌衣アズミ
Twitter…https://twitter.com/As_me_V
YouTube…https://www.youtube.com/c/%E3%82%A2%E3%82%BA%E3%83%9F%E3%81%A1%E3%82%83%E3%82%93%E3%81%AD%E3%82%8B/

記事が気に入りましたら、もしよろしければサポートを頂けますと、今後の記事執筆・作品制作活動の励みになります!