執筆者 / K.T
はじめに
時間のかかる処理を実行すると、画面更新が止まるなどの弊害が起きることがあります。
このような問題を避けるために、非同期処理の仕組みが用意されています。
サンプルとして、画面上のテキストを毎フレーム更新しながら、並行して時間のかかる処理を行う仕組みを作成します。
この記事の内容
長いので、２回に分けてお送りします。
今回（１／２）は「ウィジェット」というユーザーインタフェースの表示部分を作成します。
次回（２／２）は「ウィジェット」の動作部分を作成し、時間のかかる処理が非同期に実行されるようにします。
用意するもの
・Unreal Engine 4.23.1
・Visual Studio 2017
プロジェクトの作成
プロジェクトブラウザを起動し、新規プロジェクトを作成します。
C++タブの基本コードを選択しておいてください。
できあがったプロジェクトのコンテンツフォルダ内に、ウィジェットブループリントを新規作成します。
ウィジェットの表示部を作成
作成したWidgetBPを開きます。
パレットからTextを選択し、画面中央のビジュアルデザイナへドラッグ＆ドロップしてください。
詳細で各種パラメータを設定します。
階層で先ほど作成したText_Frame_Titleを選択し、右クリックメニューから複製を実行します。
複製したTextについても、詳細で各種パラメータを設定します。
同様の手順で、以下の4つのTextを追加してください。
パレットからButtonを選択し、画面中央のビジュアルデザイナへドラッグ＆ドロップしてください。
詳細で各種パラメータを設定します。
パレットからTextを選択し、ビジュアルデザイナ内の「ボタンの上に」ドラッグ＆ドロップしてください。
詳細で各種パラメータを設定します。
パレットからBackground Blurを選択し、画面中央のビジュアルデザイナへドラッグ＆ドロップしてください。
詳細で各種パラメータを設定します。
ここまでできたら、コンパイルして保存後にウィンドウを閉じてください。
レベルブループリントを作成
ツールバーの[ブループリント]-[レベルブループリントを開く]を選択します。
BeginPlayノードを追加してください。
ウィジェットを作成ノードを追加し、ClassにWidgetBPを設定してください。
作成したウィジェットをビューポートに追加します。
また、操作の妨げにならないよう、マウス入力のロックを抑制しておきます。
ここまでできたら、コンパイルして保存後にウィンドウを閉じてください。
動作を確認
ツールバーの[プレイ]-[選択ビューポート]を選択します。
先ほど作成したウィジェットが、画面上に現れました。
まだ表示部分しか作成していないため、特に変化はしません。
まとめ
今回（１／２）はウィジェットの表示部分を作成し、ビューポートに追加して画面に表示されるようにしました。
次回（２／２）はウィジェットの動作部分を作成し、時間のかかる処理が非同期に実行されるようにします。