Unity でGame 制作 UIの作り方

UI(ユーザーインターフェース)に関して覚書(=゚ω゚)

Unityで使用できるUIは

  • Unity UI(標準のGUI)
  • IMGUI(スクリプトから呼び出すタイプ)
  • UIElements(2020/05月現在エディターでのみ使用可能)

の3種類があるようです。 UIElementsに関してはランタイム対応がまだ未定なので「今後に期待」なヤツです。

IMGUIはスクリプトから呼び出せるタイプですがランタイムでの使用が非推奨。
※やってやれないことはないですが細かいデザインとかがめんどくさい感じです。

実質Unity UI(標準のGUI)しか選択肢はありません(´・ω・`)

SceneにUIコンポーネントを追加することでUIを構築していきます。

UIコンポーネント自体は変わったものはないので名前を見れば大体の機能は分かると思います。

すべてのUIコンポーネントはCanvas上に配置されます。Canvasコンポーネントがなければ自動的にCanvasが配置され、その上にUIコンポーネントが追加されます。

CanvasはScreenに対して直角に配置されるのでSceneViewを2Dモードに切り替えることで実際の表示に近い形で配置したUIを確認できます。 SceneViewの切り替え

UIコンポーネントに画像を使用したい場合はImage sourceから設定できます。
Image sourceの選択

通常のImage画像(ImageType Default)では設定できないので、ImageTypeを「Sprite(2D and UI)」に変換するのを忘れずに。 ImageTypeを選択 Image typeをDefaltからSprite(2D and UI)に変更してもなんのアクションもないので「アレ?」ってなりますが、 別のImageを選択するか、選択を外せば変更確認ダイアログが表示されます。
インスペクタの下の方に確定ボタンがでるので変更後に確定します(´・ω・`) 確定ボタン

UI用画像はコンポーネントごとに一枚づつ用意してもいいですが、実行時の効率などからひとまとめにした画像(Sprite Atlasとか呼びますね)から切り出す方式が用意されています。

まずはひとまとめになった画像をTextureType Sprite(2D and UI)、SpriteMode Multipleに変換し、その後Unityに用意されているSpriteEditorで編集します。 SpriteEditor SpriteEditorが入ってない場合はPackageManagerから2D SpriteをInstallしましょう。 メニューからパッケージマネージャを呼び出す 2D SpriteをInstall

SpriteEditor内をクリックすると矩形が表示されるのでポイントをドラッグして切り出したい画像をトレースします。
UIの大きさがわかっている場合は右下のSpriteダイアログから直接数値で指定するのもありです。
トレースできたら適当な名前をつけて(右下のSpriteダイアログで編集)確定(Apply)します。 Spriteの切り出し 同じ手順を切り出したいパーツの分繰り返します。

一つの画像内に複数のスプライトが設定されました。 Multiple sprite

あとは、初めにやった要領でUIコンポーネントに切り出したSpriteを設定していけばOKです(=゚ω゚)ノ