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

きれいなソフトマスクを作りたい!
というUIデザイナーさんの声をよく聞きます。

ソフトマスク とは少しずつ透明になっていくマスク表現です。
結論uGUIできれいなソフトマスクが表現できません。

Unityでマスク表現をしたい場合、
uGUIの Mask 使うことが多いのではないでしょうか。

オオバ
オオバ
テクスチャをマスクするためのコンポーネントですね

使い勝手が悪く、思ったのと違うものが作られます。
本記事では きれいなソフトマスクを作る方法 を紹介します。

 1画像1マスクできれいなソフトマスクは表現可能

【uGUI】きれいなソフトマスクUIを作る方法_0

結論を簡単にまとめます。

簡単なuGUIシェーダーのカスタマイズで
ソフトマスクの実現は可能です。

制限として1枚の画像に対してのみマスク可能 ということです。
紹介する手法で階層構造のUIに一括マスクはできません。

表現方法の手札は確実に増える ため、
ぜひ読んでみてください。

詳細を解説していきます。

この記事の内容

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

↓理想はこういうのです。

【uGUI】きれいなソフトマスクUIを作る方法_1

↓現実はコチラです。

元画像マスク画像結果
【uGUI】きれいなソフトマスクUIを作る方法_2
【uGUI】きれいなソフトマスクUIを作る方法_2
【uGUI】きれいなソフトマスクUIを作る方法_2

なんか思ったのと違うものができあがります。
Maskコンポーネントでソフトマスクは表現できない のです。

マスクの縁も汚い

【uGUI】きれいなソフトマスクUIを作る方法_3

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

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

どうしてもマスクの縁が汚いため、
縁を上から別の画像で隠すなどの工夫が必要です。

別の対策として マスク画像の解像度を高くする ことで
かなり軽減することは可能です。

👉 年収UP率93.8% / 平均年収UP額126万円のエンジニア転職サイト【転職ドラフト】

uGUIシェーダーをカスタマイズして解決

【uGUI】きれいなソフトマスクUIを作る方法_4

シェーダーを新規で書いて対応します。
Maskコンポーネントを使いません。

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

↓コチラの記事を参考に本家からダウンロードしましょう。

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

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

1.Mask画像をセットできるようにシェーダーを修正

【uGUI】きれいなソフトマスクUIを作る方法_5

マスク画像をセットできるように
Propertiesを調整 します。

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

_MaskTex変数を定義。

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

Passの中でMask画像を参照したい ため、
同名の_MaskTex変数を定義します。

マスク画像を用意

【uGUI】きれいなソフトマスクUIを作る方法_6

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

【uGUI】きれいなソフトマスクUIを作る方法_7

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

2.マスク画像のアルファ値を参照してカラー合成

【uGUI】きれいなソフトマスクUIを作る方法_8

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

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

フラグメントシェーダーで取得した
マスク画像のピクセルが大事なポイントです。

ピクセルごとのアルファ値に、
マスク画像のアルファ値をセット
します。

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

【uGUI】きれいなソフトマスクUIを作る方法_9

このように、きれいなソフトマスクを
表現できました。

👉 年収UP率93.8% / 平均年収UP額126万円のエンジニア転職サイト【転職ドラフト】

まとめ : 【条件付き】きれいなソフトマスクの作り方

【uGUI】きれいなソフトマスクUIを作る方法_10

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

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

しかし表現の幅は増やせたました。

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

工夫でしのぎつつアップデートを待ちましょう。

コチラの記事もオススメです。

ソースコード全体はコチラ

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

👉 uGUIソフトマスクシェーダーコードはコチラをクリック


Unity初心者、UIデザイナー向けの発信をTwitterをやってます!
ぜひフォローしてみてください!
👉フォローはこちら!

YouTubeも始めました!!「Unity初心者大学」
チャンネル登録お願いします!

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

オススメ記事
検証環境