Top > デザイン > UE4 > 単品 - ボタンを押して指定されたウィンドウを開く

最終更新日 2019/06/08

単品 - ボタンを押して指定されたウィンドウを開く Edit

UIといえば代表格なのがこの形。
これが出来ればちょっとしたゲームは作れそうな気持ちになる、ということでテクスチャも雰囲気が出るものにしてみた。

今回はマウスではなくキーボードの上下左右・Enterで操作できるようにしたい。

UE4008001.jpg

フォーカス時のラインを表示させる Edit

UE4008003.jpg

UE4には実行時フォーカスされているものに破線の枠がつく設定がある。
試行錯誤しながらノードを組んでいると、設定したカーソル位置と実際処理されているカーソル位置が違うなんてことはよくある為、
わかりやすいよう「Always」設定にしておくと良いかもしれない。
ウィジェットブループリントの右下にある歯車をクリックし、検索にfocusといれると見つけやすい。

ためしていないのでわからないが、この破線枠はそのままゲーム画面に出そうな予感がするのでリリース前に設定を直さないと、どえらいデザインとして世に出回る可能性があるかも?

上のWidgetブループリント:(M01_WinSet)デザイナー Edit

UE4008002.jpg

階層はこんな感じ。

後ろのウィンドウフレームが「Grid Panel_Frme」で、そこに出るコンテンツは「WidgetSwitcher_Contents」内にある「M01_WinContents01〜05」という5つのウィジェット。
コンテンツウィジェットは同じ場所で切り替わるので「WidgetSwitcher」を使用した。
ウィンドウフレームとコンテンツを分けてあるのは、今後開閉アニメーションのクオリティアップを行う日が来るかもしれないから。
(時間があればウィンドウとコンテンツの透過タイミングをずらしたい・・・)

「M01_WinBtn_01〜05」のボタンウィジェットに関してはフォーカスをあわせたいので詳細ウィンドウの「Is focusable」にチェックをいれておく。

階層の名前の両横にカッコがついていないものに関しては変数として扱いたい為、詳細ウィンドウの「Is Variable」にチェックをいれておく。

ボタン側のWidgetブループリント:(M01_WinBtn)イベントグラフ Edit

UE4008004.jpg

「テキスト設定」はウィジェット上にテキストの入力を出すノード設定。
派生ボタンを5つ並べている形なので、ユニークな設定はボタンのウィジェット上に出し、設定する必要がある。

フォーカス管理で、フォーカスされたボタンのアニメーションを設定。
マウスでいう「Hover」状態等をここで設定している。

On Added to Focus Pathフォーカス時のイベント
On Removed from Focus Pathフォーカスが外れた時のイベント

イベントノード直後にHoverアニメーションノードを繋がないのは、アニメーション終了前にカーソルを上下させた時の挙動がおかしくなる為。
フォーカスが移動した際はその前のアニメーションを止めるため「Stop All Animation」ノードを挟んでいる。

ボタン側のWidgetブループリント:(M01_WinBtn)関数 OnkeyDown Edit

UE4008006.jpg

UE4のUMGはマウス関係の操作に関しては丁寧に用意してあるのに、キーボードやコントローラーの操作となると途端に投げやりなわけで、決定に使用する「Enter」キーの操作のノードを組まなければならない。

中途半端にサポートされていて「キーボードのボタンのどれかが押されたよ」という関数は用意されている。
なので関数の「オーバーライド」から「On Key Down」を選択する。
「キーボードのボタンのどれかが押されたよ」→「Enterというキーが押されたよ」にランクアップさせたいので、足りないノードを足していく。

「Get Key」で「Enter」を設定し、仮にEnterが押されたらTrueをブランチに送るようノードを組む。

Trueだった場合「イベントディスパッチャー」を新規で作成しノードに組みこむ。
これによりEnterキーが押された際のイベント挙動をボタンウィジェットの上に出すことができる。
ここらへんのイベントは上のウィジェットで組むので、ここでは放置する。

最後のリターンノードと、そこに接続されているHandledノードに関してはよくわからない(!)。
なくても動く。

上のWidgetブループリント:(M01_WinSet)イベントグラフ Edit

UE4008007.jpg

うわぁめんどくさ!となるが、コピペが多いだけ。
ボタンが増えた場合、ボタンウィジェットでイベントディスパッチャーに設定したBtnEnterにノード一列コピってくっつけ、セットに番号をいれるだけでOK。
ボタンは沢山あるけれど、ほとんどを工事中の同じページに飛ばしたい的な場合はセットの番号を該当するウィジェットIndex番号に変更するだけで出来る。

「初期フォーカス設定」は画面を開いて一番最初にカーソルをあわせるボタンを設定している。
「Set Keyboard Focus」で設定したあとはボタンウィジェットの「フォーカス」アニメーションを流したいため「Cast To〜」ノードでアニメーションを取り出して、設定している。

