【Unity】UIの逆マスクを標準機能＆ノーコードで実装

Unity公式コミュニティで、ステンシル処理をノーコードで出来る方法を発見。
(外部アセットもなし)

• Image＆TextMeshProに対応。
• Maskコンポーネント不要。
• 親子関係不要。

マテリアルの設定を変えるだけで、シェーダーのコードを変更しなくてもOk。
弄くり回してたらTextMeshProでも出来た。

元となったソースはココ↓

• Unity: 2019.4.1f1で動作確認済み。
• ゴブリン画像の制作元: ふわふわにゃんこ

設定手順

Imageの場合

1. 新規マテリアルを作成、MaskMaterialと命名。
2. インスペクターから設定。
   • Shader -> UI -> Default
   • Tint Color: (255, 255, 255, 1)
   • Stencil Comparison: 8
   • Stencil ID: 1
   • Stencil Operation: 2
   • Stencil Write Mask: 255
   • Stencil Read Mask: 255
   • Color Mask: 0
   • Use Alpha Clip: true
3. 新規マテリアルを作成、MaskedMaterialと命名。
4. インスペクターから設定。
   • Shader -> UI -> Default
   • Tint Color: (255, 255, 255, 255)
   • Stencil Comparison: 3
   • Stencil ID: 2
   • Stencil Operation: 0
   • Stencil Write Mask: 0
   • Stencil Read Mask: 1
   • Color Mask: 15
   • Use Alpha Clip: false
5. マスク側のImageのマテリアルに、MaskMaterialを設定。
6. マスクされる側のImageのマテリアルに、MaskedMaterialを設定。

TextMeshProの場合

マスク側

1. Text – TextMeshProを作成。
2. インスペクター -> 一番下のSDFのアイコンを右クリック -> Create Material Preset
   (TextMeshProの設定は、同じMaterial Preset間で共有される為、別の物に分けている)
   (“Font名 Mask”等と命名すると使い回し易い)
3. インスペクターから設定(前半Imageの場合と同じ)。
   1. Shader -> UI -> Default
      • Tint Color: (255, 255, 255, 1)
      • Stencil Comparison: 8
      • Stencil ID: 1
      • Stencil Operation: 2
      • Stencil Write Mask: 255
      • Stencil Read Mask: 255
      • Color Mask: 0
      • Use Alpha Clip: true
   2. Shader -> TextMeshPro -> Mobile -> Distance Field – Masking
      (UI/Defaultシェーダーで変更した内部の値が残ったままになり完成)

マスクされる側

1. Text – TextMeshProを作成。
2. インスペクター -> 一番下のSDFのアイコンを右クリック -> Create Material Preset
   (TextMeshProの設定は、同じMaterial Preset間で共有される為、別の物に分けている)
   (“Font名 Masked”等と命名すると使い回し易い)
3. インスペクターから設定(前半Imageの場合と同じ)。
   1. Shader -> UI -> Default
      • Tint Color: (255, 255, 255, 255)
      • Stencil Comparison: 3
      • Stencil ID: 2
      • Stencil Operation: 0
      • Stencil Write Mask: 0
      • Stencil Read Mask: 1
      • Color Mask: 15
      • Use Alpha Clip: false
   2. Shader -> TextMeshPro -> Mobile -> Distance Field – Masking
      (UI/Defaultシェーダーで変更した内部の値が残ったままになり完成)

使い方 (設置順)

• ヒエラルキー -> 「マスクされる側」を「マスク側」の下に配置。
  (子でなく、同階層の下でOk)

注意点

以下のフォントでは、逆マスクが上手くいかなかった。
(マスクに使う場合は大丈夫)

• アウトライン付きのフォント
  (アウトラインも単色(Vertex Color)になる)