【Unity】「Procedural UI Image」を使ってシンプルなUIを爆速で作成する

Unity
マイケル
マイケル
あ〜〜〜UIの素材をいちいち作るの面倒くさいな〜〜〜
でもUnity標準のUIはダサいしな〜〜〜〜
マイケル
マイケル
・・・そんな場面はないでしょうか??
今回はシンプルなUIを爆速で作れる「Procedural UI Image」というアセットの紹介です!

ScreenShot 2022 08 22 20 32 38↑Procedural UI Image

エレキベア
エレキベア
UI作成は確かに時間がかかって面倒くさいクマ
これは期待大クマね〜〜〜
マイケル
マイケル
有料アセットにはなりますが、手軽に使えて
そこまで高くないので持っておいて損はないと思います!!
スポンサーリンク

Procedural UI Image の使い方

マイケル
マイケル
まずはPackage Managerからインポートしましょう。
ScreenShot 2022 08 22 20 35 46↑PackageManagerからインポート
マイケル
マイケル
通常のUIと同じく、「Create -> Procedural Image」から
選択して作成することができます。
ScreenShot 2022 08 22 20 37 32↑Createから作成
マイケル
マイケル
Imageコンポーネントと同様に扱えて、Modifier Typeから
4種類の形状を選択することができます。
ScreenShot 2022 08 22 20 38 52↑形状を選択
Free四つの角それぞれの丸みを調整する。
Only One Edge一辺のみ選択して丸みを調整する。
Round全体的に丸みを帯びた形状にする。
Uniform四つの角全てに同一の丸みを指定できる。

↑Modifier Typeの種類

マイケル
マイケル
それぞれ適当な値を指定して作成した結果はこちら!
ScreenShot 2022 08 22 21 28 37
エレキベア
エレキベア
おお〜〜〜
シンプルでいいクマね〜〜〜
マイケル
マイケル
デフォルトでは塗りつぶし状態になっていますが、
Border Widthの値を変更することで枠線のみにすることができます。
ScreenShot 2022 08 22 21 23 59↑枠線の太さを指定
マイケル
マイケル
枠線の太さや丸みは下記のように幅広く指定することが可能です。
ScreenShot 2022 08 22 21 22 07↑枠線の太さと丸みを変えてみた様子
マイケル
マイケル
最後に、Falloff Distanceの値を変更することで
枠線をぼやけさせることができます。
ScreenShot 2022 08 22 20 54 40
ScreenShot 2022 08 22 21 23 02↑少しぼやけた
マイケル
マイケル
これらを組み合わせることで、UnityEditor上のみで
様々なバリエーションのUIを作ることが可能になる
、ということです!!
ScreenShot 2022 08 22 21 23 18↑いろいろ作ってみた結果
ScreenShot 2022 08 22 21 46 40↑複数オブジェクト重ねることができる
エレキベア
エレキベア
機能はシンプルなのにかなり汎用性が高いクマね〜〜〜
マイケル
マイケル
ちなみに自分のおすすめは半透明の黒背景に白ボーダーを使用したUIです!
シンプルですが、割とそれっぽく見えます!!
ScreenShot 2022 08 22 21 20 42↑シンプルだけどこれでも充分
エレキベア
エレキベア
背景の上に重ねるとそれっぽくなるクマね

おわりに

マイケル
マイケル
というわけで今回は Procedural UI Image の紹介でした!
どうだったかな??
エレキベア
エレキベア
シンプルで使いやすいと思ったクマ〜〜〜
むしろ下手に自分で作るよりもいいかもしれないクマね
マイケル
マイケル
シンプルな方向でそのまま使ってもいいし、
正式なUIが出来るまでの仮UIとして使うのもありですね!
マイケル
マイケル
ちなみに同じ作者が提供している「UI Gradient」や、
同じ様なテイストの「Modern Procedural UI Kit」といったアセットもある様です!
こちらも是非覗いてみてください!!

エレキベア
エレキベア
UIアセットもいろいろ便利なのがあるクマね〜〜〜
マイケル
マイケル
それでは今日はこの辺で!!
アデューー!!!
エレキベア
エレキベア
クマ〜〜〜〜〜

【Unity】「Procedural UI Image」を使ってシンプルなUIを爆速で作成する 〜完〜

コメント