序文
ゲーム制作テクノロジーの継続的な進歩に伴い、ゲーム エンジンは常に更新され、最適化されています。その中でも UE5 はゲーム開発で広く使われているエンジンの 1 つですが、umg をベースにした ui フレームワークが使いにくいため、一般的なゲーム開発では基本的に umg で十分かもしれませんが、特に ue は他の多くの分野で使用されているため、デジタルツイン業界はますます広く使われるようになってきていますが、umg を使用してスケーラビリティの高いエディタやシステムを構築することはまだ比較的困難です。特にフロントエンド UI フレームワークと比較すると、その効果とスケーラビリティははるかに劣っています。スレート フレームワークue エディターで使用されるファイルは、実行時に使用するときに C++ で再度カプセル化する必要があり、これも使用するのが非常に面倒です。
私たちのチームはデジタルツイン関連のツールも開発しています。全体のリンクは非常に長く、ue ベースのクライアントはそのほんの一部にすぎません。クライアント UI インターフェイスと関連機能を作成するときに、ue mall を使用しました。静かなドッキング システムを基本フレームワークとして使用しています。独自のリンクのデータ構造と互換性を持たせるために、多くの変換と再構築が行われています。まだ開発中のツールであるため、リストすることはできません。すべてのコンテンツ。中心となるのは、多数のエディターをコピーすることです。アセット ライブラリ、ローカル編集ツール、コンポーネント コンポーネント、さらにはランタイム ブループリントを含むデバイス ロジック。このビデオでは主に UI フレームワークの構築アイデアについて説明します。後で、製品全体の機能とモジュールを共有します。交換を歓迎します。
以下は開発中のスクリーンショットです。
この記事では、UE5 の umg を使用してランタイム エディター UI フレームワークを構築する方法について説明します。プロセス全体が非常に複雑で面倒なので、具体的な手順は説明せず、関連するアイデアのみを説明します。スクリーンショットを撮ることは不可能なので、開発プロセス ということで、ここではアイデアを整理するために静かなドッキング システム コンポーネントを例に挙げます (結局、これもこのフレームワークに基づいて修正されています)。umg についてはある程度の理解が必要です。見てみましょう。最初のエフェクトで:
これには、柔軟に拡張可能なメニュー バー、ドラッグ可能なツールバー、リスト コンポーネント、柔軟に拡張可能なサイドバー、ウィンドウのタイトル バー、ビューポートのサイズ変更、マルチ ウィンドウの実装などが含まれます。。。, 次に、umg の基本的な理解が必要となる具体的な実装アイデアを 1 つずつ紹介します。
基本的なフレームレイアウト
メイン ウィジェットを作成し、ツールバー、メニュー バー、ビューポート、サイドバー、メニュー ネストなどを含むグリッド ネスト名スロット + グリッド パネルを通じてメイン UI 全体の基本レイアウトを決定します。。。
UI の最上位にスケール ボックスを含めることを忘れないでください。これにより、dpi が異なる画面上で UI 全体のテキスト サイズ表示の一貫性を確保できます。
メニューバー
メニュー バーは非常によく使用されるコンポーネントですが、ここで umg を使用してシミュレートする場合、基本的には垂直ボックスをネストすることで実装されます。
構造は次のとおりです。
これをレイヤーごとに分析し、サブメニューから始めて、最後にメニューバーに結合してみましょう。
メニューバーのサブボタン サブボタン
スタイル: 一般に、ホバーのハイライト効果はボタンのスタイルによって設定できますが、十分な柔軟性がない場合があります。ボタン コンポーネント自体の押された/ホバーされた/クリックなどのイベントを使用することに加えて、場合によってはウィジェット全体のホバー コールバックが必要ですが、これはまったく行われていません。特定のボタンのコールバックの代わりに、マウスの入力時とマウスの離脱時にイベントを使用して、ウィジェット全体のフォーカスを設定できます。後で使用されます。
もう一度ボタンをクリックするか、ウィジェット以外の部分をクリックするとウィジェットが消えますので、フォーカスパスから削除して書き換えてください。
効果は次のとおりです。ホバーとボタンが消えます。
また、ボタンによって実行する必要があるアイコン、コマンド、名前、またはその他の必須属性をカプセル化し、それらを再利用可能なコンポーネントにして、umg の事前構築および構築中に実行できるようにする必要もあります。
サブメニューサブメニュー:
この部分は比較的単純で、各メニュー項目の下にスロットを追加し、そのスロットにカプセル化されたサブメニューをネストします (ボタンをネストするには垂直ボックスを使用するだけです)。
メニュー項目のスロットの位置に注意してください。ポップアップ メニューが正しい位置に配置されるように、アンカー ポイントは右上隅にある必要があります。
メインメニューメインメニュー
この場合、メニュー リストをメイン メニューにネストできるため、トップレベル メニュー バーのネスト ロジックは次のようになります。
サブボタン--サブメニュー--メニューリスト--メインメニューボタン、そして最後にhorizontalboxを介してメニューバーにネストされます。
イベントコールバック
メニュー バーはいつでもその機能を拡張する必要があるため、ボタン イベント バインディングをハードコーディングすることは絶対に不可能です。各ボタンにコマンド変数を設定し、イベント ディスパッチャーをバインドし、サブメニューのイベントを再帰的にバインドすることができます。メイン メニューから下に移動して、すべてのイベントをバインドします。実行する必要があるコマンドは、メイン メニューに書かれています。
ボタンを再帰的に検索します。
各サブメニュー ボタンのプロキシ イベントをバインドします。
文字列をオンにすることで各ボタンの機能を実行します
ツールバー
ツールバー項目を定義する
ツールバーの使用方法は数多くあります。チェックボタンの場合もあれば、ドラッグ アンド ドロップが必要な場合もあれば、単なるボタンの場合もあります。そのため、まずツールバー項目コンポーネントを定義して、マウスの入力/終了などの機能とスタイルをカプセル化します。カーソルのスタイル、コールバック、イベントなど。
ブループリントによるウィジェットのカーソル切り替え:
切り替えられるカーソルスタイルの種類
次に、ツールバー項目のセットをウィジェットにカプセル化して、グリッド パネルを介して配置します (水平配置と垂直配置を柔軟に切り替える必要があるため、垂直ボックスまたは水平ボックスを固定的に使用することはできません)。
ツールバーコンテナを定義します。
コンテナはツールバー項目を配置するために使用され、ネスト ロジックは次のとおりです。
ツールバー項目----名前スロット----スクロールボックス（オプションが多すぎて画面上に配置できない場合のスクロールに使用できます）----境界線----キャンバスパネル（スクロールボックスのスクロールをサポートするために使用されます）
ツールバーのドラッグ:
ドラッグ: ツールバーのマウス ドラッグ イベントをオーバーライドします。まず、マウスの位置を介して UI ドラッグの位置を決定します。
次に、ドラッグ ドロップの操作を作成し (もちろん、ここでドラッグ ドロップの新しい bp を作成する必要があります。これはドラッグ ドロップの変数を一時的に保存するために使用されるため、ここでは詳細は説明しません)、対応するペイロードを設定します。そして、オフセットをドラッグします（ドラッグビジュアルは、ドラッグ時にマウスに従うumgです。ここではデフォルトでumgボディに設定されています）
ドラッグドロップ関連ドキュメント docs.unrealengine.com/5.0/en-US/creating-drag-and-drop-ui-in-unreal-engine/
ドロップ: ドロップするときに注意する必要がある状況が 2 つあります。1 つは、ドロップがツールバー項目コンテナーに吸着され、ツールバー全体が再配置される必要があることです。もう 1 つは、ドロップがパネル上の別の場所に配置され、ツールバーのウィジェットはカーソルの位置に基づいて再作成され、初期化されます。
ドックパネルスイッチ
umg を使用して docker の基本機能をコピーするのは簡単ではありません。
基本的なパネルは大きく 2 つの部分で構成され、1 つはパネルを切り替えるためのタブ、もう 1 つは UI コンテンツをネストするためのコンテンツです。制作プロセスは非常に複雑なので、ここではアイデアのみを紹介します。
ここでのシミュレートドッカーの基本的な機能構造は以下の通りで、切り替えやドラッグなどの機能を提供するドッカータブと、ユーザー定義のウィジェットをネストするためのコンテナーとしてのドッカーコンテンツの大きく2つに分かれます。 :
ドッカータブを定義する
docker タブは、対応するコンテンツ パネルを切り替えるためのタブで、ウィジェットのスタイルを設定するもので、ここではアイコンやコンテンツ クラスなどを公開しています。
Docker コンテンツを定義する
Docker コンテンツの構造は比較的単純で、ユーザー定義のウィジェットが名前スロットを介してネストされ、Docker コンテンツと Docker タブが Docker ウィジェットにネストされ、タブを介して切り替えられます。
タブでコンテンツを切り替える
タブとコンテンツを切り替える基本的なロジックは、タブに対応するguidを見つけ、それがコンテンツのguidと同じであれば表示を切り替え、そうでない場合は表示されません。
プロセスは次のとおりです。
タブに対応するコンテンツ ウィジェットを見つける
次に、自分のウィジェットをアクティブにし、他のウィジェットを非アクティブにします
ここでもう 1 つ言っておきます。初心者は、umg でマウス関連の操作を記述するには、umg グラフの左上隅にあるマウスボタンをオーバーライドする必要があることを知らないかもしれません。アクター bp とは異なり、さまざまなキーボードやキーボードが umg で予約されていますマウス イベントには、以下に示すように、ボタン、スクロール ホイール、フォーカス、フォーカス外、その他多くのイベントが含まれます。
ドッカードラッグ:
この部分は複雑な OTL です。。。。ロジックは非常に複雑なので、関連するアイデアしか提供できません。
まずは予備的なアイデアをリストアップしてみましょう。
ドラッグ: ドラッグ ドッキング タブを使用して、ドロップするウィジェットを決定し、タイプに基づいて吸着操作を実行するかどうかを決定します。
落とす：
吸着のロジックは主にドロップの位置に基づいて、ドッカーが最終的に配置されるグリッド パネルの行と列を決定します。
しかし、ここでさらに厄介なのは、ドッカーをドラッグすると、このフレームワークが最初に前のドッカーを削除し、次に新しいドッカー ウィジェットを作成することです。これにより、ドッカー コンテンツ内でユーザーが作成したウィジェットが再初期化されるため、ユーザー ウィジェットがinside 一部のデータが失われ、コンストラクターが再度実行されますが、Docker コンテンツ ウィジェット データのキャッシュを実装するためにロジックのこの部分をまだ変更しています。
ビューポートのサイズと位置を更新します
docker 関数をシミュレートするときは、docker ウィンドウ スケーリング関数をシミュレートすることが非常に重要です。この効果を達成するために umg を使用することは、まさに国を救う曲線です。基本的な考え方は次のとおりです: ビューポート部分の ui の範囲を計算することにより、 umg、実際のビューポート全体に対する相対位置とサイズ、その後ポスト プロセス マテリアルを駆動するか、C++ 関連関数を呼び出してビューポート関数を実装します。
ビューポートの umg 範囲を実現したいと考えています。
以下に 2 つの例を示します。
後処理材料による
get umg の空間ジオメトリとビューポートの比率を通じて、ターゲット ビューポートと元のビューポートのサイズを取得できます。ここでの判断ロジックも少し面倒です。最初にターゲット ビューポートのアスペクト比の比率を判断する必要がありますズームとして x または y を使用するかどうかを決定するには、元のビューポートの標準を参照し、ターゲット ビューポートの位置とサイズに基づいて、対応するスケーリングとオフセットの値を計算します。
カメラの fov の変化を計算する必要もあります (ue のウィンドウ fov は x に基づいており、ウィンドウの幅を変更すると fov に影響し、高さを変更しても影響を受けませんが、それに応じて画像が切り取られて完成します)。
次に、さまざまな状況下でのターゲット ビューポートと元のビューポートの比率と相対位置に基づいて、後のマテリアル UV のスケーリング パラメータとオフセット パラメータが計算されます。
最後に、マテリアルはレベルの後処理に渡されます。
winインターフェースを呼び出すことで実装されます。
GEnging->GameViewport->SplitscreenInfo[0].PLayerData[0] の関連パラメーターを直接呼び出すだけです。
マルチウィンドウの実装
マルチ ウィンドウは、一般的なクライアント ベースのエディタの非常に基本的な機能です。Umg では、これをネイティブに実装できません。プラグインを使用する必要があります。
使い方は非常に簡単なので詳細は割愛しますが、マルチウィンドウの最終的な効果は以下の通りです。
00:22
Windowsのタイトルバーの実装
まず、プロジェクト設定でパッケージ化されたプログラムをボーダレスに設定します。
次に、umg に Windows タイトル バーを追加して、プログラムの左上隅にアイコンを簡単に設定できるようにします。
コマンドバー
ueのコマンドライン機能はランタイムでよく使われる機能で、実装は非常にシンプルで、編集可能でコマンドを直接実行することもできますが、補完機能はまだ実装されていません。
要約する
実行時に umg を使用してクライアント エディタの基本機能をシミュレートするのは非常に面倒なので、ここでは基本的なアイデアだけを紹介します。コミュニケーションを歓迎します。もちろん、クライアント エディタの作成はこれだけではありません。次の記事は次の記事です。ランタイムについて説明します。シーン編集、ランタイム マテリアル編集、モデル表示、ギズモ、クリック ハイライト表示、時間と天候の同期、ワールド アウトライン、リソース プール編成フォーム、読み取りと保存、リソース パッケージ化などのシーン構築のための実装アイデア。