¶ 衣装を綺麗に切り抜く方法2選
この記事を開いた皆さんなら、「なんだか衣装のこのへんに穴を開けたくなってきたな…」ってことや、「このストッキング、透過で抜いてある部分をもう少し攻めてみたいな…」なんてことが時々あることと思います。一般的にはアルファマスクで解決を図るところですが、境界のジャギーが気になってしまい、諦めがちな方も多いのではないでしょうか。
今日はなるべくジャギーの発生しない、シェーダー側できれいに抜いてくれる方法を2つご紹介します。
¶ 1. 決まった形状の穴を空けたい（lilToonCustomClipper）
カスタムシェーダーの機能で、様々な種類の形状から好きなものを選んで空けることができます。
縦横比や縁取りなど、ちょっとしたカスタマイズもできるので、しっぽ用の穴を空けたり、谷間のあたりに穴を手軽に空けるのにおすすめです。
| ビフォー | アフター |
|---|---|
 |
 |
¶ 2. MSDF テクスチャをアルファマスクとして使用する（lilToon MsdfMask Extension）
¶ MSDFって…何？
MSDF は、輪郭の形を色で分けて記録した特別な画像で、シェーダーが色情報を使った計算に基づき、あるべき輪郭を復元することで、ベクター画像のように拡大しても崩れないようになっています。
輪郭のヒントになる距離情報を各ピクセルに色で記録しているので、普通のテクスチャより遥かに低い解像度でも十分な情報量を持っています。
低い解像度からシャープな輪郭を描画できる特性から、ゲーム製作ではフォントの埋め込みなどに活用されることの多い技術です。
通常版のlilToonでもメインカラー2nd/3rdが対応しており[1]、単色のデカールを綺麗に貼ったりすることができます。
↑ 単色デカールでの使い方はこの投稿のツリーにあるGoogle Docsのリンクも見てね
¶ lilToon MsdfMask Extension とは
lilToon の主要なマスクテクスチャについて、このMSDFテクスチャを使用する（マスクテクスチャに指定された画像をMSDFとして解釈する）ためのオプションが追加されたカスタムシェーダーです。
詳しくは lilToon MsdfMask Extension :: kb10uy's Various Tools を見てください。
lilToon_MsdfMask の解説・使い方 – Liberty in the Cavity で作者本人による解説があるので、当記事はあれでわからんかった人向けという立ち位置です。
¶ アルファマスクをSVGで用意する
この記事における最大の鬼門です。とはいえ、いくつかやってみた中で比較的簡単な方法を残しておきます。
InkscapeやIllustrator、Affinity Designerなどベクターを扱えるドローソフトに長けている方はこの項を飛ばし、ご自身の一番やりやすい方法で作成してください。
まずは普段通りにアルファマスクをPNGで用意してください。ただし、この手法では以下の項目に気をつけてください。
- 白と黒の2値ではっきり分かれたものを使用してください。
- グラデーションや透過は不可です。
- 最初に用意するマスクは、背景色を白にするほうがおすすめです
- 今回使用するツールの都合で、こうしたほうが成功度が高いです
- 黒背景でSVGに変換した際、たまに背景を黒で塗りつぶしてくれないパターンがあり…
- どのみちMSDFテクスチャを生成する段階で黒背景白抜きになります
- 今回使用するツールの都合で、こうしたほうが成功度が高いです
次に、Adobe ExpressのWebサイトにアクセスします。無料会員で問題ありません。他にも便利なツールがいろいろあるので、この機会にお手持ちのGoogleアカウントなどで会員登録してください。 他の怪しいサイトに登録するよりはよっぽどマシです。
ページの指示通りにPNGのマスク画像を投げ込んだら、SVG形式に変換したものがダウンロードできます。
次に、このSVGから問題なくMSDFテクスチャを作成できるように、一手間加える必要があります。SVGを右クリックして、メモ帳などのテキストエディタで開いてください。
だいたいこんなふうになっています（最初のsvgタグだけ、見づらいので改行を加えています）
.<svg version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px"
width="100%"
- viewBox="0 0 1024 1024"
+ viewBox="0 0 128 128"
- enable-background="new 0 0 1024 1024"
+ enable-background="new 0 0 128 128"
xml:space="preserve">
+ <g transform="scale(0.125)">
<path fill="#000000" opacity="1.000000" stroke="none"
d="
(中略)
z"/>
+ </g>
.</svg>
上に差分を示した通り、
viewBoxやenable-backgroundに1024などの数値が入っていれば128に- 最初の
pathタグが始まる前にgタグでscaleを（128をviewBoxの元の値で割った数に）設定 - 最後の
pathタグと/svg閉じタグの間で/gを閉じる
以上三点の変更を加えます。
これで問題ないかどうかは、エクスプローラー上でのサムネイルでだいたい確認できます。どこか間違えていれば、見切れて何も映らなくなっているか、逆に広大なキャンバスの左上にちっっっっさく映っているかの（大抵は）どちらかです。サムネなんてなくてEdgeのアイコンしか出ないって？どうすんだっけ…
¶ msdfgen でSVGからMSDFテクスチャに変換する
あとは Chlumsky/msdfgen から msdfgen-1.13-win64.zip （執筆時点の最新版。より新しいバージョンでも問題ないはずです）をダウンロード・展開してコマンドを叩きます。
msdfgen.exe msdf -svg 入力元ファイル名.svg -o 出力先ファイル名.png -dimensions 128 128
こんな感じで出力されていればOKです。
¶ Unity に持ち込む
sRGB (Color Texture) をオフにすることと Compression: None にすることだけ気をつけてください。
あとはシェーダーを MsdfMask/lilToon に切り替えたら、アルファマスクにMSDFテクスチャを指定して、 マスクテクスチャを MSDF テクスチャとして扱う を必要なところだけ有効にします。
¶ できた
胸のscale増やしてるのでアフターもちょっとボケてるのはゆるして。 アプデで鋭さを調節できるようになりました。
少しの手間で軽量化とクオリティ向上の一挙両得なので、ぜひやりましょうというご案内でした。
| ビフォー(4096x4096, 21.3MB) | アフター(128x128, 64KB) |
|---|---|
 |
 |
- おまけ: ちょっとセンシティブなビフォーアフター
- 有効（反転）はこう使います
https://lilxyzw.github.io/lilToon/ja_JP/color/maincolor_layer.html に一文があるのみなのでみんな見逃してたんじゃないかと思います ↩︎