ページの先頭へ戻る

【コイカツ】MODを使ってウマ娘の目を再現しよう!(MaterialEditor使用)

最終更新:2022/01/19 01:02 │ コイカツ! | コメント(1)
Koikatu-2022-01-18-23-39-25-UI.png

さて、前回はアイネスフウジンの衣装を再現しましたが、今回はキャラの命である目をMOD「MaterialEditor」を使って再現していこうと思います。例によってなんと絵心必要なし!さっそく楽しくやっていきましょう。


ハニカム  ハニカム

まず、コイカツキャラの目は
①eyeline_00_up(アイライン上)
②eyeline00_kage(アイライン上の影)
③eyeline_00_down(アイライン下)
の3つのパーツで構成されています。これら3つはふだんキャラメイク画面の「目元」で好きなパーツと入れ替えられるのですが、たくさんMODのがあってもなかなか版権キャラと同じアイラインはなくてみなさんお困りですよね。今回はこのパーツを入れ替えるのではなく、MaterialEditorを使って顔のテクスチャに書き込んでいく方法で、お目当てのキャラクターの目元を再現していきます。心配しなくても大丈夫!描かないから!

【注意】なお、この方法だと顔の表面そのものにアイラインを書き込むため「①顔の肌色を変えられなくなる」「②ギャグ目の表示がおかしくなる」という2点が生じます。一方、アイライン以外のフェイスデザイン要素(ほくろやそばかす、独特の光や影などなど)を再現できるメリットがあるので、まずはこの方法をマスターして、もっと作り込みたい方は上記の「eyeline_00_up」など3つを差し替える方法にトライしてみてください。

1.アイラインを「なし」に

スクリーンショット 2022-01-18 235115

まずは肌の色やほくろ、チークなどの化粧を設定した上で、アイラインを上下とも「なし」にしましょう。

2.顔のUVマップとテクスチャを書き出す

顔項目の「全体」の欄にあるMaterialEditor(Face)をクリックして、cf_O_face欄の一番上にある「Export UV map」をクリック。すると、コイカツのMaterialEditorのフォルダ内にお面のポリゴンのようなpng画像が生成されます。
同様に、「MainTex」もExportしておきましょう。顔面のテクスチャが生成されます。

スクリーンショット 2022-01-18 235501

下図のような二枚がでてきたらOKです。これをレイヤー機能のある画像編集ソフトで開きましょう。個人的にはClipStudioがおすすめですが、レイヤー機能があればなんでもOKです。


cf_O_face_0.png _Export_2022-01-18-22-46-03_cf_m_face_00_MainTex.png

3.レイヤーを重ねて見本画像を貼り付ける


2つの画像をレイヤーで重ねて、透明度を調整します。ちなみに、UVマップに比べて顔のテクスチャはサイズが小さいので、テクスチャを拡大してUVマップの方に貼り付けましょう。逆だとサイズが小さくなって、出来上がるテクスチャも品質が落ちてしまいますからね。

ここまでできたら、再現したいキャラクターの目の見本画像を切り取っておもむろに貼り付けましょう!オラ!

スクリーンショット 2022-01-19 000535

なめてんのかと言われそうですが、これが大切。ここから、このお手本を頼りに別レイヤーでガシガシと目を描いていきます。
「やっぱり描くのかよ!」と思った絵心のない皆さん、大丈夫です。ペンタブがなくても、絵心もなくても、アイラインくらいならお手元のマウスで十分可能です。

スクリーンショット 2022-01-19 000631

見本画像の透明度を調節して薄くしたら、別のレイヤーで折れ線選択ツールを使い、アイラインを囲っていくだけでOKなのです。実際にやってみましょう。

スクリーンショット 2022-01-19 000925

アイラインの上のふちをちょっとずつなぞっていき、一周しましょう。曲線なので、できるだけ短く点を打っていくのがコツです。見本のとおりなぞるだけなので、誰でもできるはず。一周したら、見本画像のアイラインの色をスポイトで取って、塗りつぶします。


スクリーンショット 2022-01-19 001152  スクリーンショット 2022-01-19 001204

ほら、絵心がなくてもなんとなくできました!上の画像では、同じ要領でまぶたの影と、目尻のチョンチョンも折れ線選択ツールだけを使って描いています。ペンタブがある方はもっと凝ってもいいですが、ぶっちゃけそんなにアップにしないかぎりこの程度で全然問題ありません。気をつけたいのは、

①UVマップ(ポリゴンの線)の目の形にできるだけ沿うように、見本画像を設置すること
②見本画像は、キャラを正面からとらえたものを使用すること

この2つを守ること。できたら、さきほど「Export」したcf_O_faceの「MainTex」で読み込みましょう。そのまま読み込んだだけではキャラごとの数値変動によって歪んで見えると思うので、「目元」のパラメータ(上まぶたの形状1~3など)をすべて「Reset」してみてください。そうすると、テクスチャ画面の通りに表示されるはずです。

