画面を少しでもセンス良くしたい・・・と思ってUI Builderを購入してみました。ドキュメントを読んだので、間引きしつつの意訳をまとめておきます。
目次
- 目次
- 1. はじめに
- 2. 基本的なUI要素
- 3. 作成済みのUIコンポーネントエレメントの使い方
- 4. UI Templates of Applications and Games
- 5. Animations
- 6. 容量の節約とスプライトのクオリティ
- 最後に(田中記)
1. はじめに
UI Builderは、初心者が初めてUIを作る場合にも、プロが仕事を効率化するのにも使えます。
- 200以上の切り分けられた要素
- 130以上のピクセルアイコン
- 1つのフォントと10通りのスタイル
- 70以上のドラッグ＆ドロップ要素
- 30以上の古典的アプリケーションの画面例
- 23以上の基本的なゲームの画面例
- 3つのiWatchの例
- 20以上の色の組み合わせ(Color Scheme)
- 9つのHD写真イメージ
UI Builderが提供するこれらの要素を組み合わせたり、変更したりして、独自のユーザーインターフェースや、UnityのGUIシステム用のスキンやスプライトを作ることができます。
(追記：用意されている要素の一覧を手っ取り早く確認するには、Projectビューから UI - BUILDER -> Scenes - All Elements In One Place -> UI - Builder Scene を開きます)
2. 基本的なUI要素
矩形や円、三角形といった基本的なスライスされた要素について、様々な大きさ、太さ、角の丸みのものが用意されています。これらの基本要素をカスタマイズすることで、多様な基本図形を作ることができます。色の組み合わせやアイコン、文字（フォント）も組み合わせます。
a) 切り分けられた形状(Sliced Panels - Circles - Knots - Tags]
スプライトエディターは、9-slicing(9つに切り分けられた)画像をサポートします。このプレハブの要素を使うことで、選んだ要素のサイズを自由に調整できるようになります。
使い方
- Projectビューから Source Files -> Panels -> Panels@1x-assets あるいは Panels@2x-assets -> 使いたい形状 を選択します
- UI -> Image を作成するか、ゲームオブジェクトにImageコンポーネントを追加します
- 作成したUIパネルやImageコンポーネントのSource Imageフィールドに、選択した形状をドラッグ＆ドロップします
- 色、画像タイプ(Simple, Sliced, Tiled あるいは Field)を選択します
- 選択した形状を使って、作りたい形状やストロークになるように調整します
- UI Builderに用意された作成済みの要素を使うこともできます
b) Typography(文字表現)
モダンなフォントとして最適なOpen Sansの10種類のスタイルが用意されています。TextコンポーネントのFontとして設定して使うことができます。
使い方
- UI -> Text を作成するか、ゲームオブジェクトにTextコンポーネントを追加します
- TextコンポーネントのFont欄のコンテンツ選択ボタンをクリックして、使いたいOpen Sansのスタイルを選択します
- 色や大きさ、アライメントなどを調整して使います
c) アイコン
130を超えるアイコンが用意されています。これらは、以下の7種類のカテゴリーに分類されています。
- ナビゲーションアイコン
- メディアアイコン
- 天気アイコン
- スタンダードアイコン
- テクノロジーアイコン
- ロケーションアイコン
- アプリアイコン
使い方
- UI -> Imageを作成して、Source Image欄に使いたいアイコンを設定します
- Source Image欄のコンテキスト選択ボタンを押すか、Projectビューから UI - BUILDER -> Source Files -> Icons フォルダーに入っているので、その中から探します(等倍、2倍、4倍のものがカテゴリー別に入っています)
- イメージのタイプをSimpleにします
- Set Native Sizeボタンをクリックして、元画像のアスペクト比にします
- 同じゲームオブジェクトにButtonコンポーネントを追加すれば、ボタンとして動くようになります
d)Color Schemes
Color Schemesで用意した色の組み合わせを使って、簡単にユーザーインターフェースの色を決められます。UI-Builderのゲームやアプリインターフェースの例でもこの色が使われています。美的に見えるような色の組み合わせを用意してあります。
使い方
- Projectビューから UI-BUILDER -> Prefabs -> 1. Fundamental UI Elements -> ColorSchemesフォルダーを開きます
- __ColorsPalettePreview をシーンに配置します
- 色を設定したいコンポーネントのColor欄のスポイトアイコンをクリックします
- 配置した__ColorsPalettePreviewから、使いたい色を選択します
以上です。__ColorsPalettePreviewは、使わない時はInspectorビューの上のチェックを外して、無効にしておくと良いでしょう。
3. 作成済みのUIコンポーネントエレメントの使い方
Panel, Scroll View, Chart, Input, Scroll Bar, Toggle/Switch, Slider, Label, Tag, Buttonそしてカスタムパネルといったドラッグ＆ドロップ要素が用意されています。
使い方
作成済みのUIエレメントを使う場合、いくつかのオプションが使えます。
- a) Projectビューの UI - BUILDER -> Prefabs -> 2. Ready-Made Component Elements フォルダーに、カテゴリー分けされて要素のプレハブがあるので、それを使いたいシーンに配置します
- b) 同フォルダーにある __Ready-Made Component Elements プレハブをシーンに配置すると、全ての要素が確認できるので、そこから必要なエレメントを使いたいシーンに配置します
- b) Projectビューの UI - BUILDER -> Scenes - All Elements In One Place -> UI - Builder Scene シーンを開いて、必要なエレメントを使いたいシーンに配置します
4. UI Templates of Applications and Games
このアセットを利用して構築したアプリケーションやゲームの画面例です。
もし、これらのゲームやアプリを実際に作成したい場合、用意されているテンプレート画面にプログラムを実装して、ストアにアップロードできます。
5. Animations
クリック時やホバー時、揺れて警告を知らせるダイナミックなもの、情報バナー、バブルといった10種類以上のアニメーションが用意されています。
全てのアニメーションは、親オブジェクトのScaleが1,1,1の時のみ、正しく動作します。親オブジェクトのScaleが1,1,1で、アニメーションオブジェクトがその親の子に設定しなければ正しく動作しません。親のオブジェクトにButtonコンポーネントを加えて、Animatorコンポーネントも必要に応じて設定します。子のオブジェクトからは全てのAnimationコンポーネントを削除します。
6. 容量の節約とスプライトのクオリティ
スプライトには事前にPacking Tagは設定されていません。そのため、スプライトが統合されず、無駄な容量を消費します。作成済みのプロジェクトを使う場合、２通りの考え方があります。
その１
利用するスプライトが少数だったり、１つのスライス済みのスプライトを複製して使い回すような場合は、それほど容量の無駄はありませんので、Packing Tagは空欄のままで構いません
その２
容量を節約したり、ドローコールが多くて処理落ちするような場合は、以下のような対策が考えられます。
- 主要なUIのCanvasを選択して、プレハブを作成します
- Projectビューで右クリックをして、Select all dependenciesメニューを選択します
- 選択したCanvasで利用されているアセットが選ばれるので、どのスプライトが使われているかが確認できます
- 上記で確認したスプライトのPacking Tagに、
My Spritesなどのように同じキーワードを設定して、Applyボタンを押します
以上で、Unityが実行する時に利用するスプライトを1つのアトラス(画像)にまとめますので、容量やドローコールに関するパフォーマンスの向上が期待できます。
共通の設定
スプライトを使ったCanvasについて、いくつか設定を確認します。EditメニューからProject Settings -> Quality を選択して、Textures Quality欄がFull Resになっていることと、Anti Aliasing欄をより高いサンプリング設定にすると、スプライトのクオリティーがより良くなります。また、2DゲームやSpriteが縮小して表示されないのであれば、Sprite設定のGenerate Mip Mapsのチェックは外しましょう。
最後に(田中記)
開発者への連絡方法や、バージョンアップの履歴などは省きました。訳の精度は保証できませんので、怪しい部分は元のドキュメントをお読みください。
また、ボタンの作例をこちらに書きました。併せてご覧いただければ幸いです。
