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

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

Windows
MacOS
Linux

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

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

このリファレンス ガイドで説明する例は 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 つめのアプローチは Property Binding です。これは関数バインディングよりも少しだけ対費用効果が高くなります。

同じ Helath/Energy 設定を使用して、Property Bindings の仕組みを見てみましょう。

CastBinding_SimpleHealth.png

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

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

PropBinding_EventConstruct.png

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

PropBinding_HealthBound.png

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

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

例 3. イベント駆動

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

CastBinding_SimpleHealth.png

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

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

DecreaseHealth.png

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

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

クリックして拡大

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

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

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

クリックして拡大

Select Skin
Light
Dark

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

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

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

フィードバックを送信