【Unity道場 京都スペシャル 2016】ゼロから始めるUnity UI

2016.11.04 unity 道場 ゼロから始めるUnity UI ユニティ・テクノロジーズ・ジャパン 池和田 有輔

unity 道場 Unity UIの概要

UnityでUIを作るには unity 道場 基本的にはUnity UI (uGUI)を使う • 4.6で実装された機能。 • 事実上の標準ツールであったNGUIをベースとする部分が大きい。 • プラットフォームの差をあまり気にせず作れる。 • コンポーネントを組み合わせることにより、極力プログラミングせず実装できる。 • コード自体がオープンであり、独自に修正してもOK。 • アセットストア上にある膨大なアセットを自由にゲームに組み込める。 • 素材からプラグインまで幅広くカバーされている。 注意点 • 旧GUI (IMGUI)も利用可能だが、デバッグ用途など限定した使い方に留めておこう。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

UIに使うコンポーネントは4種類に分類できる unity 道場 表示 レンダリングされるもの Image、Text、Raw Imageの3種類 インタラクティブ UIとしての役割を与えるもの Button、Toggle、Scroll Rectなど マスク 表示されたものにマスクをかける Mask、Rect Mask 2Dの2種類 エフェクト 表示されたものに変化を与える Shadow、Outline、Position as UV1 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

unity 道場 素材をインポートしよう

画像を表示させる準備 unity 道場 画像 • Texturesフォルダに入れるのが基本。 • サポートしているフォーマットはPNG、JPG、TIFF、PSDなど。 • 画像自体の圧縮はアプリの容量とは無関係（圧縮はUnity内で行う） • メタ設定を適切に行う必要がある インポートした画像の設定を変更しよう • Texture Type をSprite (2D and UI) にする • Packing Tagに任意の文字列を入れる • Mip Mapsのチェックを外す • Formatを適切に変更 • Sprite Modeの変更やSprite Editorでスライスは必要に応じて COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

パッキングタグで自動的にアトラス生成 unity 道場 パッキングタグってなんだ？ • 描画回数（ドローコール）の削減と容量削減の点から、複数の画像を一枚にまとめることをアトラスと言う。 • パッキングタグに共通の文字列を入れることで、設定の近いものが共通のアトラスに収まるようになる。 Unityのアトラスはかなり優秀！ • 圧縮の形式でちゃんと分けてくれる。 • 透過情報の有無で分けてくれる。 • JPG、PNG、Tiffなど形式が違っていてもまとめてくれる。 • 必要に応じて回転させたり、間を詰めたり、余計な余白をカットしたり • さらに独自のパッキングポリシーを定義することも可能。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

その他の設定 unity 道場 Sprite Modeは状況に応じて • Multipleにすると一枚の画像をスライスして個々に扱うことが可能。 • 1枚のテクスチャに複数の画像が含まれている場合などで用いる。 • PolygonはUIでは使えない。 Sprite Editorはウィンドウなどに使うと便利 • いわゆる9スライスを行える。 • サイズ違いの角丸の画像を作る時などに有効 • Borderはそれぞれの端からの距離。 • PivotはUIでは全く関係ない。 • というかPivotの設定はここでは行えない。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

フォントを表示させる準備 unity 道場 フォント • Fontsフォルダに入れるのが基本。 • サポートしているフォーマットTTF、OTF。 • やや手順は複雑だが、ビットマップフォントを使うことも可能。 通常は特に変更しなくて問題ないのだが • 文字数が多い日本語フォントなどで、含むべき文字を制限したい場合はCharacterを変更。 • フォントデータを含まないようにもできる。 • そのプラットフォームに使用したいフォントが存在することが保証されている場合に使うべし。 • 該当フォントが存在しない場合は基本的にシステムフォントに置き換わる、その場合フォールバック順序などを制御できないことに注意しよう。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

設定の手間を省くために unity 道場 メタ設定の変更を毎度行うのはとても効率が悪い • 設定変更はファイルごとにやるのはとても大変なので複数選択して行うのが基本。 • Editor Setting / Default Behavior Modeを2Dすることでも少し簡略化される。 • 画像の設定が自動的にSpriteに。 • シーンビューの表示がデフォルトで2Dに。 • またEditor拡張を行うことにより「特定のフォルダに放り込むと全部適用される」みたいなこともできる。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

unity 道場 表示させてみよう

PARTY EDIT

Imageを表示させてみよう unity 道場 Canvasを配意するとEventSystemが追加される • 全てのUIオブジェクトはCanvas以下に配置する必要がある。 • Canvasの子でなくなると、動かなくなったり表示されなくなってしまうので注意しよう。 • Canvasを置くと、プレイヤーの操作・入力をアシストするEventSystemも追加される。 • 間違っても消さないように！ TextとImageを表示させてみよう • CreateからUI/Image及びUI/Textを選択し、ヒエラルキー上に2つオブジェクトを配置してみよう。 • ヒエラルキーの並び順で表示深度が変わるので、前後関係をコントロールしてみよう。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

