読者です 読者をやめる 読者になる 読者になる

渋谷ほととぎす通信

完全趣味でやってるUnityメモ。説明できないところを説明できるようにするための個人ブログ。昨日の自分より少しでも大きく慣れるように。。。 ※所属団体とは一切関係がありません

Unity uGUIで綺麗なマスク表現


f:id:esakun:20150730215258g:plain

uGUIにはテクスチャをマスクするためのMaskコンポーネントご実装されていますが、まあこいつが使えない。

f:id:esakun:20161105020738p:plain:h100 f:id:esakun:20161105020816p:plain:h100 f:id:esakun:20161105020839p:plain:h100
元画像 マスク画像 結果

なんか思ったのと違うものが出来上がります。

縁が汚い

f:id:esakun:20161105020901p:plain

アンチエイリアスが効かないので、カーブを持つマスク画像だと結構ジャギが目立ちます。
指定したマスク画像のアルファ値が1未満になると0に切り捨てるっぽいです。

クオリティを担保するためにマスクの縁を上から隠すなどの工夫が必要です。

根本解決ではないのですが、回避方法の1つを紹介します。

マスクコンポーネントを使用しない

マスクシェーダを新規で書いて対応します。uGUIのシェーダは本家のシェーダをカスタマイズします。

www.shibuya24.info

上記の記事を参考に本家からダウンロードしてください。

とりあえず完成ソースから。

gist.github.com

マスク用テクスチャをプロパティからセットできるようにする

Properties
{
   ....
    _MaskTex("MaskTexture",2D) = "white"{}
}


Pass
{
    ....
    sampler2D _MaskTex;
}

マスク画像自体ははグレースケールで作ります。 白に近づくと不透明、黒に近づくと透明度が上がります。

f:id:esakun:20161105022215p:plain

※TextureのインスペクタでAlpha from Grayscale にチェックを入れることを忘れずに。

マスク画像のアルファ値を反映

half4 maskCol = tex2D(_MaskTex, IN.texcoord);
color.a = maskCol.a;

フラグメントシェーダで、取得したピクセルごとのマスク画像のアルファ値を出力カラーのアルファ値に代入します。

f:id:esakun:20161105021756p:plain

そうすると、このように綺麗なグラデーションを表現するマスク画像が作成できます。

問題点

マスクコンポーネントと違い、子階層のuGUIオブジェクトには適用できません。
あくまで1枚ごとのRawImageに対して適用できるマスク表現です。

あわせてどうぞ

www.shibuya24.info

www.shibuya24.info

www.shibuya24.info

www.shibuya24.info