【前】
UE4_UIのラーニング~その2 ボタン~
今回はウィンドウを用意してみます。
前回作ったボタンを押したら
アニメーションしてウィンドウが出てくる…！
みたいなのを作ります。
まずWBPを用意します。
ウィンドウなので「 WBP_Window 」という名前にしました。
これも子になります。
(親のwidgetに配置するやつ)
中身は下記のようにしてみましょう。
新規で使用するパレットは2つです。
Image(Im_Bg) →画像を配置できる。
Vertical Box(VB) →子にいれたものを縦に整列してくれる。
WBP_Btn(前回作ったボタン)
右の詳細を参考にしてみてください。
次にアニメーションを用意します。
アニメーションの欄の
「 ＋アニメーション 」を押すと
すぐ下にアニメーションが追加されます。
今回はアニメーションで不透明度をいじりたいと思います。
上記のアニメーションを選択しながら
親の「 CP_Window 」を選択し
タイムラインの「 ＋トラック 」を押します。
するとタイムラインに「 CP_Window 」が追加されるので、
その後Render Opacityの隣の＋を押します。
タイムラインに追加されたので
アニメーションを設定しましょう。
最初が0、次が1になるようにします。
アニメーションを設定した後は
「 Anim 」の選択を外してから
「 CP_Window 」を選択し
Render Opacityを0にしておきましょう。
(ボタンを押したら表示されるようにしたいため
初期を非表示にする必要がある)
次はグラフをいじります。
カスタムイベントを用意します。
これは前回親のwidget「 WBP_UI 」の
カスタムイベント「 CE_Btn_Clicked 」の先につなげる用です。
Play Animation →アニメーションを再生するノード。 マイブループリントの変数から 作成したアニメーションをドラッグアンドドロップし In Animationに繋げましょう。
次にボタンの設定をします。
前回と同じ要領で繋いだら
アニメーション再生のノードを繋ぎます。
Play ModeをReverse(アニメーション逆再生)にすることにより
ウィンドウ内のボタンを押すと
ウィンドウが消えるようになります！
これでウィンドウのwidgetの設定は完了です。
次に親widgetの「 WBP_UI 」を開きます。
上記で作ったウィンドウを
パレットで検索し配置します。
グラフに移ります。
前回作成した
「 CE_Btn_Clicked 」の先に
マイブループリントの変数の
「 WBP_Window 」をドラッグアンドドロップし
上の方で作ったカスタムイベントを呼びだしたものを
つなげれば完成！
動画のようになっていれば問題ないです。
【次】
UE4_UIのラーニング~その4 変数~
コメント