何処惹塵埃: ペイントソフト(MediBang Paint)によるテクスチャー編集

VRoid Studio 使い方メモ

関連記事1のように、バーチャル渋谷参加をきっかけにVroid Studioを使ってアバターのカスタマイズを行った。その過程でペイントソフトを使ったので、メモを残す。

参考情報

メディバンペイント(MediBang Paint)

いろいろな方のVRoid Studioの解説を見ていると、CLIP STUDIO(略称クリスタ？)というソフトがメジャーなようだったが、有料ソフトだった(無料体験期間あり)。無料ソフトでは、メディバンペイントを使っている方がいたので、それを使ってみることにした。ただし、以下に記載の事は、レイヤーがあるペイントソフトなら多分同じようなことができる。

以下、使ってみた時のメモ。VRoid Studio上での効果は、参考記事1を参照

レイヤー
別々に編集して、後から重ねて表示できる。元の絵を残しておくとか、縁取りだけを別レイヤーに書く、下書きをする等に使える。レイヤーごとに表示・非表示を切り替えて必要な部分だけを表示することも可能。下書きレイヤー(出力されない)やマスク(その部分を隠す)、ステンシル(その部分だけ見せる)等も。またフォルダを作って、関連するものをまとめることもできる。作業は選択してハイライトされたレイヤーに対して行われる。また選択していても表示していないと反映されないので注意。
保存、書き出し
保存は、専用の、*.mdp形式(レイヤー構造が保存される)。*.png等に形式を選んで保存することもできるが、VRoid Studioとの連携では、保存は、*.mdpにしておき、書き出しで*.pngを保存する方が使いやすい(何度も形式を切り替えながら保存する必要がない)。レイヤー(下書き設定を除く)で表示されている部分が書き出される。透過部分を透過するために、「透過PNG」で保存すること。
色変更
VRoid Studio上ではテクスチャ編集のところで、基本色、かげ色等をカラーマップから選ぶと、簡単に色を変えられる。ところが、Medibang Paint上で、フィルター→色相をいじっても微妙にしかかわらない。元が白黒に近い色だと色相では変わらないようだ。色相フィルターはHSV色空間のパラーメーターをいじるもののようなので、RGBからHSV色空間の変換式を見ると何となく理由がわかる。トーンカーブをいじれば変わるけど、思った色にするのは難しい。いろいろ試した結果、以下のやり方がよさそうだった。

VRoid Studioからエクスポートした画像をレイヤーに読み込み
レイヤー→変換→8bitで白黒に
その下に新規レイヤーを追加し、ほしい色で塗る(バケツツール)
8bit化したレイヤーを重ねて表示
背景部分の色を削除(この場合、フードや前側を削除しているので、そのままVRoid Studioに読み込むと、フードや前側が無地の青になってしまう)。自動選択ツールで背景部分を選んで、deleteで削除。ゴミが残った場合は、手動で消去(下記参照)。
色を変えたいときは、3のレイヤーをバケツツールで塗ると変わる(半分だけ変えてみた)。
VRoid Studioに読み込むとこんな感じ

ゴミの削除
自動選択ツールで不要部分を消したつもりでも、小さなゴミが残っていることがある。薄い色だと見えずに気づかない。再度自動選択すると、点々でハイライトされるので見つけやすくなるので、その状態で削除するとよい(できるだけ上流で)。
縁取り
服のテクスチャーに縁取りすると、少しシャキッとする。

