uGUI を使った基本的な UI の作り方

1. 基本的な UI の作成

このチュートリアルは Unity 2019.4.10f1 LTS - を使用して検証しています。https://learn.unity.com/tutorial/creating-basic-ui-elements-2019-3

Unity のユーザーインターフェース（UI）システムでは、テキスト、画像、ボタンなどの要素をコントロールして、ユーザーに機能を追加することができます。しかし、要素を作成する前に、それらの要素をキャンバスに追加する必要があります。

2. テキストの作成

ラベルとも呼ばれるテキストコンポーネントには、表示テキストを入力する領域があります。フォント、フォントスタイル、フォントサイズ、リッチテキスト機能の有無などを設定することができます。テキストの整列を設定するオプション、水平方向と垂直方向のオーバーフローの設定、テキストが矩形の幅や高さよりも大きい場合にどうなるかを制御するオプション、利用可能なスペースに合わせてテキストのサイズを変更するベストフィットオプションがあります。

1. Hierarchy で Canvas を選択します。

1. Canvas を右クリックして、UI > Text と選択します。

1. テキストボックスのテキストを変更します。

1. フォントは、Font ラジオボタンを使用して変更することができます。

1. フォントパラメーターを変更して、サイズ、配置、色を変更します (画像 01)

画像 01：UI テキストのパラメーター

3. UI イメージのインポート

UI コンポーネントに使用される画像のことをスプライトと呼びます。最初にインポートすると、デフォルトのテクスチャタイプとしてマークされます。スプライトは UI だけでなく、2D プロジェクトでも便利な機能を提供しています。

1. Project ウィンドウで 2D アセットを選択します。

1. Inspector で、Texture Type を Sprite (2D and UI) に変更します (Figure 02)
   

画像 02：Texture Type を Sprite (2D and UI) に設定

4. UI イメージの作成

Image には Rect Transform コンポーネントと Image コンポーネントがあります。スプライトは Image コンポーネントに適用することができ、 その色は Color フィールドで設定することができます。また、Image コンポーネントには Material を適用することもできます。Image Type フィールドは Sprite の表示方法を指定します。オプションは以下の通りです：

• Simple：スプライト全体のスケールを一致させます。

• Sliced：3 × 3 にスプライトを分割しているので、リサイズしても角が歪まず、中央部分だけが引き伸ばされます。

• Tiled：Sliced に似ていますが、引き伸ばすのではなく中心部分をタイル状に敷き詰め (繰り返し) ます。まったく境界のないスプライトの場合はスプライト全体をタイル状に並べます。

• Filled：スプライトを表示する方法は Simple と同じですが、定義された方向、方法、大きさで原点からスプライトを埋めることができます。

UI イメージを作成するには：

1. Hierarchy で Canvas を選択します。

1. Create > UI > Image の順にクリックします。

1. Source Image を任意の画像に変更します(画像 03)。

画像 03：UI イメージのパラメーター

UI 要素には様々なものがあり、自分でユーザーインターフェースを作成することができます。テキストや画像を使って基本的な UI レイアウトを作成してみましょう。