Unityには、GUIを簡単に作成できる機能が備わっています。 いくつかのオブジェクトを配置してみて、Unity UIの使い方を学びましょう。
全面の背景を作成しよう
まずはImageを利用して背景にベタの画像を敷いてみましょう。
Imageは下記のどれかの方法で追加する事ができるようになっています。
- メインメニューから、
GameObject > UI > Image - ヒエラルキーウィンドウから、
Create > UI > Image - 右クリックから、
UI > Image
Unity UIを配置して生成される要素
今回はImageを最初に配置しましたが、新しいシーンに何かUnity UIの要素を新しく配置した場合、目的のオブジェクト以外にもいくつか要素が生成されます。
| 名前 | 概要 |
|---|---|
| Canvas | この後レイアウトする様々なオブジェクトを配置するキャンバスになります。レンダリングの方法やスケールの指定などを個別に設定したり、別シーンに引き継ぐものと引き継がないものを分ける場合などには複数のCanvasを配置する事もありますが、基本この中にオブジェクトを配置していきます。 |
| EventSystem | Unityのイベントシステム。タッチイベントなどを取得してハンドリングしてくれます。EventSystemは初回にルートに生成され、以降は増やす必要はありません。 |
シーンビューを見やすくしよう
シーンビューの 2D からプレビュー表示を切り替える事が可能です。
シーンビュー上に多くの要素が配置されていて邪魔な場合には、ツールバーUIをクリックして表示/非表示を切り替える事も可能になっています。
Imageのサイズを調整しよう
Unity UIの要素のレイアウトは RectTransform を利用します。
まず Anchor Presets(RectTransform左上の四角いアイコン) をクリックし、一番右下(上下左右に矢印が伸びている)のアイコンを選択します。
すると値の設定がLeft,Top,Right,Bottomになりますので、全てを0に変更すると画面にフィットさせる事ができます。 値の設定はAnchorsとPivotの値によって変わるのですが、Anchor Presetsを利用する事で、悩まなくても直感的に変更する事ができるようになっています。
Imageの色を調整しよう
あとはImageコンポーネントから色や画像を変更する事が可能になっています。 色を変更したい場合にはColorを変更します。
Imageに画像を設定してみよう
次に背景に画像をリピートさせて配置してみましょう。 手元に何もなければこちらの画像を利用してください。（後述のSubtle Patternsから落としてきた素材です）
まずはこの画像をプロジェクトウィンドウにドラッグして、設定を変更するところから始めます。
フォルダはImportsや、Imagesなどのフォルダを作成し、その中に入れておくと良いでしょう。
Imageに設定できる画像は、今インポートしたpngやjpgなどの画像そのままを使うわけではなく、その画像を使用したSpriteやTextureといったアセットを使用する事になります。
プロジェクトウィンドウ上でさきほどドラッグした画像を選択すると右側のインスペクタウィンドウに画像の設定項目が表示されます。
- ここでTexture Typeの Sprite(2D and UI) を選択し、 Applyをクリックして反映させましょう。
これで、ヒエラルキーウィンドウのImageに対して画像がドラッグできるようになります。
Image TypeをTiledに変更するとタイル状に表示されるので、画面を縦横に伸ばしても綺麗に繰り返し表示されるようになります。
タイトル文字を配置しよう
次にゲームのタイトル文字を配置してみましょう。
TextMeshPro (Text) を使うのが推奨です。初回は導入ダイアログに従ってTMPリソースをインポートしてください。
Text - TextMeshPro は下記のいずれかの方法で追加できます。
- メインメニューから、
GameObject > UI > Text - TextMeshPro - ヒエラルキーウィンドウから、
Create > UI > Text - TextMeshPro - 右クリックから、
UI > Text - TextMeshPro
テキストエリアの配置ができたら、今度はRectTransformを利用してレイアウトを修正するとともにTextMeshPro内の設定も以下のように設定してみましょう。
- 上下センター寄せ
- 左右センター寄せ
タイトル文字を調整しよう
次にタイトルの文字を調整しましょう。
フォントはUnityエディタのプロジェクトウィンドウにドラッグする事で、他のアセット同様にインポートする事が可能です。
Google Fonts で Display をチェックしてフォントを探すと太字のゲームっぽいフォントが出てきたりしますので、ダウンロードして使用します。
TextMeshPro にフォントを指定するには、別途「フォントアセット」を作成して割り当てる必要があります（インポートしたフォントファイルをそのままでは使えません）。
詳しい手順は以下を参照してください。
テキストオブジェクトを選択し、インスペクタウィンドウから設定を変更して絵を作っていきましょう。
