Language:
Page Info
Skill Level:
Engine Version:

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

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

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

この操作ガイドでは、HUD に情報を伝える 3 つの例を見てみます。3 つともタスクを遂行しますが、3 つめの例が最もコスト効率が高くなっています。これは、更新プロセスをティック イベントから離し、イベント ディスパッチャー を使って手動で情報を更新することで実現します。

サンプル 1.関数のバインディング

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

ここでは、基本的なヘルス / エネルギーのセットアップをします。

CastBinding_SimpleHealth.png

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

CastBinding_BindingScript.png

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

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

CastBinding_InGame.png

もし、これだけしか行っていない場合、その影響はあまり大きくないはずです。複雑なシステムでこうしたやり方でいくつかのプロパティが設定されている場合、フレーム毎にすべての更新をチェックするため、遅くなってパフォーマンスを低下させる可能性がありますが、これは避けたいでしょう。

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

関数のバインディングを使用する代わりに、若干コスト効率が高い プロパティのバインディング を使用することができます。

同じくヘルス / エネルギーのセットアップを使用します。

CastBinding_SimpleHealth.png

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

PropBinding_EventConstruct.png

ひとつめの例では、Character ブループリントにフレーム毎に ブループリントでキャストする ようにし、ヘルスとエネルギーの変数にアクセスするようにしました。ここでは、これを再度行い、参照として保存し、フレーム毎に行わなくてもいいようにします。これは前の方法に比べて若干コスト効率が高くなります。

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

PropBinding_HealthBound.png

この方法を使用すると、フレーム毎にキャストして「プレイヤー キャラクターのブループリントは何か」をチェックして、結果を得た後に「ヘルスとエネルギーの値を要求」しなくなります。プレイヤー キャラクターが何であるかを知っていますが、それでもプレイヤー キャラクターを見て、フレーム毎に「キャラクターのヘルスとエネルギー」を問い合わせています。

前の方法と同様に、プロジェクトの範囲次第では、これは一般的に安全な方法です。しかし、拡張するほど、最適化が必要になります。こうしたやり方でセットアップしたプロパティがいくつかあれば、それがパフォーマンスにどのような影響を与えるかを検討します。

サンプル 3.イベント駆動

イベントを使って変更があった場合のみ HUD を更新することを検討します。

引き続き、ヘルス / エネルギーのセットアップを使用します。

CastBinding_SimpleHealth.png

Character ブループリント内で、スクリプトの最後にヘルス値を減らす イベント ディスパッチャー を追加します。

DecreaseHealth.png

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

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

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

HUD Widget ブループリント内のカスタム イベントは、変更の有無に関わらず常にチェックするのではなく、変更があった場合にのみプレイヤーのヘルス表示をチェックし、更新します。キャラクターのエネルギーに対しても同じように設定すると、HUD Widget ブループリントは以下のようになります。

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

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