表示オブジェクトを動かしてみよう unity 道場 UI編集モードを使いこなそう • エディタのショートカット[T]でUI編集モードに切り替え、Imageの矩形を動かしてみよう。 • 中央付近をドラッグで移動。 • エッジ付近をドラッグで大きさの変更 • コーナーをドラッグでも同様。 • 同時にShiftを押すと均等に拡大縮小 • コーナーの少し外側をドラッグで回転 • Shiftを押しながらだと15度ずつ。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

RectTransformについて unity 道場 インスペクタを見てみよう • ImageおよびTextのインスペクタにはTransformの代わりにRectTransformコンポーネントが表示されている。 • これはTransformコンポーネントをUI用に拡張したもので、幾つかの機能が追加されている。 • まず最初に2つ並んでいる左のトグルを有効化しておこう。 • これはブループリントモードといい、角度を変えてもバウンディングボックスの形状が変化しないことを意味する。 • 有効化するとシーン上で回転できなくなることに注意 • また、左上の矩形の集合体のようなものをクリックすると、ウィンドウが開くことを理解しておこう。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

RectTransformについて unity 道場 Anchorsとは？そしてPivotとは？？ • この2つはとても重要だ。 • AnchorsのMin及びMaxは、どちらもUIオブジェクトを配置するときに、起点となる場所を決めるために存在する座標。 • Pivotはオブジェクト自身の中心を決める座標 • どちらも基本的に(0, 0)から(1, 1)の間で表現される COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

RectTransformについて unity 道場 Anchorsを理解するために • Imageを増やし、それぞれを左上、右上にドラッグして配置してみよう。 • テキストはとりあえず中央付近に置いておこう。 解像度を変更すると、位置がずれてしまう・・ • Unityエディタのゲームビューパネルをドラッグしてゲームビューの大きさを変えると、四隅に配置したはずのイメージが消えたり、あるいは余白ができてしまう COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

RectTransformについて unity 道場 Anchorsはオブジェクトを配置するための基点 • 表示すべき画面サイズ及び縦横の比率は多くの場合で異なる。 • よって中央からの距離だけではなく、任意の点を起点に配置できる仕組みが必要だ。 • その起点をUnity UIではRectTransformのAnchorsMin及びMaxで決めてしまっている。 • 多くの場合はMinとMaxに同じ値が入り、決まり切った値を入力するのは手間だ。 • そこで、インスペクタ上にAnchorsを指定するためのショートカットを設けたというわけだ。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

RectTransformについて unity 道場 Pivotはオブジェクト自体の中心点 • さて、Anchorsを適切に設定すれば、図のように(0, 0)に指定するだけで、解像度を変えてもImageは四隅に配置される。 • しかし、実際にやるべき配置は多くのケースで下の図のような形ではないだろうか。 • つまり、オブジェクト自体の中心点も中心から変化させておく必要がある。 • そのオブジェクト自体の中心にあたるのが、Pivotなのだ。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

RectTransformについて unity 道場 AnchorsとPivotを効率良く管理しよう • このように、Anchorsを変更するときはPivotも変更させる必要がある場合は非常に多い。 • そのため、インスペクタ上でショートカットを選択中にShiftを押すことによって、同時に変えることが可能となっている。 • さらに、Option (Alt) キーを押すと自動的にオブジェクトを移動させることも可能だ。 • 使いこなせばとても便利なので、うまく活用して効率良くオブジェクトを配置しよう。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

RectTransformについて unity 道場 AnchorsのStretch Modeも理解しておこう • では、画面を覆い尽くす大きさのイメージを背景に敷きたい場合はどうすればいいか。 • そのようなときにはAnchorsをショートカットからStertchに切り替えれば良い。 • Stertchにすると、オブジェクト自体の大きさではなく、画面端からの距離によって大きさがコントロールされる。 • AndhorsがMinとMaxに分かれているのは、こういった目的に対処するためなのだ。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

Canvasを見てみよう unity 道場 Canvasコンポーネントの設定 • Canvasは基本的にインスペクタ上で全て決めてしまい、スクリプトによって動的に変化させるようなことはほとんどしない。 • Canvas周りの設定で特に重要なのは2つ • CanvasのRender Mode • Canvas ScalerのUI Scale Mode COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

Canvasを見てみよう unity 道場 Screen Space - Overlay (デフォルト設定) • UI専用レイヤを全てのレンダリングの後、つまり最前面に表示させる。 • この場合、カメラに描画してもらうわけではないのでイメージエフェクトなどは使えない。 • 使いやすくはあるが、凝ったことは少しやりにくいという印象。 Screen Space - Camera • 他の2D/3Dオブジェクトと同様に、任意のカメラによって描画させるやり方。 • イメージエフェクトを使いたい場合やUIの前面に3Dオブジェクト、エフェクトを表示させることができる。 • パースの影響を受けるようになる。 • 前項Overlayでできることはすべて出来るので、上位互換という感じ。 • Culling MaskによってUIレイヤのもののみを描画する設定にしておき、余計なものを描かないのがオススメ。 World Space • 3D空間上にUIを配置したい時はこれ一択。 • UIレイヤに配置されるわけではないので、おきたい箇所ごとにCanvasを作るような形になるのが一般的。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

