こんにちわ、オオバです。

Unity UIのマスク表現には課題がありました。
グラデーションマスクが使えなかったことです。

グラデーションマスクとは、
少しずつ透明になっていくマスク表現です。

朗報です。

Unity2020あたりから、
RectMask2Dにグラデーションマスクが実装されました!!

まだ知らないという、Unityエンジニア、UIデザイナーのみなさん。
ぜひ覚えてもらってUI表現の幅を広げていただければと思います。

📝 目次

RectMask2Dでグラデーションマスク可能

元画像(マスクなし)グラデーションマスク後
【UIデザイナー向け】uGUIでグラデーションマスクの作り方_36
【UIデザイナー向け】uGUIでグラデーションマスクの作り方_36

RectMask2Dコンポーネントを使うと
このようなグラデーションマスクが使えます。

マスク画像は不要

RectMask2Dコンポーネントを使用するため
マスク画像は不要です。

マスク対象はRectMask2Dの子階層

RectMask2Dコンポーネントをつけた
GameObjectの子階層がマスク対象です。

【UIデザイナー向け】uGUIでグラデーションマスクの作り方_52

↑の例では「Image」がマスクされます。
子階層であれば複数のGameObjectも
まとめてマスク可能です。

X・Y軸それぞれ具合の設定可

【UIデザイナー向け】uGUIでグラデーションマスクの作り方_60

RectMask2Dコンポーネントの
Softnessの値を0以上にすると、
x、y軸それぞれグラデーション具合を調整できます。

【UIデザイナー向け】uGUIでグラデーションマスクの作り方_65

【要望高】スクロールリストにグラデーションマスク

グラデーションマスクの使い所の1つは、
スクロールの境界表現です。

今までUIデザイナーから
スクロールの境界をグラデーションできれいに消したい
要望が多くありました。

RectMask2Dを使うことで実現可能です。

【UIデザイナー向け】uGUIでグラデーションマスクの作り方_79

ノーコードでグラデーションスクロールリストの作り方

  1. ヒエラルキーで右クリック
  2. UI > Scroll Viewをクリック
  3. ViewportのMaskを削除
  4. RectMask2DをAddComponent

上記の手順でソースコードを書かずに
グラデーションマスク付き
スクロールリストを作れます。

【UIデザイナー向け】uGUIでグラデーションマスクの作り方_93

まずはヒエラルキー上で右クリック。
UI > ScrollViewをクリックしましょう。

ViewportのMaskをRectMask2Dに置き換える

作成されたScrollViewを調整していきます。

ViewportのMaskをRemove

【UIデザイナー向け】uGUIでグラデーションマスクの作り方_104

ViewportにはデフォルトでMaskコンポーネントがくっついています。
このMaskRectMask2Dに変更します。

  1. Maskコンポーネントのメニューを開く
  2. Remove ComponentMaskの削除
  3. RectMask2Dコンポーネントを追加

【UIデザイナー向け】uGUIでグラデーションマスクの作り方_112

AddComponentからRectMask2Dを選択

【UIデザイナー向け】uGUIでグラデーションマスクの作り方_115

Softnessでグラデーションの消え方を調整

【UIデザイナー向け】uGUIでグラデーションマスクの作り方_120

Softnessを調整することで
マスクのグラデーション具合を調整可能です。

グラデーションマスク付きScrollViewの完成

【UIデザイナー向け】uGUIでグラデーションマスクの作り方_127

このようにソースコードを1行も書くことなく
グラデーションマスク付きScroll Viewを
作ることができます。

まとめ

Unity2020あたりから実装された
RectMask2Dのグラデーションマスクを紹介しました。

リアルにUIデザイナーからは要望が多かった
グラデーションマスク付きスクロールリスト。

今のUnityでは拡張することなく実装可能!!

UI実装するUnityエンジニアには
ぜひ覚えてもらいたいテクニックです。

またUIデザイナーのみなさんも、
このUnityの新機能を知ってもらって、
実装担当のUnityエンジニアの方に
伝えてもらえればと思います。

今までより一歩クオリティアップした
UIが作れるかも知れません。

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

👉 オススメ記事

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

👩‍💻 検証環境