68.IsVariableでブループリントからUIを変更する

IsVariableを使ったUIの変更方法とは？

https://scrapbox.io/files/65cb3c79d5d8420026e1a86c.jpg

IsVariableとは、ウィジェットの詳細にあるIsVariableから有効にする事で、ブループリントからこのウィジェットを呼び出す事ができるようになります。つまり動的にUIの内容を変更する事ができます。できる事としては前のページで使用したバインディングと変わりませんが、バインディングは常にUIの内容を更新し続ける重めの処理になるので基本的にこちらのIsVariableを使用した方法でUIを動的に変更していきます。

🐱では実際に使ってみましょう。

①UIの準備|実践

前回のページ手順と若干被りますが、最初から作成していきます。

サードパーソンのテンプレートプロジェクトを使用していきます。

UIフォルダを作成して、その中にユーザーインターフェース > ウィジェットブループリントを作成します。名前はUIにします。

https://scrapbox.io/files/65cb337914f4730024d59f0c.jpg

🐱ちなみに今回はしていませんが、ウィジェットブループリントの命名は「WBP_Player」みたいにWidgetBluePrintの頭文字となる「WBP_」を先頭につけるとわかりやすいのでおすすめです。

ウィジェットブループリントを開きます。

https://scrapbox.io/files/65cb334d556d2b0025555bb1.jpg

CanvasPanelを追加して、Cavans下にTextウィジェットを追加します。

https://scrapbox.io/files/65cb33cdd9aff80024600f5a.jpg

Textを選択した状態でコンテンツのTextを「0」にして、Font > Sizeを200にします。

https://scrapbox.io/files/65cb33fdd5d8420026e13658.jpg

一旦コンパイルしておきます。

https://scrapbox.io/files/65cb348ef8ff160025976e57.jpg

一度画面に表示させて確認しておきましょう。レベルブループリントを開いて、いつも通り以下のUIを表示させるブループリントを作ります。BeginPlayから「create widget」と検索してウィジェット作成ノードを追加、Classには作成したウィジェットブループリント「WBP_Player」を選択します。最後にAddtoViewportノードを追加します。

https://scrapbox.io/files/65cb34f15a109e0025345107.jpg

ではここからが本題です。

②IsVariableでブループリントからUIを変更してみよう|実践

Textを選択した状態で詳細の一番上にあるIsVariableにチェックを入れます。

https://scrapbox.io/files/65cb3d5a4daa1b0023cb94d5.jpg

IsVariableにチェックを入れるとこのTextウィジェットが"変数化"されます。どういう事か見ていきましょう。

グラフを開きます。

https://scrapbox.io/files/65cb3d68d5d8420026e1b254.jpg

すると変数の項目にTextBlock~(数字の部分はランダムです)という変数が追加されているのがわかります。これがIsVariableによるTextウィジェットの変数になります。

https://scrapbox.io/files/65cb3dd1619b630025907013.jpg

🐱このTextウィジェット情報が格納された変数を元に、テキスト内容などを変更する事が可能です。

一旦変数からTextBlockをgetで追加します。

https://scrapbox.io/files/65cb3dddbb092e0024e142bc.jpg

TextBlockの変数とは？

このTextBlockの変数はTextウィジェットを示しています。

https://scrapbox.io/files/65cb3df8d00d720024403fbf.jpg

TextBlockからSetText(Text)ノードを追加します。

https://scrapbox.io/files/65cb3e05280c120025ccdd52.gif

なおSetText(Text)ノードに似たSetTextノードもあるので注意してください。使用するのはSetText(Text)ノードです。

SetText(Text)ノードとは？

SetText(Text)ノードはターゲットに接続したウィジェットのテキスト内容を変更するノードです。

https://scrapbox.io/files/65cb3e2ced7f630025db6460.jpg

Countという変数を作成します。

https://scrapbox.io/files/65cb3e45de7ef800253e4dda.jpg

SetText(Text)ノードに新たにノードを繋げて以下のようにします。CountからIncreamentIntノードで+1してセットしてそれをSetTextに渡します。

https://scrapbox.io/files/65cb3e4e09faf40024673eb8.jpg

プレイしてFキーを入力するとカウントが増えていく事が確認できます。

https://scrapbox.io/files/65cb3308556d2b0025555850.gif

こんな感じにisVariableにチェックを入れると変数としてブループリントからアクセスして、UIを変更する事ができます。

🐱ではノードを解説していきます。

作成したノード解説

順に解説していきます。

IsVariableにチェックを入れてTextウィジェットを変数化しました。

https://scrapbox.io/files/65cb3e74fc98b700245f0a5e.jpg

グラフを確認するとTextBlock~みたいな名前で変数が作成されている事が確認できます。この変数の中身にはTextウィジェットのデータが格納されている形になります。

https://scrapbox.io/files/65cb3e7eb8a18c0024156365.jpg

後はTextウィジェットの変数を元にSetTextなどのノードを使用してテキスト内容などを変更できます。

https://scrapbox.io/files/65cb3e89b7a789002540fc10.jpg

他にもテキストの色を変えるノードなどがあります↓

https://scrapbox.io/files/65cb3ebe06bce5002481f314.jpg

テキストの色が変更します↓

https://scrapbox.io/files/65cb3ece14f4730024d64a3c.gif

こんな感じにIsVariableで変数化し、変数と組み合わせて使用していきます。

バインディングとIsVariableの実装した違いは？

これら二つの違いはバインディングは毎フレーム処理されるのに対して、IsVariableで実装する方法はノードで呼ばれたタイミングでしか実行されません。なので今回のIsVarableで実装した場合だとFキーを押したタイミングしか処理されません。つまり処理が走る回数が圧倒的にIsVarableの方が少なく、負担が少なくなります。なので基本的にバイディングはできるだけ使用せずに、IsVariableを使用して動的にUIを変更しましょう。

ブループリントの処理が重くなるケースについてちょっと紹介

ブループリントにおいて重くなるケースは簡単にまとめると以下の2点です。

①毎フレーム実行する処理を使用している場合 (例えばTickEvent,バインディングなど)

②処理(ノード)自体が重い場合 (例えばアクタを生成する処理)

できるだけこれらは使用しない様に意識する事が大事ですが、使わなければならない状況もあるので使っていけないという訳ではありません。なので可能限り毎フレーム処理しない工夫と、他に方法がないか探してみてみましょう。ただしゲーム開発を始めたばかりの内はパフォーマンスなんて気にしなくて良いです。パフォーマンス改善は上級者向けなので初心者の方はまずは「実装する事」にフォーカスを当ててゲーム開発していきましょう。そこで重くなったら重くなった時に対処すれば良いだけですしね。

😺今回は以上になります。次回から実践としてIsVariableを使用して、実際のゲームっぽい機能を作っていきたいと思います!お疲れ様でした。