かっこいいUIが欲しい！ということで購入してみました。とりあえず簡単なボタンの作例を示したのち、添付のドキュメントをざっくり意訳したものを書きました。
目次
ボタンを作ってみる
UI Builderを使って、以下のようなランキングやツイートを呼び出すボタンを作ってみました。
ボタンを作る
ボタンは普通にUnityのUIのButtonで作ります。
HierarchyビューのCreateをクリックして、UI -> Buttonを選択して、ボタンを作成します
名前を適当に決めます。例えばTwitterButtonなど。
ボタンの形状を設定する
ボタンの形を画像から選びます。Projectビューから、UI - BUILDER -> Prefabs -> Source Files -> Panels ->Panels@1x-assets フォルダーを開きます。カテゴリーごとに、様々なパネルのスプライトが入っています。
今回は、ターゲットデバイスの高さを1136ピクセルにしたので、Panels@1x-assetsフォルダーのものを使います。Panels@1x-assetsフォルダーにはより高い解像度の画像がありますので、高解像度のスマホ向けなどの場合は、2xの方を選択するとよさそうです。
画像を確認するには、ProjectビューをTwo Column Layoutにすると便利です。One Column Layoutに設定していたら、Projectビューの右上のハンバーガーメニューから切り替えるとよいです。
片側にくっつけるボタンということで、OneSidePanelsフォルダーを選択して、作りたいボタンに合う形のものを探します。今回は、OneSideCornerPanelRadius 50px Fill.pngにします。
先ほど作成したボタンを選択します。選んだOneSideCornerPanelRadius 50px Fill.pngをドラッグして、InspectorビューのSource Image欄にドロップします。
これでボタンの形状が設定できました。Rect Transformを調整して、配置や大きさを整えます。
アイコンを設定
アイコンを設定します。ボタンの子供にTextが設定されていますが、これを削除してImageに変更して、そこにアイコン画像を設定しましょう。HierarchyビューからCanvas -> TwitterButtonを開いて、子供のTextを選択して、Deleteキーや右クリック -> Delete で削除します。
TwitterButtonオブジェクトを右クリックして、UI ->Image でイメージを追加します。
アイコンを探します。ProjectビューからUI - BUILDER -> Source Files -> Icons -> Icons@1x-assets フォルダーを開くと、アイコンがカテゴリー分けされています。Socialフォルダーを開くと、それらしい画像が見つかります。
Hierarchyビューから、先ほどのTwitterButtonの子供として作成したImageオブジェクトを選択します。
探したツイート的アイコンをドラッグして、InspectorビューのSource Image欄にドロップします。
色が同じでよくわかりませんが、これでアイコンが設定できました。
色を設定
ボタンの地とアイコンを着色します。UI Builderの色見本を確認します。ProjectビューからUI - BUILDER -> Prefabs -> 1. Fundamental UI Elements -> ColorSchemesフォルダーを開きます。
最初の__ColorsPalettePreviewプレハブに、全ての色見本が設定されています。これをSceneビューにドラッグ＆ドロップして、表示します。
UI Builder 1.2には18種類の色見本が用意されています。イメージに合いそうな色見本を採用して、その色を使います。
HierarchyビューからTwitterButtonオブジェクトを選択します。InspectorビューのImageコンポーネントのColor欄の右のスポイトをクリックして、色の選択モードにします。
色見本から、使いたい色の上でクリックします。同様に、子供のImageオブジェクトも選択して、ツイートアイコンの色も設定します。
ついでに背景の色も、真っ黒ではなく、色見本の一番暗い色に変更してみました。背景の色は、Main Cameraで設定できます。InspectorビューのClear Flags欄をSolid Colorに変更して、Background欄の右のスポイトをクリックして、色見本から設定したい色を拾います。
以下のようになりました。左が背景色が真っ黒。右が背景色を調整したものです。心なしか、お、いい感じ、という雰囲気になった気がします。
-> 
ランキングボタンを作成する
ランキングボタンは、ツイートボタンを複製して作ります。
HierarchyビューでTwitterButtonを選択したら、[Ctrl]+[D]キーで複製して、名前をRankingButtonに変更します。
画面の反対側に配置します。ボタンの形を左右反転させたいので、ScaleのXを-1にします。
アイコンをトロフィーっぽいのに変更します。Projectビューから UI - Builder -> Source Files -> Icons -> Icons@1x-assets -> Standardフォルダーを開いておきます。
Hierarchyビューから、Canvas -> RankingButtonを開いて、Imageオブジェクトを選択します。
Projectビューからトロフィーっぽいアイコンをドラッグして、InspectorビューのImageコンポーネントのSource Image欄にドロップします。
-> 
色を黄色っぽいものに変更してみました。以下、完成イメージです。
まとめ
使いたいデザインを探して、それをUnityのUIのImageに設定することで簡単に自由な大きさに調整することができました。また、色見本でバランスの良い配色にすることでとても画面が引き立つことが感じられました。
他にも、アニメーションやサンプル画面などがあり、配色やデザインの勉強にもなります。
センスのある人ならいいのですが、自分のような者だと、時間をかけて画面をデザインした挙句、残念なものになることが多かったです。このアセットを使えば、時短とクオリティーアップを両立できそうです。もっと早く使っておくべきでした。ソリッドな雰囲気のゲームを作るのには、この色見本や形状はとても役立ちそうです。
有料のアセットですが、Unity1週間ゲームジャムなどのゲームジャムに参加したり、ちょくちょく個人製作をするのであれば、このお値段は安いです。
こちらに、付属ドキュメントの意訳を書きました。併せてご利用いただければ幸いです。