縁取りしたいテクスチャーのレイヤーの上に縁取り用のレイヤーを作成
自動選択ツールで縁取りしたい太さ分(5pixel程度)拡張を設定(上部中心付近)した状態で、服の外側を選択。なお拡張設定した場合次に気づかず間違えるので、そのたびに0に戻しておいた方がよさそう。(下記はわかりやすくするために、32pixel拡張している)
バケツツールで縁取りしたい色で塗る。その時、服のテクスチャーは非表示にしておかないと、選択範囲ではなく服の外側だけ塗られるので注意。バケツツールにも拡張設定があったので、実は2の作業は不要な気がしてきた。(下記はわかりやすくするために赤で縁取り)
縁取りのレイヤーを非表示、服のレイヤーを表示、自動選択の拡張を０にした状態で服の外側を選択後、選択→反転で服の部分を選択(下記はその後に縁取りレイヤーを表示した状態)
縁取りレイヤーを表示後、選択されている服の部分をdeleteで削除
いらない部分を削除
VRoid Studioに読み込んだところ
＊上記では襟の後側に縁取りがない。同様にして縁取りをすればよいが、服のテクスチャーの後襟部分はガイドよりはみ出しているので、服の端っこに縁取りしてもVRoid Studio上では表示されない。服ではなく、ガイドの画像に対して、同様の作業を行う必要がある。

影
影を付けると立体感がでる。重ね着だとよりそれっぽくなる気がする。

影を付けたいテクスチャーのレイヤーの下に影用のレイヤーを作成
自動選択ツールで服の外側を選択後、選択→反転で服の内側を選択。拡張、縮小で範囲を変えると、影の感じが変わるかも。
バケツツールで服の内側の範囲を黒(影にしたい色)で塗る
選択を解除後、フィルタ→ガウスぼかし(ほかのぼかしでもいいかも)でぼかす。事前に選択を解除しておかないと、外に広がってにじまないので注意。
影を付けたいレイヤーを重ねて表示
影と関係ない部分にも影ができているが、マッピングされないところは関係ないので、そのままでよい。もし邪魔な部分があったら消す。
VRoid Studioに読み込んだところ

変形(マッピングパターンの移行)
VRoid Studioのある3D形状用のテクスチャを別の3D形状用のテクスチャに移し替えた時の説明。具体的には、パーカーのテクスチャの一部を、ロングコートに移し替えた。ロングコートのガイド上に、パーカーからアレンジしたテクスチャを表示したところ。当たり前だが、大きくずれている。これを合わせていく。
胴体の左側(体の左という意味)のみになるようにその他を削除
上側(肩口)の位置を合わせる。選択ツールで選択後、移動ツールで移動
左右の幅を合わせる。選択ツールで選択(左側が胴(画像)の中央になるように)選択後、メニュー→選択範囲→変形。さらに、下部のオプションで、対角を固定を選択。
右側をドラッグして、カーディガンの右端がロングコートの右端に合うように縮める。
前(内)側の肩口が上にはみ出しているので合わせる。部分的に選択して変形。歪みを減らすため、選択範囲は広めに。

レイヤーをコピー(レイヤーリストの付近のアイコン)してから反転(メニュー→レイヤー→回転→左右反転)
袖の向きと位置合わせ
形状が合わないので、引き延ばし。選択後、メニュー→選択範囲→メッシュ変形。分割数を設定。今回は縦方向は伸ばさないので、縦分割数は1にした。

パット見うまく形はあっているようだが、実は合っていない。
この状態でVRoid Studioに読み込むと以下のようだった。
袖が肩のところでつながっていないし、裾の下部に変な模様があり、更に長すぎる。テクスチャにある裾のところの波波は、本来の3Dの裾位置なら、裏側に回り込んだ部分用。下から覗き込んだ時に中が見えないようにするためのもの。今回は途中で切っているので、その部分は消したうえで、全体に短くなるように変形する。さらに袖の継ぎ目の部分をメッシュ変形でロングコートの形に合わせる。それっぽくなった。
ところが、後ろから見ると背中が開いていた。肩も縫い目が袖とつながっていない。
変形するときは、ガイドに対して多少余裕をもってはみ出すようにした方がよさそう。肩の縫い目のずれは頑張って合わした。
アニメ風
公式から、アニメ風キャラの作り方（アニメ風トゥーンテクスチャの作り方）という説明がある。Photoshopのカットアウトという機能を使う説明だが、同様のものがMediBang Paintには見つからなかった。濃淡2色ぐらいにするようだったので、1bit化を使って2値化して対応してみた。絵は取り損ねたので省略。普通に2値化のフィルターがあれば簡単なのだけど…