毎度作品を作っていて、ボタンなどのUIの画像をUI Builderから持ってきているのですが、なんかもっといい方法ないかとうっすら思っていたところ、ご存知AssetSaleLove@汗人柱さんのツイートが目に飛び込んできました。
【無料化アセット】
— AssetSaleLove @汗人柱 (@AssetLove) July 7, 2019
アプリ内にテクスチャを持たず、極小プロシージャルデータからジェネレートする容量節約ツール！
実行時、プロシージャルデータ（20kb程度）から、
最大2048x2048 高品質PBRテクスチャをジェネレート。
※事前出力も可能
床、壁、VFXなどに
「ProTex」https://t.co/2JWOHwISN0
本来のテクスチャー用途で利用する方法は、VR発掘隊さんが以下の記事でまとめてくださっています。
テクスチャーには画像を生成せずに利用する方法があるのですが、Imageコンポーネント向けのスクリプトが用意されていないので、UIで使うには画像化が必要になります。せっかくプロシージャルで形状を作ったのだから画像ファイルを作らずに使いたい！ということで、ちょちょっとスクリプトを用意してみました。ボタンで使えそうな角丸四角形の作り方と設定方法をご紹介します。
目次
やりたいこと
以下のようなボタン用の角丸四角形のイメージを、画像ファイルの用意なしに作ってみます。
要件
ProTexの要件は、Unity2018.3.0以降です。今回試した環境は以下の通りです。
- Windows10
- Unity2019.1.5
- ProTex 1.0
角丸四角形を作る
角丸四角形をProTexエディターで作成します。
- Unityを起動して、適当なプロジェクトを作成するか開きます
- 以下のアセットをゲットして、プロジェクトにインポートします
ProTexTextureを作成
ProTexでテクスチャーを作成するには、ProjectウィンドウからProTexTextureアセットを作成します。
- ProjectウィンドウのCreateボタンをクリックして、ProTex > ProTexTextureを選択します
RoundRectという名前にしておきます
以上でテクスチャーを作成するためのアセットができました。
形状を作る
形状を作るビジュアルグラフを開きます。
- 作成したRoundRectアセットをクリックして選択します
- Inspectorウィンドウの右上のOpenボタンをクリックすると、ビジュアルエディターが開きます
ProTexウィンドウの左側のワークスペースエリアを右クリックするとノードリストが表示されます。それぞれがどのようなものかは、Assetsフォルダー内にあるProTexManual.pdfのNODES REFERENCEを眺めると、おおよそ把握できると思います。
角丸四角形を作ります。
- 右クリックしたメニューからShape > Rectangleを選択します
- 作成したノードをクリックして選択します
右下にパラメーターが表示されます。スライドバーを操作して効果を確認するとよいでしょう。
以下を設定します。
- WidthとHeightをどちらも
1にして、最大サイズにします - Roundnessを
1にして、角を丸めます - Falloffを
0.05ぐらいにして、縁をくっきりさせつつ滑らかにします - AlphaをOperationにして、図形以外の場所を透明にします
- 以上設定したら、Apply Changesボタンをクリックします
- Rectangleのoutをドラッグして、Outputのcolorにドロップします
- 左上のSave Assetボタンを押して保存します
以上で角丸四角形ができました！
UIでProTexを使う
作成したProTexTextureをUIで直接使えるようにします。以下の手順に従って、2つのスクリプトをプロジェクトに追加してください。
イメージにProTexTextureをバインドするスクリプトを追加
- ProjectウィンドウでCreateボタンをクリックして、C# Scriptを選択して、名前を
ProTexImageBinderにします - ProTexのImageをバインドするためのスクリプト · GitHubを開きます
- Rawボタンをクリックして、[Ctrl]+[A]キーですべて選択して、[Ctrl]+[C]キーでコピーします
- Unityに切り替えて、作成したProTexImageBinderスクリプトをダブルクリックしてエディターで開きます
- [Ctrl]+[A]キーを押してから[Ctrl]+[V]キーを押して、コピーしてあったコードを貼り付けます
- 上書き保存します
以上で、バインド用のスクリプトができました。続けて、エディター用のスクリプトを追加しておきます。
- Projectウィンドウから、ProTex > Editorフォルダーを開いて、Scriptsフォルダーを右クリックします
- Create > C# Scriptを選択したら、
ProTexImageBinderInspectorの名前にします - ProTexImageBinder用のエディタースクリプト · GitHubを開きます
- Rawボタンをクリックして、[Ctrl]+[A]キーですべて選択して、[Ctrl]+[C]キーでコピーします
- Unityに切り替えて、作成したProTexImageBinderInspectorスクリプトをダブルクリックしてエディターで開きます
- [Ctrl]+[A]キーを押してから[Ctrl]+[V]キーを押して、コピーしてあったコードを貼り付けます
- 上書き保存します
以上で環境ができました。ボタンに設定をします。
ボタンにProTexを適用する
- HierarchyウィンドウからCreateボタンを押して、UI > Buttonなどで、ボタンを作ります
- 作成したボタンに、ProTexImageBinderスクリプトをドラッグ&ドロップして、アタッチします
- 先に作成したRoundRectアセットをドラッグして、ProTexTexture欄にドロップします
以上で、ProTexが生成したテクスチャーがボタンのImageに設定されます。
利用したいテクスチャーの大きさは`Texture Sizeからはじまるコンボボックスで選択します。サイズはPlayすると正式なものになります。Playをした時に、ぼやけないなるべく小さい値に設定するとよいでしょう。
まとめ
ProTexで画像を作り、スクリプトを2つ追加して、UIのボタンにProTexTextureを反映させることができました。なかなか楽ちんで、アイコンの図形などもProTexで作成してます。
回転角度の自由度が少ないとか、数値が直に入力できないとか、細かい部分にあともう一歩機能があれば・・・というところもあるのですが、無料でこれは凄くありがたいアセットです。作者さんに感謝!!
参考URL
- 【無料化アセット】アプリ内にテクスチャを持たず、極小プロシージャルデータからジェネレートする容量節約ツール！最大2048x2048サイズの高品質テクスチャを生成！床、壁、VFXなど各種テクスチャ作りに「ProTex」 - Unity AssetStoreまとめ
- AssetSaleLove @汗人柱 on Twitter: "【無料化アセット】 アプリ内にテクスチャを持たず、極小プロシージャルデータからジェネレートする容量節約ツール！ 実行時、プロシージャルデータ（20kb程度）から、 最大2048x2048 高品質PBRテクスチャをジェネレート。 ※事前出力も可能 床、壁、VFXなどに 「ProTex」 https://t.co/2JWOHwISN0"
- Unityアセット ProTexで楽々テクスチャ作成！ - Qiita
