Screen Space - Overlay での UI の作成

本チュートリアルは、Unity 2019.4.10f1 LTS を使用して検証されています。

Unity にはいくつかの異なるタイプのユーザーインターフェースオプションがあり、ユーザーはアプリケーションのニーズにぴったり合った UI を作ることができます。UI には大きく分けて 2 種類のカテゴリー (スクリーンスペースとワールド空間) があります。Screen Space は、UI を視聴者の画面に投影するもので、UI について議論する際に多くの人が思い浮かべるものです。World Space UI は、3D 空間に存在するように、シーン環境の中に直接インターフェースを配置します。XR アプリケーションでは、より自然な操作感を実現するために、この種の UI がよく使用されます。

Unity で UI を作成するには、まず Canvas を作成します。Canvas オブジェクトは、UI システムに含まれるものと含まれないものを定義し、UI がどのように画面上にレンダリングされるかを管理します。

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

2. 新しい Canvas をより簡単に表示するには、Scene ビューで 2D ボタンをクリックします。UI 要素は 3D でも編集できますが、2D で作業することで、UI コンポーネントの選択や Rect Transform ツールの使用がより簡単になります (画像 01)。

デフォルトでは、Canvas は一定のピクセルサイズに設定されています。つまり、画面の大きさにかかわらず、アプリケーションがキャンバス上で表示されることは変わらないため、UI の一部が切り取られてしまう可能性があります。この現象は、エディターの Scene ビューを縮小することで確認できます。ウィンドウが縮小されると、最終的に UI が横に切れてしまいます。一般的に、UI は表示されているウィンドウのサイズに合わせて拡張されるべきなので、別の UI モードを選択する必要があります。

3. Inspector で Canvas Scaler を探し、UI Scale Mode を Scale With Screen Size に変更します。

4. アプリケーションに特定のターゲット解像度がある場合は、それを Reference Resolution 入力に入れます。

5. UI のニーズに応じて Match スライダーを設定します。Match を 0 に設定すると、Canvas の幅に比例して拡大され、1 に設定すると高さに比例して拡大されます。0.5 に設定すると、幅と高さが均等になります (画像 02)。

同じシーンで、同じ画面と異なる画面の複数のキャンバスを使うことができるので、整理整頓や特定の機能を必要とする場合に役立ちます。

これで、キャンバスを作成し、画面サイズに合わせて拡大/縮小する方法がわかりました。これで、画面サイズの異なるモバイルデバイス向けのゲームやアプリケーションを作成する際に、画面が途切れることなく、それぞれの画面に合わせて適切にスケーリングされた UI を作成することができるようになります。