67.バインディングとは？UIとブループリントと紐づけよう

ブループリントからUIを動的に変更する二つの方法について

上動画のようなUIをブループリントで動的に変更する方法は「バイディング」と「IsVariable」を利用する二つの方法があります。

このページではバインディングによる動的にUIを変更する方法について紹介して、次ページでIsVariableを使用した方法を紹介しておきます。ただし最初に言っておきますが、基本的におすすめする方法は後に紹介する「IsVariable」の方になります。

🐱ひとまずどちらの方法も知っておいた方が良いと思うので、「バイディング」と「IsVariable」を利用する二つの方法を学んでいきましょう。という訳でまずは「バイディング」による動的にUIを変更する方法を紹介していきます。

バインディング(バインド)とは？

バインドはウィジェットの詳細項目の横にある「バインド」から設定する事ができます。

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

ここでバインディングの設定をすると、プレイ中にUIのテキスト内容やHPバーを変更したり、死んだ時にゲームオーバーと表示させるなどブループリントからUIを動的(ゲームのプレイ中)に変更できるようになります。またバインディングとは英語で「紐づける,関連付ける」という意味を持ちます。

🐱では早速バインドでUIのテキストを動的に変更するという事をやっていきましょう。

今回実装する機能です↓

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

ゲームプレイ中にテキストを動的に変更する方法を実装していきます。

①まずはテキスト表示するUIを用意する|実践

今回はゲームプレイ中にFキーを押したらUIのテキストが変化するというものを作っていきます。

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

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

UIフォルダを作成して、その中にユーザーインターフェース > ウィジェットブループリントを作成します。名前はWBP_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には作成したウィジェットブループリント「UI」を選択します。最後にAddtoViewportノードを追加します。

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

プレイしたらテキストはそのまま「0」で表示されます。

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

②バインディングを行って動的に変更させる|実践

そしたらバインディングして動的にUIのテキストを変更させていきます。

Textウィジェットを選択した状態でTextのバインドから「バインディングを作成」をクリックします。

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

こんな感じにクリックします↓

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

これでブループリントからTextを変更するための関数が作成されました。

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

🐱バインディングを作成したテキスト内容などをブループリントから変更できるようになった訳です。

変数を追加していきます。CountTextという名前でText型の変数を作成します。

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

Getで作成した変数を追加します。

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

ではUIのイベントグラフを開きます。

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

CountIntというInteger型の変数を作成します。

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

ではノードを作成していきます。Fキー入力ノードを作成します(日本語または英語でF キーと検索)。「++」と検索してIncremenIntノードを作成、CountTextのセットノードを作成します。ToTextノードはただの変換ノードなので自動で作成されます。

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

これでFキーを入力した時にCountIntが+1されて、その値がCountTextにセットされます。CountTextはバインディングで作成した関数によって自動でUIのテキストに反映されます。

CountTextのデフォルト値を「0」にしておきます。

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

プレイしてFキーを押してみましょう。これでバイディングによってゲーム中にUIが変更されました。

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

🐱これでバインディングを使ってゲーム中にUIを動的に変更する事ができました。解説していきます。

作成したノード解説

まずTextウィジェットの入力内容となる「Text」の設定でバインディングを作成しました。そのためGetText_0という関数がUIのテキストを変更するといった感じになっています。

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

この関数のリターンノードによってUIのテキストに変更を反映しています。この関数はゲームプレイ中常に実行され続けます。なのでCountTextという変数を変更したらすぐにUI側に変更が適用されます。

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

そして以下のノードで数字のカウントを行ってCountTextを変更させています。

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

😺今回はゲームっぽい機能ではないですが例えばHPという変数を作成して、バインディングを作成すればHPの表示を今回のようなUIのテキストとして表示する事ができます。

バインディングについてちょっと解説

バインディングは様々なウィジェットの設定項目で設定する事ができます。

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

例えば動的にUIの色を変更したり、表示,非表示を切り替えたりなどが可能です。作成したバインディングは虫眼鏡マークから関数を表示する事もできます↓

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

ちょっと復習

復習ですが、ウィジェットブループリントは右上の「デザイナー」「グラフ」からUIの編集画面,ブループリントの編集画面切り替える事ができます。また関数を開く際にはマイブループリントウィンドウの関数の項目でダブルクリックすると開く事ができます。

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

バイディングは重め..対策方法について

バインディングは毎フレーム呼ばれて関数のRetrunValueに入力された値をチェックしにいき、UIに反映させています。つまり毎フレーム処理を行うので重めの処理となります。なので基本的にはバインディングの使用は最低限にしましょう。使っていけないという訳ではありません。

なので基本は「IsVariable」で実装する方法がおすすめ!

ではバインドを使わずにどうするのかと言うと次ページで紹介する「IsVariable」を使った方法でUIの動的な変更を行います。バインドと同じような感じでブループリントからUIの表示を変更する事ができます。基本的に使用するのはバインディングではなく次ページで紹介するものをおすすめします。またネット記事を見るとUnrealEngineのUIの動的な変更方法としてバインディングが紹介されている事が多いですが、以上の理由からバインディングは個人的には推奨しません。私自身はバインディングは一切使ってないので次ページの「IsVariable」をおすすめします。