読者です 読者をやめる 読者になる 読者になる

みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

Widgetでメニューを作ってみる 2

UE4 Widget UMG UI

前回の続き

Widgetを作る際に、配列に積んでいきます。そうするとインデックス番号で管理できるので、扱いがラクになります。

f:id:hiyokosabrey:20151227110205p:plain

ForeachLoopが、子Widget作って並べ終えたらCompleteピンに流れます。

そのタイミングで、子Widgetの一つを Getノードを使って指定したら、選択状態にする関数を呼んでやります。

f:id:hiyokosabrey:20151227110155p:plain

Getノードの数字を変えてみると 見た目に切り替わるのが分かると思います。

 

これを変数を使って切り替えられるようにしていきます。

用意する変数は2つ。

f:id:hiyokosabrey:20151227130146p:plain

 今現在の位置を保持する IndexCurrent。

次の位置を持つ IndexFocus。

でこの2つの変数を使って、カーソルを切り替える関数を作ります。

f:id:hiyokosabrey:20151227130613p:plain

流れは、

現在のカーソル位置(IndexCurrent)をDEFAULT状態に戻し、次のカーソル位置(IndexFocus)をSELECT状態にします。

最後に、現在位置(IndexCurrent)をカーソル位置(IndexFocus)と同じ値にして終了。

 

次に、IndexFocusの値を増やしたり減らしたりする関数を用意します。

まずはIncrement関数 これで増やします。

f:id:hiyokosabrey:20151227131417p:plain

増やしたら、最後に先に作っておいたカーソルを切り替える関数につないでおきます。

ただ増やすだけならいいのですが、このままだと無限に増えていってしまうので、最大まで足したら0に戻すようにします。

 オレンジの囲み線でハイライトしたのが追加したノード。

f:id:hiyokosabrey:20151227132035p:plain

MaxIndexNum という変数を用意しました。4という数値を入れてあります。

今回メニューの数が5個固定だけど将来的に増えたリ減ったりすることがよくあるので、変数にしておくと後でラクができます。

 いったん +1 してみて、最大値を越えてなければ値を更新、越えていれば0にします。

次にIndexFocusを減らす Decrement関数を用意します。

f:id:hiyokosabrey:20151227184733p:plain

 増やす方の関数とほとんど同じような形です。

いったん -1してみて0以上の値なら更新、0未満なら最大値にします。

減らすために引き算のノードを使っていないのは、パッと見でノードが区別しにくいのもあるけど、コピペできるとか・・・まぁいろいろ便利なので。

 

どちらも最後にカーソル切り替え関数に処理を回してます。

 

さぁいよいよ操作とつなぎます。

レベルブループリントで、親Widgetを表示させているのでそこにInputノードを追加します。

f:id:hiyokosabrey:20151227192833p:plain

Event の Tick を使うなら、前々回の記事に倣って、

f:id:hiyokosabrey:20151227194023p:plain

 完成!

 

 

f:id:hiyokosabrey:20151227194635p:plain

f:id:hiyokosabrey:20151227194642p:plain