【前】
UE4_UIのラーニング~その3 ウィンドウ~
ここまでやった人は
もしかしてこう思ってるのではないでしょうか？
「ウィンドウのテキスト変えたい！」
「ボタンの文字変更できないの？」
そうでしょう！そうでしょう！
では今回はテキスト変更の方法…
をちょっと凝ってデザイナーで直接文字指定ではなく、
別の場所(親WBP)から送られてくる情報を受け取り
反映させるやり方を説明したいと思います。
まず、ボタンから… 「 WBP_Btn 」を開きます。
グラフで編集するために「 Txt 」を選択し詳細の
Is Variableにチェックを入れましょう。
グラフに移動し、
変数に上記が追加されていることが確認できたら
ドラッグアンドドロップして追加します。
次にカスタムイベントなど
下記のように繋いでいきます。
Set Text →Textを設定できるノード。 In Text内に設定したテキストを ターゲットに繋いだ先に反映できます。
直接In Textに文字を入れてもテキストは変わりますが
今回は最初に書いた通り親WBPで文字を変更します。
カスタムイベントを選択し詳細を見ましょう。
インプットの横「 ＋新規パラメータ 」を押します。
そうするとカスタムイベントの下に
なにかが追加されます。
これは引数といいます。
内容は下記に合わせて変更して
In Textに繋いでください。
これで「 WBP_Btn 」の設定は完了です。
次に親WBP(WBP_UI)を開きます。
グラフを開いて下記のように繋げてください。
(イベント Pre Constructの先に繋ぎます)
これでボタンの文字変更が
親WBPでできるようになりました！
次にウィンドウの文字を変更してみましょう。
今回はボタンを押したら
開いたウィンドウの文字が変更している…
という感じにします！
まず前準備。
ボタンと同様に「 WBP_Window 」を開き、
グラフで編集するために「 Txt_Title 」「 Txt_Txt 」を選択し詳細の
Is Variableにチェックを入れましょう。
グラフを開き
カスタムイベントを用意し、
インプットに引数を＋して
下記のように繋いでみましょう。
(線をダブルクリックすると○がでて
線を整理しやすくなります)
これで準備は完了です！
次に親WBP(WBP_UI)のグラフを開きます。
早速ノードを繋げるその前に
ちょっとだけ準備をします。
変数の横「 ＋変数 」を押し
変数を追加しましょう。
この変数というのは収納箱的なもので
設定したものを保存しておいてくれる優れものです。
今回は配列(後で説明)から
とってくるものを指定するために使います。
早速設定します。
変数の型をIntegerに設定します。
収納箱(変数)は便利なものですが
収納できるものが型によって違います。
整数ならInteger
文字ならText
などなど、
状況に合わせて変えていきます。
また、一番下のデフォルト値が
0になっていることを確認しましょう。
ボタンを押した先のカスタムイベント
「 CE_Btn_Clicked 」の先に下記のように繋ぎます。
まずテキストの設定。
テキストが変更するタイミングを
アニメーションさせる前に変更させたいので
(切り替えを見せないように)
「 CE_Window_In 」のまえに設定を割り込ませます。
変数から「 WBP_Window 」を
ドラッグアンドドロップして
カスタムイベント「 CE_Window_Text 」を呼びます。
呼び出したカスタムイベントから
線を伸ばし配列と検索し「 (参照)を取得 」を選択します。
そうすると「 GET 」と書かれたノードが現れます。
「 GET 」の左側、上の四角から線を伸ばし
再度配列と検索し「 配列を作成 」を用意します。
(ピンを追加で左側の列を増やせます)
配列 →収納箱の大きい版。 複数の情報を収納できます。 順番は0から始まる。
GET →左下の丸いピンに整数(Integer)を入れることにより 配列からその番号の情報を取り出すことができる。 今回は「 ClickedNum 」を繋ぎましょう。
次に変数の設定について説明します。
一番上のセットというのは
ClickedNumという収納箱に数字を設定するためのノードです。
ここに通知が来たときに
前回の「 ClickedNum 」+1になるようにしています。
具体的な流れは下記のような感じ。
ボタンを押す →配列から「 ClickedNum(デフォルト値0) 」を取り出しテキストを反映 →変数に＋1する、「 ClickedNum(1) 」になる →ウィンドウが表示される →ボタンを押す →配列から「 ClickedNum(1) 」を取り出しテキストを反映 →変数に＋1する、「 ClickedNum(2) 」になる →ウィンドウが表示される → …
これでボタンを押したら
テキストが変更されて表示される仕組みは完成です！
が！！！！！！！！！！！！！！！！！！！！！
ちょっと待って！
実は配列に関してとっても重要なことがあります！
なんと配列の中に入っている番号以外の数字がくると
クラッシュしてしまいます！
つまり
ボタンを押すたび＋1される上記の仕組みは
たくさんボタンを押すと99とか無限に増えていくになる。
＝配列以上の数字が「 GET 」に流れる。 ＝クラッシュしてしまう！！！！！！！！！！！
なので下記の
配列にある最後の数字と同じになったら
「 ClickedNum 」をリセット(0にする)仕組みを作ります。
白くなっているところが変更点です。
(コメントを残せるもので
ノードを選択し「 C 」を押すと出てきます)
ブランチ →下の赤いピンによって 通知を送る先を変えてくれるノード。 TrueかFalseで分岐。
== →左側に繋いだノードが同じもの(今回は同じ数字) だった場合Trueを右から出してくれます。 それ以外はFalseを流す。
LAST INDEX →配列の順番の最後の数字を教えてくれる。 ※※※※数ではないので注意※※※※ ※下記のように配列に3つ入っていても※ ※最後の数字なので2がきます※
これでやっと完成です！
動画のようになっていれば問題ないです。
(追記)
下記の3点を修正しました。
ノードって難しい…！
変数の計算を先にし、 配列より大きい数にならないための処理を後に。 (ほかの人が見たときに見やすくするため)
万が一同数以上の数字がきてしまった場合を想定し、 「 ＝＝ 」ではなく「 ＞ 」を使用。 (上に繋いだ数字 ＞ 下に繋いだ数字の時Trueを右から出す)
変数の名前を変更。 (ClickedNumはクリック数という意味で名前を付けたけど 配列分でリセットしちゃうのでわかりやすいのに変更)
Comments