お前の可愛いを全員が好きだと思うなよ
Twitterのアイコンが生意気そうな柴犬から元の青い鳥に復活して一安心な皆さんこんにちは。PCで呟こうとすると人を小馬鹿にしたような柴犬のアイコンを見なくてはならず一時はTwitter自体を辞めようかとも思ったのですが、無事に復活して良かったです。いくら経営者だからといって自分の趣味趣向を何の通告もなく一方的に押してけるのは止めて頂きたいものです。
画像(Image)の切り抜き
以前からUnityでは画像(Image)に対して任意の形状で切り抜いて表示するMaskという機能がありました。
これにより大きな画像の一部をボタンの模様にしたり、画面転換の演出の一部として使うことができるのですが、CutOffのような形で切り抜くので切り抜き画像のエッジ部分が非常に目立ってしまい、その為使用用途が限られていました。
しかしUnity2020バージョンからはRectMask2Dコンポーネントに「Softness」のパラメータが追加になり、画像を矩形に切り抜く場合には「Softness」のパラメータを変更することでソフトマスクとして切り抜くことが出来ます。
上記の通り「Softness」のパラメータに0以上の数字を設定すると
こんな感じで周囲をぼかすような形で矩形に切り抜くことができます。
SoftMaskForUGUI
とはいえ、矩形だけでは色々な使用ケースには対応できないので、できれば任意の形で切り抜きを行いたいと思います。
その為の任意の形でのソフトマスクを実現するパッケージがGitHubの方で公開されています。
こちらのパッケージはお使いのPCがGitHubを導入している場合はPackage Managerから上記のURLを指定することでインポートできます。
GitHubを導入してない場合は、ReleaseタブからSource.zipをダウンロードして、展開したフォルダの中にあるShaderフォルダとScriptフォルダをUnityEditorのProjectウィンドウへDrag&Dropすることで導入することができます。(事前にmetaファイルは削除した方が良い)
使い方
このパッケージはRectMask2Dのようなパラメータでソフトマスクを実現するのではなく、Mask画像のアルファ値を適用することでソフトマスクを実現しているのでソフトマスクの元となるMask画像は自分で用意する必要があります。今回は以下のような画像を作りました。
次に通常のMaskと同様に切り抜きを行いたい画像(Image)をMask画像の子オブジェトとします。
Mask画像側に「SoftMask」という2つのコンポーネントをセットし、Imageには上記のMask画像を設定します。
次にマスクしたい画像(Image)にSoft Maskableというコンポーネントを追加します。
すると下図のとおりきれいなソフトマスクが作れます。
