Live２DモデルをProcreateで作ってFacerigで動かす

ipadproのProcreateで絵を描いてPCのLive２Dで設定をしてFacerigに落とし込む方法を解説します。

私はProcreateを使用しましたが、ipad版クリップスタジオやPSDファイル出力が出来るアプリなら同じように出来ると思います！

必要なもの

最低限必要なもの

ipadまたは絵が描けるタブレット端末か、液タブ・板タブ
お絵かきソフト・アプリ※PSD形式出力が出来るもの・レイヤー扱えるもの
Live２D Cubism(Free版でも可能)
Facerig本体　1480円ぐらい
Facerig Live2D Module　398円ぐらい
Webカメラ
パソコン
折れない心

これらがあれば今から説明する方法でLive２Dモデルを作って放送することが出来るようになります。

Facerigについてはsteamで購入してダウンロードをします。steamではよくセールも行われているので上記料金より安く購入できるかもしれません。

※追記※2020年11月Facerig後継のAnimazeが使用できるようになりました。基本利用は無料ですが、アバター導入や放送の条件により別途課金制となっております。

▼AnimazeへLive2Dアバターを導入する方法

Live2Dモデルのイメージ図を描く

ラフイラストを描く

まず初めに、Live２Dで動かしたいキャラクターの案やラフを描いていきましょう。　人間でもいいですし動物でも面白いと思います。Live２DのFacerig公式で用意されているキャラクターの中にはカップに入った犬のようなキャラクターもいます。想像力を使って貴方だけの特別なキャラクターを作りましょう！

動かしたいパーツを考える

私はこの工程をすっ飛ばしたのですが、本格的に絵を描き始める前に動かしたいパーツについてある程度考えておきましょう！
・髪(前髪・横髪・後ろ髪)　・顔　・目(上下まぶた・白目・黒目)　・口(唇上下・口の中)　・手　が主に動かしたいパーツとなるとおもいます。ラフイラストでそれぞれどのようにレイヤー分けをするか計画を立てておくと次の作業がスムーズに進みます。

ipadでLive２D用に絵を描く

注意点

画像サイズは何でもOK※ただし、Free版だと最終的に画質がどうしても落ちる
部分ごとに描いていくが重なっていて見えなくなるところも描く
レイヤー名はLive２Dに移してからでも変更可能
PSD形式で保存する際はファイル名を半角英数字で保存する

線画・ベースカラーを描く

ラフイラストをipadやお絵かきソフトに移して、Live２D用イラストを描いていきます。
動かしたいパーツごとにレイヤーを分けて描きます。※レイヤーごとに名前を設定していますが、Photoshop以外のソフトは文字化けする可能性が高いので、自分がわかる範囲で管理しましょう。

ソフトやアプリの機能の「コピー」「ペースト」「左右反転」を駆使すればバランスよく正面顔が描けて手間も半分で済みます！

目と口はパーツごとに分ける

口をパクパク動かしたい場合は、下の画像のように口上・口下・中身というように３つに分ける必要があります。

目を瞬きさせたい場合も同様です。また、目をぎょろぎょろさせたい場合は、黒目・白目も分けて描いていきましょう！

必要なだけ影を載せる

全部のパーツが描き終わったら、必要な分だけ影を載せていきましょう。お絵かきソフトやアプリの「クリッピング」機能と「乗算」や「オーバーレイ」機能を使ってくどくならない程度に影を付けていきます。

レイヤーで絵の部分が重なっている所は、必要なレイヤーのみ表示ＯＮにして見えない所まで塗りましょう。　動かしたときにその部分だけ影が付いていないことになってしまいます。　また、影も「コピペ」や「反転」を駆使して付けていくと手間がかからずに済みます。

絵が完成したらＰＳＤ形式で出力する

Live２D用イラストが完成したら、PSD形式(Photoshop)で出力保存します。出力の仕方はそれぞれお使いのイラストソフトごとに異なるため説明は省きます。

Live２Dに絵を設定する

PSD形式で保存したデータをパソコンに移しましょう！　USBやGoogleドライブ等でデータを移動させます。

Live2D Cubism Editorをダウンロードする

Live2D公式サイトから『Live2D Cubism Editor』をダウンロードしましょう！
Free版でも充分動かせます。　私はFree版で作成しました。

Live2D公式サイトLive2D Cubism – イラストを2Dアニメーションとして動かすLive2Dは、平面的な2Dイラストをシームレスに動かして立体的なアニメーションにするソフトウェアです。パーツごとに分けた画像データがあれば、あなたのイラストを自由に動かすことが可能です。www.live2d.com

