NAMEはill-DOC(イルドック)を描きました。なんでこのモチーフを選んだかは色々、紆余曲折がありまして...まあ、いろいろチャンレンジということで。ちなみにイラストの制作時間は6時間程度です。人気のIPキャラはだいたいLive2D化されてしまっている気がするのですが、ヒプマイのLive2Dはなぜかまだ少ないです。その原因の一つは、公式イラストが2種類+α程度しかないということも原因に挙げられる気がします。だいたい1キャラ2枚しか存在せず。STUDIOが主流だと思いますが、両のソフト、ほとんど使用した経験もなく慣れていません。(線は綺麗に引けるメリットはあるのですが)また結局Photoshopで書き出し処理をすることもあって、今回は慣れていて、全て完結できるPhotoshopを選択しました。h2560にしました。h1080px)基本、等倍ではつかわない。2048px)1枚程度に収まりそうな解像度のサイズに高解像度はPCのスペックを要求され時間がかかりそうなので、適切なサイズにした。線は硬めのブラシ(3px)のみです。目次へ戻るレイヤーの設定せっかくPhotoshopを使っているので、塗りつぶし+マスクで描いています。色が変更しやすい白黒だけで描けるなどのメリットがあります。ちなみにマスクを黒くしたいときは反転するすることをおすすめします。【Photoshop】マスクへの塗りつぶしでNG!ベタ塗り+マスク(反転)スクリプトレイヤー構成アートメッシュにしたいオブジェクト単位でグループでまとめます。レイヤーの構成はアニメを意識してベース色(通常色)に影を足して、ハイライトをのせるシンプルな構成です。イラストっぽく仕上げる、背景なじませや光源を効果(調整レイヤー)を重ねます(今回は入れてません。基本ですが、表示順にレイヤーを重ねます。閉じ目の参考も用意したほうがあとあと楽です。反転コピーのスクリプトがあると確認が楽です。【Photoshop】描いた部分を反転コピーするスクリプトLive2Dインポート用に書き出し書き出しは公式のスクリプトを改造したものをつかっています!便利なのでおすすめです。PSDのインポートから。書き出したPSDをLive2Dにドラッグ&ドロップします。※レイヤーを非表示にしているものも、非表示状態で読み込まれます。※グループを乗算や加算状態にしているものも、Live2Dで描画モードが設定された状態で読み込まれます。※後述しますた、PSDを調整した場合もPSDをドラッグ&ドロップして更新できます。目次へ戻るLve2Dの設定(テンプレート適用前の準備)原画の固定設定イラストをインポートしたら、パラメーターウインドウ>デフォルトのフォームをロックします。調整している合間に元の原画の状態からずれてしまうことがあるので、これのチェックは必須です。Photoshopで設定していれば、そのまま反映されているので設定は不要です。※最終状態が見えてない人は、先にざっくり仮でテンプレートを作成してから、パラメーターを動かして、いろいろ分けの不備を見極めて素材を再調整することをおすすめします。一度、いちからやり直すくらいの気持ちで素材の分けが適切であるというのが見えている状態になったらメッシュの編集にすすみ、適切な状態でテンプレートの適応ができるように準備をします。仮メッシュの確認パーツウインドウの上から一つオブジェクトを選択モデリング>テクスチャ>メッシュの編集(Ctrl+E)を選択して、メッシュの状態を確認。※変な場所にメッシュで生成されていた場合、PSDに戻りゴミを削除して、修正したPSDをドラッグ&ドロップして素材を更新します。変形度合いが大きいパーツは、一つ一つオブジェクトを手動でメッシュを割り当ててきます。(地味で面倒ですが重要)逆に特に変化がなさそうな場所は仮メッシュでも良いです。他は変化がすくなさそうなので、プリセットのままです。頂点を全選択(Ctrl+A)してからDeleteキーを押して、頂点すべて削除してしまいます。(ちなみに一点だけ削除する場合はAlt+クリック)頂点を手動で打っていきます。オブジェクトの中心を一定間隔(急にカーブしている箇所は密に、まっすぐな箇所は粗に)にクリックして頂点を作成。次に中心に打った点の中心部分から、オブジェクト外側にある箇所に点を打ち、二等辺三角形(または正三角形)を作っていきます。一周、三角形ができたら、外側をの三角形の頂点同士をつないでいきます最後に頂点を選択+移動で整えます。別オブジェクトへのメッシュの反転コピーメッシュ編集済みのオブジェクトを選択してCtrl+C反転コピーしたいオブジェクトを選択してCtrl+Eで編集モードにして、そこでCtrl+Vでペースト。さきほどのメッシュが生成されます。以上でメッシュの反転コピーができます。Ctrl+R(自動接続)でメッシュを適切な状態に調整してくれます。白目を選択してCtrl+Cでコピー(※IDもコピーされます)瞳のオブジェクトをそれぞれ選択してクリッピングの項目を選択してCtrl+Vでペーストしてリターンキー。※ナルミ(FaceRig)でも良いのですが、一番ベーシックなテンプレートモデルのほうが、結果が良さそうなのでチトセにしてみましたサンプルモデルをイラストとサイズを変えて、重ね合わせる透明度を固定にすると良いです。@マークの追加パラメーターを調整してサイズや長さ、位置をサンプルと合わせていきます。プレビュー」へ、パーツの対応付けしていきますたとえばサンプルモデルの前髪を選択して、イラストの前髪も選択して「選択要素を対応づけ」ボタンをおして、リンクさせていきます。※アニメーション中の再生しながら対応ずけはおすすめしません(デフォルト時がずれた状態でになったことがあるので)、再生で確認して、再生を止めて対応づけしたほうが良いです。パラメータパレットを起動して、角度XYZなどを動かしつつ、対応付がちゃんとなっているか確認して、つど修正していきます。荒い状態ですが、形にはなってきました。目次へ戻る素材の修正テンプレート適用後、素材の分けミスや調整が必要な箇所が見えてくるので、一度PSDに戻って分けたり調整したりします。塗り足しの必要な箇所など最悪、もう一度分けを修正して、テンプレートからやり直したほうがよいこともあります。PSDを調整後、は再び書き出してからPSDをドラッグ&ドロップでインポートすれば更新できます。目次へ戻るここまでのまとめ以上で、モデリングは半分が終わりました。テンプレートが適応されていれば、パラメーターを整理して、ひとつひとつ詰めていくだけです!目次へ戻るFaceRig用のLive2Dの作り方3[各パラメーターの調整まで]テンプレート適応後からの作業になります。パラメーターとオブジェクトの階層位置の確認です。テンプレートで適用ミスしたオブジェクトを適切な位置へ移動します。耳やハイライトなど、しかるべき位置にあるか確認して、間違っていたら修正します。以上削除すると髪揺れのパラメーターを除くと21パラメーターのみ調整すれば良さそうです。追加するパラメーターFaceRigのトラッキングを使わない、物理演算を使う髪の部分はもう少しバリエーションを足したいのでパラメーターを増やします。-1,0,1)を追加しておきます。X(最後消します)基本テンプレートのままにしました。腕と体に隙間ができていたので、腕オブジェクトにワープデフォーマーを追加して、左右に動いても体と隙間ができないようにしています。基本的にオブジェクトではなく、デフォーマーを追加して形を修正する。(口やまつ毛など、ものすごく変化するオブジェクトは例外)1パラメーターに1デフォーマーが望ましい。2,3つパラメーターに関連ずけてしまうと、組み合わせが増え構造が把握しにくくなる修正は以上です。XはFcaeRigではマウス操作で動かすパラメーターでトラッキングでは連動しないので、角度Xへ移植してしまいます。Xに関わる要素が抽出されます。首の曲面x体の回転x体のオブジェクトx3(右アウター/左アウター/インナー)合計10箇所。以上で、パラメーターを別のパラメーターに移植できます。10箇所繰り返して、角度Xを動かした時に体も同じ方向を向くようにします。Xのパラメーターは、使わないので削除してしまいます。今回はハイライト意外のパーツは左右対称にしているので、片方のパラメーターを調整したら形状を反転+パラメータも変更で、反転コピーしようと思います。事前に閉じ目の形状をイラストで考えておきます。イラストの形状に合わせて、まつげと白目を調整します。これに限ってはデフォーマーではなく、オブジェクトの頂点で形状を整えていきます。一変形パスツールで大きく動かしてから、頂点を動かして詰めていくという感じです。※ただ変形パスツールは、シャープな形は作りにくいのであくまでざっくり調整だけにとどめて、細かいところは頂点を動かしたほうが早いです。反転コピーのやり方(複数オブジェクトまとめても可)目のパーツをまとめて反転コピーしてしまいます。目のパーツ群の親「左目の変形」を子を含めて選択してコピペ。まるごと複製を作ります回転デフォーマを作成。作成した回転デフォーマの子に複製群を入れる回転デフォーマを選択して右クリック>反転あとは子の「左目の変形」ごと「右目の変形」と同階層に入れて、リネームとパラメータの変更(右クリック>▼>変更)を済ませればOKです。最後にもとからあった右目系の素材をすべて選択して削除します。※反転コピー用に中心位置に作成した回転でフォーマーがあると便利です。6.口の開閉まず、資料をみてあいうえおの口の形のイメージを決めておきます。口関連のオブジェクトを選択して、キーを設定します。口の開閉(0,0.3,0.6,1.0)口の中だけ表示させて、最大の口「お」(パラメ1.0)と中間1の口「う」(パラメ0.3)、中間2の口「え」(パラメ0.6)のアタリの大きさを決めます。Alt推しながら縦の拡縮して調整。あとは下地に合わせて変形パスツールで整えます。※しっかり口の線にあわせてパスツールの位置調整をしておくと楽に調整できます。編集レベルを1にして頂点を整えます。ベースの二等辺三角形のイメージを意識しつつ、大きく崩れないように調整します。あごの動き口の形が整って余力があれば、口を上げた時にあごがすこし動くように調整します。口の変形のパラメーターの整理チトセベースなので、FaceRigに合う値に修正します。変更(※ちなみにマイナス値はFaceRigでは動かないので特に調整しません。)口の変形のパラメーターのキーを3点設定しておきます。下記の画像参考に!)8.目の変形テンプレートのままでOK。X反転コピーしているとロンパった動きになるので、複製側のキー(0)を選択して右クリック>反転で修正します。左/右眉上下テンプレートのままでOK13.14.左/右眉左右テンプレートのままでOK15.16.左/右眉角度テンプレートのままでOK17.18.19.20.前/後/横/アホ毛髪揺れ横髪とアホ毛用にでワープフォーマーを追加。髪の長さに合わせてベジェ分割数を増やし、左右の揺れのパラメーターを作成する。※アホ毛に関しては変形パスツールでパラメーターを作成しました。ZテンプレートのままにでOK。首のつながり(首の曲面)や後ろ髪だけ調整。スナップショットを使うと調整しやすいです。XY最後に顔の縦横回転、髪や耳、今まで調整したパーツも含め、こまかく微調整していきます。※モデリング>パラメーター>4隅の形状を自動生成機能を使うと手数が減らせます。髪を体の動きに合わせて揺れるように設定します。プリセットを作成して、パラメーターを割り当てるだけで自然な揺れが作成できます。出力設定タブを押して追加ボタンで揺れる部位を割り当てます。目次へ戻るアートメッシュ直でパラメーターを設定しているオブジェクトモデリングはできるだけデフォーマーで作成するほうが、付け足し・削除できて便利です。まつ毛や口の開閉のように、大きく変化する場合はどうしてもデフォーマーでは制御できません。最後はFaceRigへ表示させる方法です。目次へ戻るFaceRig用のLive2Dの作り方4[FaceRigに表示するまで]まずはLive2Dでmoc3データを書き出しする方法です。新規テクスチャアトラス設定ウインドウで各種情報を入力。(x86)\Steam\steamapps\common\FaceRig\Mod\VP\PC_Common\Objectsにキャラ名(ill-doc)のフォルダを作成します。Live2Dから書き出した4種のデータをフォルダに格納ill-doc.2048ill-doc.moc3ill-doc.model3.jsonill-doc.physics3.jsonキャラ情報テキストの作成FaceRig内で掲載するキャラ情報を作成します。'txt_descLive2dAvatar1'「cc_names_キャラ名.cfg」(例:cc_names_ill-doc.cfg)という名前・拡張子で保存しフォルダに格納します。環境設定情報の作成カメラ位置やアイドリング、重力や風などの情報を設定します。0「cc_キャラ名.cfg」(例:cc_ill-doc.cfg)という名前・拡張子で保存しフォルダに格納します。FaceRigを起動する前に作成しておきます。万が一、先にFaceRigを起動して自動でサムネイルが生成された場合は、下記の場所にサムネイルが生成されるので削除。自分で作成したサムネイルを入れて再起動すれば適用されます。自作キャラがアバターギャラリーに登録されているでそれを選択すれば、FaceRigで自分の顔をトラッキングして動きを連動することができます。以上、今回は技術書典6のため一部をブログで公開しました。このキャラのテーマとしては、「効率良くFaceRig用Live2D」を作成してみる!でした。モデリングbookKindleから探すAmazonから探す楽天から探すYahooショッピングから探す趣味の本すいみん「アニメーター」というワードが気になる方は、目次だけでも見てみてください。(2)プロフィールすいみん技術的なことが好きなデザイナーです。