ベクターイラストから Live2D モデルを作って動かしてみた

32px

2022年1月24日 21:49

（主に自分用の備忘録です）

バ美肉がしたいということだったので、VTuber モデルを作ってみました。今回は下記のソフトを使いました↓

ラフ: Paper, Autodesk Sketchbook
イラストを描く: Vectornator
モデル用イラストの用意: Illustrator, Photoshop
モデルを作る: Live2D Cubism Editor (有償版)
モデルを動かす: VTube Studio
配信の録画: OBS

次回作ろうと思ったときのために、作業の流れと各工程のポイントを書いていきます。

作業の手順

VTuber モデルを作るためには大きく分けて次のソフトが必要です。前提として、モデルを作るためのソフトは Cubism Editor を使用することとします。

イラストを描くソフト: 普段絵を描いているソフト。PSD ファイルが出力できればなんでもok。
モデルを作るためのソフト: Cubism Editor を今回は使用。
モデルを動かすためのソフト: 作った VTuber モデルをカメラの入力に合わせて動かすソフト。今回は VTube Studio を使用。

1. イラストの作成

使用ソフト: Vectornator + Autodesk Sketchbook → Illustrator → Photoshop

Cubism Editor でモデルを使うためには PSD ファイルを Cubism Editor に入れないといけないのですが、自分はラスタ画像で絵が書けないのでクリスタなど PSD ファイルが直接エクスポートできるソフトが使用できませんでした。そこで、一旦 Vectornator から AI ファイルを出力し、AI から PSD を出力することにしました。また、タブレットで絵を描いていると、Cubism Editor で要求されるような大量のレイヤーを管理しきれなくなるため、Vectornator で大まかにパーツ分けをしてから、Illustrator でさらに細かいレイヤー分けをすることにしました。Autodesk Sketchbook は対称定規が便利なので、顔の下絵を描くのに一瞬だけ使用しました。

TODO: diagram?

イラストを描くときはこの note がめちゃくちゃ参考になりました。

以下次回の自分に覚えておいてほしいこと↓

全身のサイズは 8500px 以上
(今回はデフォルメ絵だったので最終的に 3600x6630)
モデルは左右対称に書く
パーツは見えないところも書く
口のレイヤー分け: 上の唇 + 口内 + 下の唇
線画と塗りは同じレイヤーにまとめる (= Cubism Editor で 1つのパーツとして動く)
パーツ分けに迷ったら、「動かしたい単位」を1つのパーツにする
Tシャツの袖はちゃんとわける！！！
(胴体と袖が一体化して作り直した。逆に模様は一体化してて ok)
Illustrator → Photoshop では、Illustratorでレイヤーを分けないとパスが分かれていても Photoshop で1つの「グループ」にまとまっちゃう
(e.g. 口のパーツは、Illustrator で上唇・下唇・口内を全て別のレイヤーに置く)
Illustrator の時点でレイヤーに名前をつけておいた方が楽
ファイル名は「hoge-v1」とかより「hoge-0123-02」とかの方がわかりやすい (人によります)

Illustrator と Photoshop は普段ほとんど使わないので、操作がまず大変でした。とはいえ、Illustrator は基本的にレイヤーを分けたり統合したりするだけで、Photoshop もレイヤー名変更にだけ使いました。

自分用ホットキーまとめ

レイヤーを統合: Cmd+E
レイヤーをロック: /
レイヤーの表示・非表示: Cmd+,

2. モデリング

使用ソフト: Live2D Cubism Editor

出力した PSD を Cubism Editor にインポートして、動きをつけていきます。

モデリングでやること

今回はLive2D のチュートリアルの順番に沿ってやりました。

チュートリアル 2
https://docs.live2d.com/cubism-editor-tutorials/import/

パーツに「アートメッシュ」をつける
- 最初に自動生成 → 顔のパーツは手動で直していく
- 他に細かく動くところがあればそこも手動でメッシュをつける

チュートリアル 3
https://docs.live2d.com/cubism-editor-tutorials/expression/

顔の表情
- 目ぱち → 眉毛の動き → 口の開閉

チュートリアル 3
https://docs.live2d.com/cubism-editor-tutorials/deformer/

顔の傾き = Z 方向の動き（X, Y はあと）
髪の揺れ
- 前髪・横髪・（あれば）後髪
- ⚠️⚠️⚠️ 髪を細かく動かしたい場合、パーツ分けの時点で分ける ⚠️⚠️⚠️
腕の開閉
体の XYZ

