マイケル
あ〜〜〜UIの素材をいちいち作るの面倒くさいな〜〜〜
でもUnity標準のUIはダサいしな〜〜〜〜
でもUnity標準のUIはダサいしな〜〜〜〜
マイケル
・・・そんな場面はないでしょうか？？
今回はシンプルなUIを爆速で作れる「Procedural UI Image」というアセットの紹介です！
今回はシンプルなUIを爆速で作れる「Procedural UI Image」というアセットの紹介です！
↑Procedural UI Image
エレキベア
UI作成は確かに時間がかかって面倒くさいクマ
これは期待大クマね〜〜〜
これは期待大クマね〜〜〜
マイケル
有料アセットにはなりますが、手軽に使えて
そこまで高くないので持っておいて損はないと思います！！
そこまで高くないので持っておいて損はないと思います！！
Procedural UI Image の使い方
マイケル
まずはPackage Managerからインポートしましょう。
マイケル
通常のUIと同じく、「Create -> Procedural Image」から
選択して作成することができます。
選択して作成することができます。
マイケル
Imageコンポーネントと同様に扱えて、Modifier Typeから
４種類の形状を選択することができます。
４種類の形状を選択することができます。
| Free | 四つの角それぞれの丸みを調整する。 |
| Only One Edge | 一辺のみ選択して丸みを調整する。 |
| Round | 全体的に丸みを帯びた形状にする。 |
| Uniform | 四つの角全てに同一の丸みを指定できる。 |
↑Modifier Typeの種類
マイケル
それぞれ適当な値を指定して作成した結果はこちら！
エレキベア
おお〜〜〜
シンプルでいいクマね〜〜〜
シンプルでいいクマね〜〜〜
マイケル
デフォルトでは塗りつぶし状態になっていますが、
Border Widthの値を変更することで枠線のみにすることができます。
Border Widthの値を変更することで枠線のみにすることができます。
マイケル
枠線の太さや丸みは下記のように幅広く指定することが可能です。
マイケル
最後に、Falloff Distanceの値を変更することで
枠線をぼやけさせることができます。
枠線をぼやけさせることができます。
マイケル
これらを組み合わせることで、UnityEditor上のみで
様々なバリエーションのUIを作ることが可能になる、ということです！！
様々なバリエーションのUIを作ることが可能になる、ということです！！
エレキベア
機能はシンプルなのにかなり汎用性が高いクマね〜〜〜
マイケル
ちなみに自分のおすすめは半透明の黒背景に白ボーダーを使用したUIです！
シンプルですが、割とそれっぽく見えます！！
シンプルですが、割とそれっぽく見えます！！
エレキベア
背景の上に重ねるとそれっぽくなるクマね
おわりに
マイケル
というわけで今回は Procedural UI Image の紹介でした！
どうだったかな？？
どうだったかな？？
エレキベア
シンプルで使いやすいと思ったクマ〜〜〜
むしろ下手に自分で作るよりもいいかもしれないクマね
むしろ下手に自分で作るよりもいいかもしれないクマね
マイケル
シンプルな方向でそのまま使ってもいいし、
正式なUIが出来るまでの仮UIとして使うのもありですね！
正式なUIが出来るまでの仮UIとして使うのもありですね！
マイケル
ちなみに同じ作者が提供している「UI Gradient」や、
同じ様なテイストの「Modern Procedural UI Kit」といったアセットもある様です！
こちらも是非覗いてみてください！！
同じ様なテイストの「Modern Procedural UI Kit」といったアセットもある様です！
こちらも是非覗いてみてください！！
エレキベア
UIアセットもいろいろ便利なのがあるクマね〜〜〜
マイケル
それでは今日はこの辺で！！
アデューー！！！
アデューー！！！
エレキベア
クマ〜〜〜〜〜
【Unity】「Procedural UI Image」を使ってシンプルなUIを爆速で作成する 〜完〜
