見出し画像

Unityで、UIの逆マスクをノーコードで実装する方法【チュートリアルなどに応用!!】

ゲーム開発所RYURYU

更新日 2024 / 03 / 17

自己紹介

\ ココナラ実績140件達成 /
こんにちは！ゲーム開発所RYURYUのりゅうやと申します。

お知らせ
📢 公式LINEを通じて、無料で相談や見積もりを提供しています！
Unity関連のお仕事の依頼や、エラー解決などのお悩み事に、経験豊富なプロフェッショナルが対応します。


はじめに

UnityでのUI開発において、逆マスク（Invert/Reverse Mask）は非常に便利な機能です。これは、特定の領域を逆にマスクすることで、特異なビジュアルエフェクトを作成するのに役立ちます。

この記事では、Unity公式コミュニティで見つけたステンシル処理をノーコードで行う方法を紹介します。外部アセットは不要で、ImageおよびTextMeshProに対応しています。

参考文献

設定手順

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

  1. 別の新規マテリアルを作成し、「MaskedMaterial」と命名します。

  2. インスペクターで以下を設定します：

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

  1. マスク側のImageのマテリアルに「MaskMaterial」を設定します。

  2. マスクされる側のImageのマテリアルに「MaskedMaterial」を設定します。

TextMeshProの場合

  1. Text – TextMeshProを作成し、インスペクターからマテリアルプリセットを作成します。

  2. 「Font名 Mask」など分かりやすい名前を付け、マスク側の設定を行います（Imageの設定と同様）。

  3. マスクされる側のTextMeshProに対しても同様の手順を行い、「Font名 Masked」と命名します。

使い方 (設置順)

ヒエラルキーで、「マスクされる側」を「マスク側」の下に配置します。子オブジェクトでなくても、同階層の下であれば問題ありません。

注意点

  • 一部のフォント（例えばアウトライン付きのフォント）では、逆マスクが正しく機能しないことがあります。マスクに使用する際は注意が必要です。

以上で、UnityにおけるUIの逆マスクの実装方法を紹介しました。ノーコードで簡単に設定でき、UI開発の幅を広げることができます。是非試してみてください。

TOP記事

よろしければサポートお願いします！ いただいたサポートはクリエイターとしての活動費に使わせていただきます！by ゲーム開発所RYURYU