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

Unity UIのマスク表現には課題がありました。
ソフトマスクが使えなかったことです。

ソフトマスク とは、
少しずつ透明になっていくマスク表現です。

UIデザイナーのみなさま朗報です。

Unity2020あたりから、
RectMask2Dにソフトマスクが実装されました!!

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

しかも本記事はプログラミングは一切出てこないので安心して下さい。

RectMask2Dを使うと簡単にソフトマスクが作成できます

元画像(マスクなし)ソフトマスク後
【UIデザイナー向け】Unity UI(uGUI)でソフトマスクの作り方※プログラミング不要_0
【UIデザイナー向け】Unity UI(uGUI)でソフトマスクの作り方※プログラミング不要_0

RectMask2Dコンポーネントを使うと
このようなソフトマスクが使えます。

結論こちらのショート動画を見れば作れると思います。
文字ベースでじっくりやりたい方は続きを読んでみてください。

この記事の内容

なんとマスク画像は不要です!

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

マスク対象はRectMask2Dの子階層

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

【UIデザイナー向け】Unity UI(uGUI)でソフトマスクの作り方※プログラミング不要_1

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

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

【UIデザイナー向け】Unity UI(uGUI)でソフトマスクの作り方※プログラミング不要_2

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

【UIデザイナー向け】Unity UI(uGUI)でソフトマスクの作り方※プログラミング不要_3

【要望高】スクロールリストにソフトマスク

ソフトマスクの使い所の1つは、
スクロールの境界表現です。

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

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

【UIデザイナー向け】Unity UI(uGUI)でソフトマスクの作り方※プログラミング不要_4

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

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

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

【UIデザイナー向け】Unity UI(uGUI)でソフトマスクの作り方※プログラミング不要_5

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

ViewportのMaskをRectMask2Dに置き換える

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

ViewportのMaskをRemove

【UIデザイナー向け】Unity UI(uGUI)でソフトマスクの作り方※プログラミング不要_6

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

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

【UIデザイナー向け】Unity UI(uGUI)でソフトマスクの作り方※プログラミング不要_7

AddComponentからRectMask2Dを選択

【UIデザイナー向け】Unity UI(uGUI)でソフトマスクの作り方※プログラミング不要_8

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

【UIデザイナー向け】Unity UI(uGUI)でソフトマスクの作り方※プログラミング不要_9

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

ソフトマスク付きScrollViewの完成

【UIデザイナー向け】Unity UI(uGUI)でソフトマスクの作り方※プログラミング不要_10

このようにソースコードを1行も書くことなく
ソフトマスク付きScroll Viewを
作ることができます。

まとめ : ソフトマスクのスクロールはプログラミングすることなく作成可能

【UIデザイナー向け】Unity UI(uGUI)でソフトマスクの作り方※プログラミング不要_11

Unity2020あたりから実装された
RectMask2Dのソフトマスクを紹介しました。

UIデザイナーからは要望の多かった
ソフトマスク付きスクロールリスト

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

今すぐ担当Unityエンジニアに伝えるべし!

【UIデザイナー向け】Unity UI(uGUI)でソフトマスクの作り方※プログラミング不要_12

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

またUIデザイナーのみなさんは、
この新機能を実装担当のUnityエンジニアに伝えましょう。

オオバ
オオバ
この記事のURLをエンジニアに伝えちゃいましょう

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


フォローすると UIデザイナー力の上がるTwitter やってます!
今日から使えるテクニックを発信中。
ぜひフォローしてみてください!
👉フォローはこちら!

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

オススメ記事
検証環境