Live2DでPSDデータをインポートする

Live2D Cubism Editorを起動したら、ファイル＞ファイルを開くをクリックして、PSDデータを選択してください。

問題が無ければこのように表示されます。

パーツ名(レイヤー名)を修正する※

お絵かきソフトやアプリによっては文字化けしてしまいますが、クリックをして「インスペクタ」内の「名前」を修正すれば大丈夫です。イラストソフトと同じようにレイヤーごとに表示のON/OFFが出来るのでそれを使いながら確認して修正していきましょう。

背景は削除する※

こちらもソフトやアプリの設定によって異なりますが、白一色のみの「背景」レイヤーがある場合は削除しましょう。

テンプレートをあてる

大体の動きをテンプレートから取るための設定をします。
「ファイル」＞「テンプレートを適用」をクリックして自分の描いたモデルに近いキャラクターを選んで調整します。

綿茶

大体でいいです。目や鼻の位置が微妙に違う場合は左にあるリストの値を弄って合わせていきましょう。

デフォーマの設定を行う

テンプレートを適用したら、自動的に頭や身体のファイルが出来るので移していきます。　そして、「デフォーマ」の欄を確認して異なっていたら適切な部位に変更します。

ポリゴン設定をする

部品を選択している状態で、上の方にある「ポリゴンAUTO」ボタンをクリックすると「メッシュの自動生成」ウィンドウが開きます。プリセットで変形度合い(小)や(大)が選択できます。　※変形修正をサクッと手軽に行いたい場合は(小)、変形修正を細かく行いたい場合は(大)がおススメです。

綿茶

この後の動きを付ける作業の際も変更が可能です。

パラメータ設定をする

いよいよ動きの設定を行います。※Free版は一つのパーツ(レイヤー)につき3つまでしかパラメータ設定(動きの設定)が出来ない制約があります。

口上を例にすると、部品を選択した状態で「パラメータ」の「口開閉」をクリックし、上の〇ー〇「キーの2点追加」をクリックします。　そうすると、「1.0」と「0.0」の2つの値がキーになります。
「0.0」の時は口が閉まっている時(通常)の値とし、
「1.0」の時は口が空いている時の値にします。

このように動かしたい部品のパラメータを設定していきます。口と目は設定するだけでかなりヴァーチャルユーチューバーらしくなります。

ランダムポーズ再生で確認

右下にあるランダムポーズ再生を押して、実際に動いた時の部品の動きを確認しましょう。

元に戻したい時は、停止ボタンを押してからパラメータ右上にあるボタンを押して「デフォルト設定値に戻す」をクリック。

テクスチャアトラス設定をする

動きの設定が終わったら「テクスチャアトラス編集」をします。
ポリゴンAUTOボタン横にあるテクスチャアトラス設定ボタンをクリックします。

自動レイアウトも出来ますがあまり良くないので手動配置をおススメします。Free版だとこのテクスチャアトラス設定は2048px四方の1枚のみで設定しないといけないので、イラストの画質が全体的に落ちます。

適当でも良いですが、細かい描写をしたいパーツは大きめに、大まかでもいいパーツは小さめにすれば丁度いいとおもいます。　部品を選択している状態で上の「倍率」の数値を弄れば大きさも変更しやすいです。

テクスチャアトラス設定が終わったら下の「OK」ボタンをクリックしたら設定が反映されます。　このボタン意外と見落とし易いので注意してください…　無事に反映されれば、Facerig用データに出力が出来るようになります。

組み込み用ファイル書き出しを行う

全ての編集が終わったら、ファイル＞組み込み用ファイル書き出し＞moc3ファイル書き出しをクリックしてmocファイルを作成しましょう！※ファイル名は念のために日本語ではなく英数字ローマ字にした方がいいと思います。

★テクスチャアトラス設定が出来ていないとmoc3ファイル書き出し出来ないので注意してください。
★書き出し形式はCubism3.0にしましょう！※FacerigLive2Dが対応していないため(2020年5月現在)

無事に書き出されたら
・「キャラ名」のフォルダ(テクスチャ設定)
・「キャラ名」.cdi3.json
・「キャラ名」.moc3
・「キャラ名」.model3.json
※物理演算設定がある場合はもう一つファイルがあります。
が保存されているはずですので全てを「キャラ名」※同じ文字のファイルを作成して纏めましょう。