【前】
UE4_UIのラーニング~その1 表示~
今回はボタンを用意してみます。
まずWBPを用意します。
ボタンなので「 WBP_Btn 」という名前にしました。
これは子になります。
(親のwidgetに配置するやつ)
中身は下記のようにしてみましょう。
使用するパレットは3つです。
Canvas Panel(CP_Btn) →CP自体になにかを表示させる機能はないが、 他のものを子として収納できる。
Button(Btn) →ボタン用。 押したときのイベントが用意されている。 追々使う。
Text(Txt) →テキストを配置できる。
右の詳細を参考にしてみてください。
※Textの設定のみ注意※
このままだとButtonより上にテキストがあるため
テキストに当たり判定があり
Buttonが押しにくいです。
Visibilityを「 Not Hit-Testable(Self Only) 」 … 当たり判定のない表示。自分のみ。
に設定しておきましょう。
次にボタンを押したときの設定をします。
Buttonを選択し
詳細の下の方のイベントを見てみましょう。
ここにはボタンに何かが起きた時
呼び出されるイベントがそろってます。
On Clickedの横の
＋ボタンを押しましょう。
グラフに強制移動させられ、
イベントが追加されています。
これがボタンを押したときに
通知がくるイベントになります。
ただ、このままだと
他のwidgetには押されたことが通知されません。
(ボタンを押したらウィンドウが出る！
などができない！大変！)
なので、他に知らせるため
イベントディスパッチャーという機能を使います。
左側マイブループリントの
イベントディスパッチャーの横の
＋ボタンを押して追加しましょう。
(名前は適当で)
作ったイベントディスパッチャーを
ドラッグアンドドロップして「 呼び出し 」を押して
On Clickedに繋ぎましょう。
これで他widgetに通知ができるようになりました！
早速親widgetに配置しましょう。
前回用意した「 WBP_UI 」を開きます。
パレットから上記でつくったWBPを検索し
階層にドラッグアンドドロップしましょう。
位置は右側の詳細の数値を参照してみてください。
次に右上のグラフを押してみましょう。
グラフではノードなどを使って
動きなどを設定できます。
画面左のマイブループリントの変数に
デザイナーで用意したもの
先ほどのボタンが表示されています。
それをドラッグアンドドロップで
イベントグラフに配置しましょう。
「 WBP_Btn 」から線を伸ばして
バインドと検索しましょう。
ボタンのイベントディスパッチャーで用意したものを選択。
あとは下記のように繋いでいきます。
イベント Pre Construct →一番最初に一回だけ呼ばれるイベント。 設定などをここに繋ぐとよい。
カスタムイベント(CE_Btn_Clicked) →自分で作れるイベント。 今回はボタンが押されると通知が来る。 押されたときの挙動は カスタムイベントの▶から伸ばしてつなげよう。
これで通知が来るようになりました！
が、このままでは
通知はきても何も変わらないです…
そこで、今回はボタンを押したら
前回作ったテキスト(UIラーニング)が消えるようにしてみます。
まずは準備
右上のデザイナーに戻り
左の方の階層に配置してある
「 Text 」を選択し詳細の
Is Variableにチェックを入れましょう。 (これにチェックを入れないと
グラフに表示されません)
またグラフに戻ると、
左側、マイブループリントの変数から
「 Text Block ○○ 」をドラッグアンドドロップし
下記のように繋げます。
Set Visibility →表示非表示を設定できます。 ・Visible … 当たり判定がある表示。 ・Collapsed … 完全な非表示、消える。場所をとらない。 ・Hidden … 非表示。場所をとる、透明になるだけ。 ・Not Hit-Testable(Self & All Children) … 当たり判定のない表示。自分と子も適用。 ・Not Hit-Testable(Self Only) … 当たり判定のない表示。自分のみ。
設定ができたらプレイを押してみましょう！
ボタンを押したとき
上の「UIラーニング」が消えれば成功です。
【次】
UE4_UIのラーニング~その3 ウィンドウ~
Comments