UE4008008.jpg

画像のこのノード、「Get Child At」で「Vertical Box Btn」に入っているウィジェットのIndexナンバーを指定することができる。
該当するボタンウィジェット直指定でも良いのだが、仕様の変更が起きた場合こちらも修正しなくてはならない事態が発生するため、自動で出来るものは自動化してしまう。
そのために便利なのがIndex番号での指定、0番は一番上のボタンウィジェットが常に該当するため安全度が高い。

Switcherでもそうだが、Index番号は「0」始まりなので1番を指定すると上から2番目のボタンが指定されてしまい「何かズレたぞ」問題がおきる。
それを解消するため、わかりやすいようボタンの数え法則に即した「1」を指定させ、後ろでこっそり「-1」しても良いが、ここの0番はほぼ不動なのでこのままいくことにする。

UE4008009.jpg

ボタンの各ノードは開くウィンドウの数値を入力することから始まる。
押されたボタンの番号がとれなかった・・・(!)という力不足なことも関係しているが、
押されたボタンと開くウィンドウは必ずしも一対ではない場合がある為、ここはボタンの数だけ人間が設定すべきと判断。

セットで入れるIndex番号は人間が入れるのでわかりやすいよう「1」始まりに調整。後ろでこっそり「-1」することによりSwitcherからとれるIndex番号とあわせている。
設定した番号は即効で「Index Num」という変数にいれる。
この「Index Num」の数値と、後で説明する関数ノードに出てくる「Index Num After」という前回開いたウィンドウの数値が入っている変数を比較し、同じではない場合はTrueへ進ませる。
これはすでに開いているウィンドウのボタンを連打した場合でも、同じウィンドウが何度も開きなおさないようにするための処置。
ちなみに1のボタンのウィンドウは既に開いているため「Index Num After」変数のデフォルト値は「0」に設定しておく必要がある。
Trueへ進んだ場合は「Win Out」というウィンドウが閉じるアニメーションが流れる。

押されたボタンにも「Click」アニメーションを流したいので、アニメーションノードを最後尾につけたいところだが、
ボタンウィジェットから取り出したりとごちゃつくので関数化してある(後述)。

上のWidgetブループリント:(M01_WinSet)関数 Anim_Out_Finish Edit

開いているウィンドウが一旦閉じ、完全になくなったところで別のコンテンツに差し替え再び開く流れを作る。
まずは「Win_Out」アニメーションの終了タイミングをとりたいが、これが中々面倒なのでいつもと違う方法で関数を作る。

UE4008010.jpg

ということで作ったのがアニメーションの「イベントフラグ」から作られた「Anim_Out_Finish」という関数。

UE4008011.jpg

いつも通りグラフの新規作成から作り、後でフラグにアサインする方法もあるが、今回はデザイナー側から作成してみる。
「+トラック」の中から「イベントトラック」を選択。
今回はWin_Outアニメーションの終了時をとりたいのでキーを打つ。
途端イベントグラフに飛ばされビビる。
これで「Win_Out」のフラグまで再生されると自動的に指定した関数が処理されることになる。

「Index Num」は今回開くウィンドウのIndex番号がはいった変数。
「Set Active Widget Index」はSwitcherのウィジェット表示を切り替えるノード。
「Win_Out」アニメーションの終了が来て何も表示されない状態になった瞬間、次に開きたいウィンドウのIndex番号を「Set Active Widget Index」に渡しウィジェットを変更する。
その数値を「Index Num After」という変数を作って入れておき、「Win_In」のアニメーションを流しウィンドウを開く。
「Index Num After」という変数は「M01_WinSet」で出てきたノードで「前回開いていたウィンドウかどうか」をチェックするために使用されることになる。

上のWidgetブループリント:(M01_WinSet)関数 Anim_Click Edit

UE4008012.jpg

クリックしたときのアニメーションをボタンウィジェットから取り出し流す設定。

これで完成。

しかし、キー入力に対してInput制限がオブジェクトに対してできないので素早くEnterを連打するとウィンドウが何度も開いてしまうのであった。(研究中)


添付ファイル: fileUE4008009.jpg 22件 [詳細] fileUE4008012.jpg 16件 [詳細] fileUE4008011.jpg 23件 [詳細] fileUE4008010.jpg 23件 [詳細] fileUE4008008.jpg 24件 [詳細] fileUE4008007.jpg 27件 [詳細] fileUE4008004.jpg 22件 [詳細] fileUE4008006.jpg 25件 [詳細] fileUE4008003.jpg 29件 [詳細] fileUE4008002.jpg 18件 [詳細] fileUE4008001.jpg 29件 [詳細]

リロード   新規 編集 凍結 差分 添付 複製 名前変更   ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: 2019-06-09 (日) 02:12:20 (183d)