Canvas Scalerを適切に設定しよう unity 道場 Constant Pixel Size • スケーリングを一切行わない設定 • ピクセル数によって表示を行う、昔ながらのPCゲームUIのような設定。 • 解像度が固定の場合はこれ以外を選ぶメリットはない。 Scale with Screen Size • 異なった解像度でも違和感なく表示させたい場合の設定。 • スマートフォン向けのゲームアプリでは最も一般的な選択肢。 • レターボックスを実装する場合もこれを選ぶべし。 Constant Physical Size • 物理的な単位によって大きさを固定する • 「デバイス問わず10円玉サイズにしたい」みたいなことをやりたいならこれ。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

unity 道場 コンポーネントの詳細

表示コンポーネント unity 道場 Image • デフォルトの矩形から、異なる画像を選択してみよう。 • ImageをFlat Unity Chanに切り替え、中央に配置し、Set Native Sizeボタンを押しておこう。これはImageのサイズを適切なものにするためのボタンだ。 • Image Typeは基本がSimple、9スライスを使う場合はSliced、タイリングしたい場合はTiled、メーターや円グラフのように使いたい場合はFilledに設定することを覚えておこう • 表示コンポーネントは全てCanvas Rendererが別途必要。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

表示コンポーネント unity 道場 Raw Image • スプライト以外を使う場合に使ふ。 • 当然アトラス化などの恩恵は受けないことに注意。 • WWWクラスなどでURLからダウンロードした画像を使いたい。 • プロジェクト内で3Dテクスチャなどに使われているものを使いたい。 • UVスクロールを使いたい。 • アトラスに含めたくないデカイ画像を使いたい。 • …など、少し特殊なケースで使うものであり、通常はImageの方を使おう。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

表示コンポーネント unity 道場 Text • 機能は正直それほど多くない。 • 縦書き、禁則処理、ルビなど日本語独自のものは一切ない。 • リッチテキストをサポートしているので、文章中で文字サイズを変更したり、色やスタイルを変えることはできる。 • テキストの内容が全く表示されない場合はHeightが小さいことを疑おう。 • フォントによってはFont Sizeの倍くらいないと表示されない場合もあることに注意しよう。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

インタラクティブコンポーネント unity 道場 Image Textなどと組み合わせて一般的に使われるUIを作りやすくするためのもの • Button: オンマウスなど凝ったアニメーションをさせるためにMecanimを使うこともできる • Dropdown: ドロップダウンリストを作るために使われるもの • Toggle: トグルという名称だが、チェックボックスやラジオボタンもこれで作るのが一般的 • Slider: スライダー用。インタラクションのないメーターはImageのみで十分。 • Scrollbar: スクロールバー。 • Scroll Rect: スクロールバーなどによってスクロールするコンテンツに使うもの。 • Input Field: テキスト入力。パスワード（＊＊＊＊）などのオプションがある。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

Maskコンポーネント unity 道場 Mask & Rect Mask 2D • 親オブジェクトにした時に子供に対してマスク処理が行われる。 • Maskコンポーネント • PhotoshopやIllustratorのようなクリッピングマスクができる。 • 単色抜きのためアンチエイリアスが使えないことに気をつけよう。 • RectMask2Dコンポーネント • 矩形によるマスクを行う。少しコストが安い。 • アンチエイリアスを使いたい場合Position as UV1コンポーネントというものがある。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

エフェクトコンポーネント unity 道場 ビルトインされているものは3種類 • ImageやTextの表示を変化させるもの。 • ビルトインコンポーネントは3種類。 • Shadow：シンプルなドロップシャドウを実装するもの。 • Outline：シンプルなアウトラインを実装するもの。 • Position as UV1：前述した通り、テクスチャを2枚使うためのもの。 • 自前で実装する場合はBaseMeshEffectクラスを継承して記述することになる。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

その他のコンポーネント unity 道場 Panel (Canvas Group) • オブジェクトを一括でコントロール可能。 • 親オブジェクトすると、透明度、レイキャスト、インタラクティブをまとめて切ったりできる。とても便利！ Layout Group • オブジェクトを一括でコントロール可能。 • 親オブジェクトすると、透明度、レイキャスト、インタラクティブをまとめて切ったりできる。とても便利！ • Layout Group • リストやテーブルを作る際、オートレイアウトを行ってくれるのだが、使いどころが難しい。正直あまりお勧めできない。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

unity 道場 Thank You!