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

マイケル

あ〜〜〜UIの素材をいちいち作るの面倒くさいな〜〜〜
でもUnity標準のUIはダサいしな〜〜〜〜

マイケル

・・・そんな場面はないでしょうか？？
今回はシンプルなUIを爆速で作れる「Procedural UI Image」というアセットの紹介です！

エレキベア

UI作成は確かに時間がかかって面倒くさいクマ
これは期待大クマね〜〜〜

マイケル

有料アセットにはなりますが、手軽に使えて
そこまで高くないので持っておいて損はないと思います！！

Procedural UI Image の使い方
おわりに

Procedural UI Image の使い方

マイケル

まずはPackage Managerからインポートしましょう。

マイケル

通常のUIと同じく、「Create -> Procedural Image」から
選択して作成することができます。

マイケル

Imageコンポーネントと同様に扱えて、Modifier Typeから
４種類の形状を選択することができます。

Free	四つの角それぞれの丸みを調整する。
Only One Edge	一辺のみ選択して丸みを調整する。
Round	全体的に丸みを帯びた形状にする。
Uniform	四つの角全てに同一の丸みを指定できる。

↑Modifier Typeの種類

マイケル

それぞれ適当な値を指定して作成した結果はこちら！

エレキベア

おお〜〜〜
シンプルでいいクマね〜〜〜

マイケル

デフォルトでは塗りつぶし状態になっていますが、
Border Widthの値を変更することで枠線のみにすることができます。

マイケル

枠線の太さや丸みは下記のように幅広く指定することが可能です。

マイケル

最後に、Falloff Distanceの値を変更することで
枠線をぼやけさせることができます。

マイケル

これらを組み合わせることで、UnityEditor上のみで
様々なバリエーションのUIを作ることが可能になる、ということです！！

エレキベア

機能はシンプルなのにかなり汎用性が高いクマね〜〜〜

マイケル

ちなみに自分のおすすめは半透明の黒背景に白ボーダーを使用したUIです！
シンプルですが、割とそれっぽく見えます！！

エレキベア

背景の上に重ねるとそれっぽくなるクマね

おわりに

マイケル

というわけで今回は Procedural UI Image の紹介でした！
どうだったかな？？

エレキベア

シンプルで使いやすいと思ったクマ〜〜〜
むしろ下手に自分で作るよりもいいかもしれないクマね

マイケル

シンプルな方向でそのまま使ってもいいし、
正式なUIが出来るまでの仮UIとして使うのもありですね！

マイケル

ちなみに同じ作者が提供している「UI Gradient」や、
同じ様なテイストの「Modern Procedural UI Kit」といったアセットもある様です！
こちらも是非覗いてみてください！！

エレキベア

UIアセットもいろいろ便利なのがあるクマね〜〜〜

マイケル

それでは今日はこの辺で！！
アデューー！！！

エレキベア

クマ〜〜〜〜〜

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