(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

(:3[kanのメモ帳]


本ブログの運営者kan.kikuchiが個人で開発したゲームです!

    

Imageを任意の形に切り抜き、かつ端を綺麗(ソフト)に表示する SoftMaskForUGUI【Unity】【uGUI】


このエントリーをはてなブックマークに追加


この記事でのバージョン
Unity 2020.3.9f1


はじめに

以前、Maskを使って画像を任意の形に切り抜いて表示するという記事を書きました。

f:id:kan_kikuchi:20170802074348g:plain


今回はそれと同様の機能ですが、さらに端を綺麗(ソフト)に表示する事の出来る

SoftMaskForUGUIというアセット(?)の紹介です!

f:id:kan_kikuchi:20210601164630j:plain


ちなみに以前紹介したImageで逆マスクを実現するUnmaskForUGUIと同じ作者さんだったりします。

f:id:kan_kikuchi:20190728113617g:plain


なお、記事中の画像は以下のアセットを使っております。

2D Fantasy Art Assets Full Pack | 2D Textures & Materials | Unity Asset Store


SoftMaskForUGUI

さっそくSoftMaskForUGUIの導入ですが、



GitHubから直接ダウンロードしてきてプロジェクトに追加してもいいですし、

f:id:kan_kikuchi:20210531150905p:plain


Package Managerを使ってインストールしても大丈夫です。

f:id:kan_kikuchi:20210601154700j:plain


次に使い方です。まず、マスクをしたいImage(例ではBackground)の親(例ではMask)に

マスク用のImageとSoft Maskを追加します。

f:id:kan_kikuchi:20210601164708p:plain


次にマスクしたいImageが付いたオブジェクトにSoft Maskableというコンポーネントを追加します。

f:id:kan_kikuchi:20210601164828p:plain


これだけでMaskについているImage(例だとKnob)の形に切り抜く事が出来ます。

ちなみにUnity標準のMask(右側)と比較してみると以下のような感じになります。

f:id:kan_kikuchi:20210601164630j:plain