イベントで UI の更新を操作する

イベントを使用して更新を操作することで UI エレメントを最適化する方法を学習します。

Windows
MacOS
Linux

この操作ガイドに進む前に、UMG UI デザイナ の概要を理解しておくことを推奨します。

UI 要素を作成するためのベスト プラクティスは、非効率な部分を最小にし、パフォーマンスが高くなるように、コンテンツを最適化して作成する方法を考えるようにすることです。例えば、プロジェクトのスコープ範囲によっては、情報を UI に伝達するために プロパティのバインディング が適しているかもしれません。ただし、構成する UI がより複雑であったり、プロジェクトの最適化が必要な場合は、フレーム毎ではなく、知っておく必要があるベースで UI の更新を検討することをお勧めします。

このリファレンス ガイドでは、HUD に情報を伝達する 3 通りの方法を検討します。3 つのアプローチすべてがタスクを実行しますが、更新プロセスをティック イベントから離し、イベント ディスパッチャー を使って手動で情報を更新するため、3 番目の方法が最も対費用効果が高いです。

例 1. 関数のバインディング

この例では、関数のバインディング を用いてプレイヤーのヘルス / エネルギーの更新を見てみます。

ここでは、基本的なヘルス / エネルギーの設定を行います。

CastBinding_SimpleHealth.png

表示の用意ができたら、GetHealthGetEnergy という進捗バーに バインディングを作成 します。この関数のバインディングでは、次に Player Character ブループリントにキャストし、Health と Energy に対して定義した変数ををアサインします。

GetHealth は以下のようになります。デバッグのために、 Print String ノードも追加し、ヘルス変数の値を画面上に表示するようにしました。

CastBinding_BindingScript.png

下の画像でしゃ、プレイヤー キャラクターのヘルス値とエネルギー値は HUD に渡されて反映されます。ただし、ヘルス値を更新していなくても青色のデバッグ テキストで、フレーム毎にヘルス値をまだチェックしていることがわかります。

CastBinding_InGame.png

基本的に、このアプローチでは「プレイヤーキャラクターのブループリントは何か」をチェックします。結果を得た後に、フレームごとに「Health と Energy の値を要求」します。システムが小規模で複雑度が低いほど、このアプローチが適してきます。ただし、複数のプロパティを使ってフレームごとに更新を確認する複雑なシステムを使用するのであれば、この設定では良いパフォーマンスは得られません。

例 2. プロパティのバインディング

2 つめのアプローチは プロパティのバインディング です。これは関数バインディングよりも少しだけ対費用効果が高くなります。

同じ Helath/Energy 設定を使用して、プロパティのバインディングの仕組みを見てみましょう。

CastBinding_SimpleHealth.png

Widget ブループリントイベント グラフ で、Event Construct を使用して Player Character ブループリントへの参照を取得します。

スクリプトがフレームごとに情報を呼び出さないように、Event Construct を使用して、Character ブループリントを 1 回キャストして情報を参照として格納します。

PropBinding_EventConstruct.png

次に進捗バーの値を Character ブループリント内の変数に直接バインドできます。

PropBinding_HealthBound.png

この方法を使用すると、フレーム毎にキャストして「プレイヤー キャラクターのブループリントは何か」をチェックして、結果を得た後に「ヘルスとエネルギーの値を要求」しなくなります。その代わり、フレームごとに Health と Energy の値のみを要求します。

プロジェクトのスコープによってはこの方法は効率的ですが、複雑なシステムを使用する場合はイベント駆動型アプローチの方が適しています。

例 3. イベント駆動

イベントを使って変更があった場合のみ HUD を更新することを検討し、同じ Health/Energy 設定を引き続き使用します。

CastBinding_SimpleHealth.png

Character ブループリント内で、スクリプトの最後にヘルス値を減らす Event Dispatcher ノードを追加します。この例では、Event Dispatcher ノードは Call Update Health です。

テスト目的で、F キーを押すたびにヘルス値が減るように設定しました。

UMG UI デザイナのクイック スタート ガイド」の「キャラクター変数を調整する」セクションに同様の例を作成しました。

DecreaseHealth.png

ヘルス値を減らすたびに、イベント ディスパッチャーも呼び出すようにしました。HUD Widget ブループリントのイベントグラフで、再度 Event Construct を使用して Player Character ブループリントへの参照を取得し、保存することができます。Character ブループリント内でカスタム イベントをイベント ディスパッチャーにバインドし、イベント ディスパッチャーが呼び出されると、このカスタム イベントが呼び出されるようにします。

画像をクリックしてフルサイズで表示

HUD Widget ブループリント内の Custom Event は、変更の有無に関わらず常にチェックするのではなく、変更があった場合にのみプレイヤーのヘルス表示をチェックおよび更新します。

以下の画像は、Health と Energy を同じ Event Construct スクリプトに統合する方法を示しています。

カスタム イベントの UpdateHealthUpdateEnergy が Character ブループリントからイベント ディスパッチャーにバインドされています。これらは、キャラクターのヘルスやエネルギーの値が変わった場合のみ呼び出されます。バインド プロセスに続き、HUD が構築されるときにこの 2 つのカスタム イベントを呼び出すことで表示も初期化します。

画像をクリックしてフルサイズで表示

Select Skin
Light
Dark
Unreal Engine のドキュメントを改善するために協力をお願いします!どのような改善を望んでいるかご意見をお聞かせください。
調査に参加する
閉じる

新しい Unreal Engine 4 ドキュメントサイトへようこそ!

あなたの声を私たちに伝えるフィードバックシステムを含め、様々な新機能について開発をおこなっています。まだ広く使える状態にはなっていないので、準備ができるまでは、ドキュメントフィードバックフォーラムで、このページについて、もしくは遭遇した問題について教えていただけると助かります。

新しいシステムが稼働した際にお知らせします。

フィードバックを送信