画面UI
最終更新：
orika_ex_miyako 2023年01月13日(金) 10:06:47履歴
画面UI 
参考サイト
Unity 公式ドキュメンテーション
Create user interfaces (UI)
UI(ユーザーインターフェース)には、見やすさ、デザイン性、レイアウト（配置場所）など、設計から考えるべき要素が多くあります。
しっかりと設計し、おろそかにしないことによって、ゲームへの没入感や画面の見やすさなど、ユーザーがゲームに対して受ける印象が大きく変わりますので注意が必要です。
特に大きさ（大きすぎるとゲーム世界の視認性が悪くなる）やデザインは重要です。重厚な世界観にポップなレイアウトのUIでは間が抜けて見えてしまいます。
表示する情報をゲームごとに検討する
UIは常に画面の前面に同じ位置で表示している情報という認識を持っておきましょう。
そのため、ユーザーがいつも同じ場所に視点を向けることで取得したい情報を見えるように提供する役割があります。
またゲームを遊ぶ上で情報は必要ですが、多すぎても、また少なすぎてもよくありません。
情報が多い方が楽しい雰囲気のゲームになるのか、あるいは少ない方が没入感が高くなるのかは、ゲームの雰囲気や世界観などで変わります。
例えばレースゲームやフライトゲームなどであれば、一人称視点で計器のようなUIがたくさん並んでいた方が、操縦席・運転席にいる雰囲気が表現できます。
逆に、3人称視点などであれば、画面に情報表示が少ないほど、ゲームの世界を歩き回るプレイヤーと世界の地形に入り込むことが出来ます。
現在のゲーム性を考えて、表示するべき情報を精査することが大切になります。
レイアウト用のフォルダ（空のゲームオブジェクト）の作成
Canvas内であればUIは表示可能ですが、Anchorの位置も考えて、まずは空のゲームオブジェクトを作成し、それらをCanvasの四隅に配置しましょう。
それぞれ、Left_Bottom、Right_Bottom、Left_Top、Right_Topのように、わかりやすい名前にしてフォルダ代わりにします。
そして、それぞれの位置に配置したいUIを入れて置くようにすると、どの位置に、どのUIの設定があるのか分かりやすくなります。
ここでは1例としてLeft_Bottomを作成してみます。
視覚的にわかるようにWidthとHeightを大きくしていますが、フォルダの役割なので0，0でも構いません。
役割に応じてアンカーの位置をしっかりと決めておきましょう。
---
この空のゲームオブジェクトをフォルダ代わりに使用する手法は様々な部分で応用が可能です。
また上記のように四隅に分ける方法以外にも、画面上部と下部をまとめて管理するように、Topフォルダ/Bottomを作成したり、
画面をLeft、Center、Rightのように３つに分けて考え、フォルダを作成することも出来ます。
製作するゲームの種類に応じて、これらのフォルダを上手く活用し、作業を効率よく、またAnchor設定がやりやすい配置を心がけましょう。
下記の画像は、アンカーをTop Center に設定した空のゲームオブジェクトをTop_CenterPlaceとして作り、フォルダ代わりにしています。
その中に TimePlace という時間の情報を表示させるゲームオブジェクトを配置しています。
またアンカーをTop Rightに設定した空のゲームオブジェクトをTop_RightPlacとして作り、こちらもフォルダ代わりにしています。
その中にリセット用のボタンを表示させるゲームオブジェクトを配置しています。
画面の左下にはコントローラーのボタン、右下には矢印のボタンが見えていると思います。
これらも同様に空のゲームオブジェクトを作成してそれをフォルダ代わりに利用して設置しています。
このように統一された内容によってUI管理を行うことで、どこにどのUIが配置されているかを追いやすくなり、修正も容易になります。
設置できたからいいや、ではなく、その後の管理・修繕のことも考えた上で設計を行うことが必要です。
スマホゲームにおけるUIの位置について
多くのゲームではUIは情報伝達の場所であり、基本的にはあまりにUIが大きすぎてしまうとゲーム画面が見えにくくなってしまいます。
特にスマホゲームの場合には手で直接画面を操作するため、ボタン用の操作を行う際にそのせいで重要なUIが見えなくなってしまわないように気をつけましょう。
文字の大きさ、画像の大きさなどを含めてゲームを楽しむ環境を阻害しないように考えて作成することが大切です。
明らかに大きなボタン、小さすぎる数字なども問題ですのでエディターでの設置が終わりましたらスマホの画面でも確認をしておきましょう。
この際にアンカー設定がされていなかったりずれていたすると期待している位置にUIが設置されませんので、そちらも一緒に確認をしましょう。
コメントをかく