Blog

[UE4] 非同期処理とウィジェットについて(1)

執筆者 / K.T

はじめに

時間のかかる処理を実行すると、画面更新が止まるなどの弊害が起きることがあります。

このような問題を避けるために、非同期処理の仕組みが用意されています。

サンプルとして、画面上のテキストを毎フレーム更新しながら、並行して時間のかかる処理を行う仕組みを作成します。

この記事の内容

長いので、2回に分けてお送りします。

今回(1/2)は「ウィジェット」というユーザーインタフェースの表示部分を作成します。

次回(2/2)は「ウィジェット」の動作部分を作成し、時間のかかる処理が非同期に実行されるようにします。

用意するもの

・Unreal Engine 4.23.1

・Visual Studio 2017

プロジェクトの作成

プロジェクトブラウザを起動し、新規プロジェクトを作成します。

C++タブの基本コードを選択しておいてください。

できあがったプロジェクトのコンテンツフォルダ内に、ウィジェットブループリントを新規作成します。

ウィジェットの表示部を作成

作成したWidgetBPを開きます。

パレットからTextを選択し、画面中央のビジュアルデザイナへドラッグ&ドロップしてください。

詳細で各種パラメータを設定します。

階層で先ほど作成したText_Frame_Titleを選択し、右クリックメニューから複製を実行します。

複製したTextについても、詳細で各種パラメータを設定します。

同様の手順で、以下の4つのTextを追加してください。

パレットからButtonを選択し、画面中央のビジュアルデザイナへドラッグ&ドロップしてください。

詳細で各種パラメータを設定します。

パレットからTextを選択し、ビジュアルデザイナ内の「ボタンの上に」ドラッグ&ドロップしてください。

詳細で各種パラメータを設定します。

パレットからBackground Blurを選択し、画面中央のビジュアルデザイナへドラッグ&ドロップしてください。

詳細で各種パラメータを設定します。

ここまでできたら、コンパイルして保存後にウィンドウを閉じてください。

レベルブループリントを作成

ツールバーの[ブループリント]-[レベルブループリントを開く]を選択します。

BeginPlayノードを追加してください。

ウィジェットを作成ノードを追加し、ClassにWidgetBPを設定してください。

作成したウィジェットをビューポートに追加します。

また、操作の妨げにならないよう、マウス入力のロックを抑制しておきます。

ここまでできたら、コンパイルして保存後にウィンドウを閉じてください。

動作を確認

ツールバーの[プレイ]-[選択ビューポート]を選択します。

先ほど作成したウィジェットが、画面上に現れました。

まだ表示部分しか作成していないため、特に変化はしません。

まとめ

今回(1/2)はウィジェットの表示部分を作成し、ビューポートに追加して画面に表示されるようにしました。

次回(2/2)はウィジェットの動作部分を作成し、時間のかかる処理が非同期に実行されるようにします。

参考リンク

Widget ブループリント

ウィジェットの作成