Common UI は、複数のレイヤーを含むメニュー、サブメニュー、ポップアップなど、複雑なナビゲーションを使用したクロスプラットフォームの UI 開発をサポートします。Unreal Engine ユーザーは、当初フォートナイトの UI 向けに開発されたこのプラグインを [Plugins (プラグイン)] メニューで使用することができます。このページでは、Common UI で対処するために設計されたユースケースと、その設計を推進する主なコンセプトの詳細について説明します。
Common UI で解決される問題
マルチレイヤー メニューを操作する
次の画像は、複雑なメニューの一例です。
この UI では、バックグラウンドのタブ付き UI の上に、2 つのブレード メニューが重なった状態になっています。バックグラウンドの UI は引き続き存在してはいるものの、上のレイヤーが表示されているときは操作できません。どうすればこのバックグラウンドの UI を選択して操作できるようにすることができるでしょうか？
その一方で、入力方法が、プラットフォームやコントローラーに応じて異なる場合があります。PC では、マウス カーソルで UI 要素をクリックすると、上の図の UI を選択できます。ただし、コンソールでは、カーディナル ナビゲーションやボタン操作で UI を選択します。複数のプラットフォーム (コンソールおよび PC) で機能する UI を作成するにはどうすればよいでしょうか？
正しい要素に戻る
この画像のようなポップアップが表示されたとします。その後、ユーザーはポップアップを閉じます。UI がカーディナル ナビゲーションの正しい要素に戻るにはどうすればよいでしょうか？ポップアップの下のオーバーレイ UI を閉じた場合に、再び戻る場所を特定する必要があります。この問題の解決策は、さまざまな状況に適用できる必要があります。
コンソール固有の UI 要素
この画像では、インタラクションごとに押すボタンが UI に表示されています。ただし、これらのボタンのアイコンはコンソールごとに異なります。コンソール固有の UI 要素であるかどうかを問わない UI を作成するにはどうすればよいでしょうか？
Common UI の機能
Common UI の機能は、上記のような問題に対処するために設計されています。Common UI を使用することで、以下が可能になります。
-
ウィジェットを選択的に操作できる。これにより、レイヤーを使用した充実した UI を簡単に作成することができます。
-
マルチプラットフォーム (コンソールおよび PC) サポート。
-
コンソールでは、以下の機能を利用できます。
-
ブレッドクラム、履歴を含むカーディナル ナビゲーション管理。
-
コンソール固有の UI 要素の管理。
-
キー コンセプト
このセクションでは、Common UI の設計と主な機能について説明します。
入力ルーティング
コンソールや PC では、入力によって操作性が決定されます。「選択的な操作性」を実現するために、Common UI は 入力ルーティング を使用します。これは、所定の期間のマウスやゲームパッドなどからの入力を特定のウィジェットのみが受け取れるようにします。
入力ルーティングは、ウィジェット間で入力を選択的に分散させることもできます。たとえば、この画像では、バンパー ボタンは常に上部のタブ ウィジェットにルーティングされ、[X] アクション ボタンは、カーディナル ナビゲーションで現在選択されているウィジェットにルーティングされます。
さらに詳細は、Common UI のソースコードの CommonGameViewportClient.h と CommonUIActionRouterBase.h を参照してください。
ノード
Common UI は、視覚的に上にレンダリングされている UI ウィジェットに入力をルーティングします。Common UI はウィジェットを ノード に変換します。ノードが視覚的な階層および論理的階層に基づいた入力ルーティングを処理します。
ノードは、いくつかの例外を除き、スレート 階層と一致するツリーに編成されます。各ツリーは、通常、ビューポートに直接配置されたウィジェットで表されるルート ノードと、一般的にボタンのような個別の UI 要素で表されるリーフ ノードで構成されます。
Common UI は、ティックごとに 1 度、他のどのツリーよりも上位にペイントされたノードのツリーを見つけ、そのツリーのルート ノードに入力を送信します。そのルート ウィジェットは、ツリー内で入力を処理する準備が整っている最初のリーフ ウィジェットに入力を転送し、そのウィジェットは入力を処理するか、必要に応じて再度転送します。
詳細については、UIActionRouterTypes.h を参照してください。
アクティブ化可能なウィジェット
Common UI 内では、特定のウィジェットのみが入力を処理する目的でノードに変換され、入力を処理する準備ができているウィジェットのみが入力を受け取ります。これらのウィジェットは アクティブ化可能なウィジェット と呼ばれ、入力を受け取る準備ができている場合は、「アクティブ」とみなされます。
アクティブ化可能なウィジェット：
-
アクティブ状態と非アクティブの状態を切り替え、入力を受け取る準備ができているかどうかを示すことができます。
-
同一ツリー内にある他のアクティブ化可能なウィジェットに入力を転送することができます。
-
バック アクションを処理するときなど、適時に自動的に非アクティブにすることができます。
アクティブ化可能なウィジェットでは、ユーザーが現在入力を受け取っているオーバーレイ UI を閉じた場合に、正しい要素に戻るというのは難しいことではありません。入力は、最上位でペイントされているツリーにのみルーティングされるため、下位に UI レイヤーがあるかどうかを気にすることなくウィジェットをアクティブのままにしておくことができます。上位の UI を閉じると、Common UI は、単に、下位の UI レイヤーにある引き続きアクティブなウィジェットに入力をルーティングします。
詳細については、CommonActivatableWidget.h を参照してください。
参考文献
Common UI を初めて使用する際のセットアップ方法の詳細については、「Common UI クイックスタート ガイド」を参照してください。
機能別サンプル
Common UI の基本的な活用例については、Common UI のコンテンツ サンプルを参照してください。完全なフロントエンド メニューを含む、より高度な例については、Lyra サンプル プロジェクトをダウンロードしてください。