チュートリアル 5
https://docs.live2d.com/cubism-editor-tutorials/xy/

顔の XY
その他ほしい動き

2-1. アートメッシュの作成

最初に Cmd+A で全てのオブジェクトを選択
→ 「AUTO」ボタンでアートメッシュを自動生成
→ 首から上のパーツを手動で振っていく

・手動でやるときはメッシュを生成した後「自動接続」ボタンを忘れずに
・基本は「中心の線 + 囲み」で割れる
・線分の間隔は均等にする
・困ったら公式モデルのひよりちゃんを見る

どこまで手動でメッシュを振るかは最終人によります。今回はとりあえず動かしたかったので首から上だけにしました。

2-2. 顔に表情をつける

目ぱち → 眉毛（困り眉 & 怒り/驚き眉）→ 口の開閉で表情をつける

動かさないパーツにロック
→ オブジェクトをパーツパネルから選択（Shift で複数選択）
→ パラメータパネルにキーを追加
→ キーが緑色になっているのを確認
→ パスを編集

変形パスツール → 細かく編集がおすすめ
メニュー > 形状の編集 > 元の形状に戻す → PSD の位置に戻せる
挿入するキーポイントの数はパラメータパネルの黒い点を参考にする
Solo ボタンでパーツを単体で表示
眉のパラメータ
- -1.0 : 困り眉
- +1.0 : 怒り/驚き眉

2-3. 体の動き

・顔の傾き → ワープデフォーマ
　・デフォーマは顎の位置
・髪の揺れ: 前髪・横髪・（あれば）後髪 → ワープデフォーマ
　・前髪の設定: ベジェの分割数 2x2
・腕の開閉 → ワープデフォーマ
　・パラメータは新規作成 [0,0,30]
　・初期位置の調整が必要
・体の Y → ワープデフォーマ
・体の Z → 回転デフォーマ
　・体は空のデフォーマにパーツを入れてく
　・大きい方が Z の動き

パーツを選択
→ デフォーマを選択
　追加先は基本的に「選択オブジェクトの親に設定」
→ 抜けてるパーツがあればパーツのインスペクタから追加
→ （回転デフォーマのみ）Cmd+ドラッグで初期位置を調整

編集レベルは基本 2 でok
揺れる動きは弧を描くようにする
パラメータパネルの「動きの反転」を使うと楽
ワープデフォーマでサイズがおかしくなったら適宜アートメッシュも調節する e.g. チュートリアルの腕の開閉

顔の傾き = Z 方向の動き （X, Y はあと）

髪の揺れ

前髪・横髪・（あれば）後髪

⚠️⚠️⚠️ 髪を細かく動かしたい場合、パーツ分けの時点で分ける ⚠️⚠️⚠️

腕の開閉

体の XYZ

2-4. 顔の XY

各種デフォーマの作成
→ X の作成
→ Y の作成
→ X, Y を合成して斜めの顔を作る

・デフォーマを矢印キーで移動すると元の位置から不用意にずれない

デフォーマ一覧

・顔の輪郭: ワープデフォーマ
　　・ 2x3, 5x5
　　・縦長 2x3, 横長 3x2, 1:1 2x2
　　・作った後はインスペクタパレットで変えられる
　　・影も入れる
・目のデフォーマ（左右で別）
　　・ 3x3 (細かく動かしたいから)
　　・ Cmd+ドラッグでデフォーマのサイズを動かす
　　　 →内側の 4点が目を囲うようにする
・鼻のデフォーマ
　　・点なら 2x2, リアルなら 2x3
　　・位置は鼻のちゅうしん
　　・やや大きめ
・口のデフォーマ
　　・ 3x2
　　・口角に内側の点を合わせる
・眉のデフォーマ (LR別)
　　・ 2x2
　　・真ん中の点を、眉ラインの真ん中に合わせる
・耳のデフォーマ (LR)
　　・ 2x2
　　・パーツの真ん中に合わせる
・髪のデフォーマ (前髪・横髪・後髪）
　　・髪の揺れで作ったデフォーマの上に作る
　　・デフォーマを選択 > 「選択したオブジェクトの親」
　　・サイズは髪の長さに合わせて 2x2 か 2x3
　　・子のデフォーマより小さくならないように注意
・その他のパーツ: バンド、ピン, 耳のアクセ
→ 「顔の回転」デフォーマの中に揃ってるか確認