こんにちわ、Unityエンジニアのオオバです。

uGUIにはMaskコンポーネントがあります。
テクスチャをマスクするための機能ですね。

使い勝手は悪く思ったのと違うものが作られます。

ところでuGUIできれいなマスクを作りたいですよね。
uGUIのマスク状況を解説しつつ、
きれいなマスクを作る方法を紹介します。

📝 目次

uGUIで、きれいなマスクを作るのは難しい

【uGUI】きれいなマスクを作る方法_29【uGUI】きれいなマスクを作る方法_29【uGUI】きれいなマスクを作る方法_29
元画像マスク画像結果

なんか思ったのと違うものが出来上がります。
そう、グラーデションマスクが使えないのです。

マスクの縁も汚い

【uGUI】きれいなマスクを作る方法_39

アンチエイリアスが効かないため、
カーブ(曲線)を持つマスク画像だでは
かなりジャギが目立ちます。

マスク画像のアルファ値が1未満になると0に切り捨てられます。
つまり少しでも半透明の部分はマスクとして切り取られてしまいます。

どうしてもマスクの縁が汚いため、
縁を上から別の画像で隠すなどの工夫が必要です。
※マスク画像の解像度を高くすることで多少軽減することはできます。

Maskコンポーネントを使わない

あえてMaskコンポーネントを使わない選択肢を取りました。
シェーダーを新規で書いて対応しました。

uGUIのシェーダーは特殊なので、
Unity公式のシェーダーをコピーして
最低限の変更を加えています。

【Unity】UIデザイナー向け!uGUIで色の加算合成をする方法
↑コチラの記事を参考に本家からダウンロードしてください。

今回の実装で重要なのはコチラの2点です。

  1. Mask画像をセットできるようにする
  2. マスク画像のアルファ値を参照

1.Mask画像をセットできるようにする

Properties  
{
    // マスク画像を外からセットできるようにする  
    _MaskTex("MaskTexture",2D) = "white"{}  

~~~ 省略 ~~~  

Pass  
{
    // Mask画像を定義  
    sampler2D _MaskTex;  

マスク画像を外からセットできるように
Propertiesを調整。
Passの中にMask画像(_MaskTex)を定義します。

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

【uGUI】きれいなマスクを作る方法_97

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

2.マスク画像のアルファ値を参照

シェーダーの中で最も重要なのは、
こちらの2行です。

// マスク画像のカラーを取得  
half4 maskCol = tex2D(_MaskTex, IN.texcoord);  
// マスク画像の透明度を出力のカラーにセット  
color.a = maskCol.a;  

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

これによりきれいなマスク表現が可能になります。

uGUIできれいなマスク完成

【uGUI】きれいなマスクを作る方法_121

きれいなソフトマスクを
表現できました。

まとめ uGUIできれいなマスクの作り方

uGUIシェーダーをカスタマイズ、マスク画像を用意することで
きれいなマスクを作ることができました。

もちろんこの手法は万能ではありません。
Maskコンポーネントのように
子階層にオブジェクトまでマスクはできません。

しかし表現の幅は増やせたのではないでしょうか。

Unityの進化によってMaskコンポーネントも
ソフトマスクが使えるようになるかも知れません。

工夫でしのぎつつ待ちましょう。

コチラの記事もオススメです。
👉オススメ記事 : 【UIデザイナー向け】uGUIでソフトマスクの作り方

全ソースはコチラ

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

シェーダーコード全文をコチラにアップしています。
何か参考になれば幸いです。
UI-Mask.shader · GitHub

最後まで読んでいただきありがとうございました!
すばらしいuGUIマスクライフをお過ごしください。

👉 オススメ記事

2021秋 Asset Refreshセール
100以上のアセットがなんと50%OFF!!オオバもいくつか買いました!
期間 : 10月2日午後3時59分まで

👩‍💻 検証環境