スクリーンショット 2022-01-19 001834

なかなか一発でうまくいくことはありませんが、移動ツールなどを使って微調整していけば大丈夫なはず。片方のアイラインがうまくできたら、左右反転コピペして、左右対称になるように並べれば完成です(両目の位置がずれないように、UVmapの線をよく見て配置してくださいね)。

べたっと塗りつぶしただけだとちょっとアイラインが目立ちすぎるので、できたら目頭と目尻をスプレータイプの消しゴムで少しだけ消す(ぼかす)と、いい感じにグラデーションしてくれますよ!(↓)

スクリーンショット 2022-01-19 002249

アイラインがきれいに表示されたら、さきほどResetした「目元」のパラメータをさっそくいじって、目の位置や横縦の大きさ、角度などをつけていきましょう。これでアイラインは完成です!

なお、作った顔テクスチャには上の画像のように、エクスポートした時点の肌の色やほくろ、チークなどの化粧があらかじめ描き込まれています。このほかにも、鼻のラインや影、ほほのテカリなどをここで描き込むこともできますよ。

4.瞳を再現する


アイラインが引けたら、今度は瞳も似せていきましょう。まずは「瞳の種類」と「瞳のグラデ種類」から、できるだけ頑張って近いものを用意してください。ゼロから目を描くのはけっこう大変なので、既製品でできるだけハイライトを除く下地が再現できれば、作業時間が大幅に圧縮できます。できたら、先程と同様にMaterialEditor(face)を開き、左上の検索欄にhitomiと打ち込むと、「cf_m_hitomi_00」が見つかると思います。いつもと同様に「MainTex」をExportしましょう。

_Export_2022-01-16-23-23-43_cf_m_hitomi_00_MainTex.png
このような瞳のテクスチャが表示されたら、あとはもうおわかりですね。ここに別レイヤーでハイライトを書き込んでいきます。たいていのキャラの場合、楕円選択ツールと塗りつぶしで再現できるでしょう。こだわる場合は、さきほどのように見本画像を半透明に重ねて、全く同じ位置にハイライトを入れてもいいですが、そこまでやってもあまりクォリティは変わらないと思います。

スクリーンショット 2022-01-18 234130

これで完成です!中央の白とピンクのハイライトに比べて、下のハイライトはより透明度を下げて、見本画像に寄せています。あとはさきほど「Export」したcf_m_hitomi_00のMainTexでこれをインポートすれば・・・

スクリーンショット 2022-01-19 003144

ここまで寄せることができました!

見本画像と見比べると、アイライン(上)が少し薄く表示されている(つまり、テクスチャが上下圧縮されて表示されている)ことが分かるので、あとは時間の許す限り拡縮をくりかえしていきましょう。ちなみに、ハイライトを書き込んでしまうとスタジオでハイライトを消してエロい画像を取ったりすることが簡単にできなくなるので、ハイライトを書き込む前の瞳のテクスチャもとっておけば、スタジオ内のMaterialEditorを起動してそのテクスチャを読み込むことでハイライトなしの瞳を再現できますよ。
※ハイライトについてはMaterialEditorでなく「iris overlay」を使う方法もあるのですが、個人的にあまり手間は変わらないと思います。

おわりに

CharaStudio-2022-01-19-00-54-21-Render.png


そんなわけで、「MODを使ってウマ娘の目を再現しよう!」でした。絵心がなくても、工夫次第で大好きなキャラクターを再現できるのがコイカツの楽しいところですよね。のテクスチャをそのままいじっているので、肌の色を変えたり、ほくろの位置や化粧を気軽に変えたりできなくなること、またいわゆる「ギャグ目」にできなくなることがネックなのですが、一番簡単に目を再現できる方法だと思うのでまずはこちらを紹介させていただきました。

※1 肌の色を変更できるようにするには、顔のMainTexの画像のうち、もともとExportしてきた肌色のテクスチャのレイヤーを削除し、自分で引いたアイラインだけのpng画像を「Overlay」機能を使って読み込む方法があります。Pixivユーザーの「ヘルオド」様が詳しく解説されているので、そちらを参考にしてみると捗るはずです!

※2 さらに「ギャグ目」も表示可能にするには、素直に①eyeline_00_up(アイライン上)②eyeline00_kage(アイライン上の影)③eyeline_00_down(アイライン下)の3つのMaintexを差し替える必要があります。

それでは皆様、愉快なコイカツライフを!賢木でした。

関連記事

とても分かりやすかったです こういった初心者向けの記事があると色々作りたくなりますね!
[ 2023/02/13 22:31 ] [ 編集 ]

コメントの投稿













管理者にだけ表示を許可する