UIの表示
今回はUIの使い方について記述していきます。
UnityでUIを表示することはすごく簡単です。
- UIを表示するキャンバスを作る
- キャンバス上にUIを配置する
- UIを制御するスクリプトを記述する
以上です。
これだけでUIの制御ができてしまいます。
では早速UIを出していきましょう！
Unityプロジェクトの作成
UIを出すには3手順と書きましたが、プロジェクトを立ち上げなくては何も作ることができません。
なので先ずはプロジェクトの作成から行っていきます
先ずUnityを起動します。
するとプロジェクトを選択する画面になるので右上の[新規作成]を選びましょう！
作成するテンプレートは[2D]で今回は『UI』という名前のプロジェクトにします。
プロジェクトが出来上がった後はこんな感じになるかと思います。
今回はここにUIを配置して動かしていきたいと思います。
Canvasの作成
プロジェクトが作成できれば後は3つの手順を進めていくだけです。
ではCanvasの作成から始めていきましょう！
Canvasの作成はHierarchyウィンドウの項目から簡単に行えます。
Hierarchy上で右クリックを押すと生成するオブジェクトの一覧が表示されます。
今回は[UI] -> [Canvas]をクリックします。
これでCanvasの作成は完了です。
Hierarchyを確認するとCanvasとEventSystemが追加されているかと思います。
Canvas
CanvasとはUIを描画するための領域のようなものです。
UIを描画する際は必ずCanvasが親オブジェクトとなります。
Canvasでは表示方法やカメラの指定からCanvas同士の描画順番などが設定できます。
又、解像度の違う端末で実行した際のスケーリング設定なども行えます。
EventSystem
EventSystemとはUIに対してユーザーが行った挙動をイベントとして検知してくれる機能です。
例えばボタンを用意したときにボタンをクリックしたという検知を行ってくれます。
EventSystemが無ければボタンをクリックしても何も起こらなくなってしまうのです。
他にもマウスやタッチパネルのドラッグなど様々な動作を検知してくれます。
UIの配置
新規でUIを配置する方法はいくつかありますが今回は Image を作成する方法で行っていきます。
Imageの作成
Imageの作成はCanvasと同じでHierarchyから行います。
Hierarchy上の[Canvas]を右クリックします。
表示された項目から[UI] -> [Image]をクリックしてImageを生成します。
これでUIの生成は終了です。
Hierarchy上でCanvasをダブルクリックしてみてください。
Sceneウィンドウ上に白い四角形のUIが追加されたことが分かります。
合わせてGameウィンドウ上にもオブジェクトが表示されたはずです。
追加前
追加後
これでUIの作成は完了です。
後はこれを表示したい場所に持っていくだけです。
Imageの配置
Imageを含むUnity上のオブジェクトは簡単にレイアウトの配置を行うことができます。
先ず大まかな位置を決めるにはSceneウィンドウで配置を変えていきます。
Scene上で移動させたいオブジェクトをクリックします。
※Hierarchy上でオブジェクトを選択しても同じ結果になります
するとオブジェクトの周りに青い点が出て移動やサイズの変更が行えるようになります。
今回は右上にドラッグして移動させてみましょう。
これで移動ができました！
GameウィンドウでもImageが移動していることが確認できると思います。
次に細かな配置の方法についてです。
Scene上で大まかな位置を決めたら後はInspectorウィンドウで細かな値を調整することができます。
今回はInspector上のRectTransformのPosXを変更してみます。
358 → 300 に値を変更するとImageが少し左に移動したのが分かるかと思います。
このように直接値を入力することで調整することができます。
UnityではUIの配置から調整まで全てデザイナーが完結させることができるようになっています。
テクスチャーの張り方
今回は白い四角形のオブジェクトを作成しましたが、UIにはテクスチャー（画像）を張りたい場合が多いです。
そういう時はImageにテクスチャーを設定することで張り付けることができます。
画像を張り付けるには先ず画像データを用意します。
今回はペイントで星の画像を作成しました。
この画像をUnityプロジェクト内に配置します。
Projectウィンドウ内にプロジェクト内のファイルが全て表示されるます。
この中にStar.pngを格納するようにします。
ここではゲーム内に使用するリソースを格納するためにResourcesフォルダを作成します。
[Assets]の項目で右クリックして下記の選択します。
[Create] -> [Folder]
これでフォルダが作成されます。
作成されたフォルダにはResourcesと名前を付けましょう。
そして作成された[Resources]を選択するとフォルダの中が表示されます。
現状は何も入っていないので空です。
そこにペイントで作成したStar.pngをドラッグ＆ドロップします。
すると画像が追加されてProject上に表示されるようになります。
次にProject上に表示された画像を先ほどのImageにアサインします。
やり方は簡単でHierarchy上のImageを選択してImageのInspectorを表示されます。
この[Source Image]の項目にProjectからStar.pngをドラッグ＆ドロップするだけです。
これでSceneやGame上でも白い矩形が星の絵に変わります。
UIの配置や画像の張り方は以上となります。
実際にやる手順は少ないので何度か試せばすぐになれると思います。
これで皆さんもUIをバリバリ作っていってください！