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

みつまめ杏仁

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

UMGでリストボックスを作ってみる 《続き》

UE4 UI UMG Widget

 前回でリストを表示するとこまでできました。

limesode.hatenablog.com

 今回はカーソルの移動と、表示範囲の移動を作っていきます。

 

カーソルの移動とキー入力

カーソルを動かすためには、「いまここ」というのが分かっていれば

次に移動する場所が計算できます。そのための変数をInteger型で作って Event Construct ノードのすぐあとにつなぎます。FocusIndex と命名。

f:id:hiyokosabrey:20160912222408p:plain

つながなくても初期値はセットできますが、「Set」の状態で初めの方につないでおくことで、初期値が分かりやすくなるのでオススメです。

 

カーソルの移動範囲はリストアイテムの先頭から最後までです。

先頭は0で問題ないとして、最後はどうやって調べる?

数があらかじめ決まっているわけではないし。

配列に好きなだけテキストを入れる仕様なので、その自由度を尊重して、Length ノードを使います。そしてその値を保持しておく変数を用意します。

f:id:hiyokosabrey:20160912223510p:plain

 

カーソル用の変数が用意できたところで、キー入力を受け取れるようにします。

ポイントは get Player Controller ノードです。そして Was Input Key Just Pressed ノードです。

f:id:hiyokosabrey:20160912224154p:plain

Keyのところに操作したいデバイスのボタン等をセットします。上の図はキーボードのカーソルキー「↑」と「↓」です。ゲームパッドだと、D-Pad の UpとDown になります。ちなみに D-Pad の D は Directional のDなので、方向キーのことです。

ReturnValueピンが赤いので、ブーリアンで値が出てきます。True か False です。ということで Branchノードをつなぎます。さらに Event Tick ノードともつなぎます。

f:id:hiyokosabrey:20160912225102p:plain

 

キーボードとゲームパッド両方で操作したい場合は、こちらの記事を参考にしてみてください。

limesode.hatenablog.com

 それぞれのBranchノードから、変数 FocusIndex の値を プラスマイナスするようにつなぎます。

f:id:hiyokosabrey:20160912231612p:plain

VerticalBox にアイテムを追加すると、上から下に向かって足されていきます。なので上方向にカーソルを進めるには、FocusIndexの値を減らせばいいわけです。

f:id:hiyokosabrey:20160912232327p:plain

一旦増やしたり減らしてみて、範囲を越えてないかチェックします。無事範囲に収まっていれば次に進みますが、越えていれば何もしません。

越えていなければ、+1、-1した値を、FocusIndexに入れます。これで変数がカウントアップまたはダウンしたことになります。

f:id:hiyokosabrey:20160913003038p:plain

この新しくなった値で、配列に入れてある『子』Widgetのリストアイテムの関数を呼び出します。フォーカス状態にする関数です。

CreateWidgetした際に配列に積んでいった『子』WidgetをGetで指定してフォーカス状態にします。

 

この辺でテストしてみましょう。

f:id:hiyokosabrey:20160913003540p:plain

動くには動きましたが動かすたびにフォーカス状態になっていきます。

デフォルトに戻す処理を入れていないのです。

で、入れる場所は2か所。まだFocusIndexの値が更新される直前です。

f:id:hiyokosabrey:20160913003959p:plain

ゴチャついてきたので、マクロを作って差し込むことにします。setFocus関数につないだのと同じような形です。

f:id:hiyokosabrey:20160913004256p:plain

setListItemDefault という名前にしました。

f:id:hiyokosabrey:20160913004806p:plain

これでテストしてみましょう。

f:id:hiyokosabrey:20160913005000p:plain

いい感じです。

ですが、下に動かすと表示範囲の外に行ってしまいます。

 

 

表示範囲の移動

 表示範囲を越えたのかどうかを調べて、越えていれば表示範囲を動かせばいいのですが、表示範囲を管理する変数が必要です。Integer型を3つ用意します。

f:id:hiyokosabrey:20160913210845p:plain

 これを最初の方に仕込みます。仕込む場所は ↓

f:id:hiyokosabrey:20160913211211p:plain

カーソル位置をセットしている直後に仕込みます。見えている範囲はカーソルが一番上にある状態でスタートしたいからです。

f:id:hiyokosabrey:20160913211415p:plain

カーソルの位置を基準に変数の初期値を決めてセットしています。

見えている数 ViewRange_Num は見た目に見えている数を初期値として持たせています。今回は 8個見えているので、

f:id:hiyokosabrey:20160913211947p:plainとしています。

カーソルの初期位置と違って、最初から最後まで変動しないのと、デザイナの都合なのとで、特に明示しなくても誰も困らないので明示しなくていいかなと。

こういうのを「定数」とか言います。

ちなみにカーソルの初期位置については、UX的に利用する場合があるので、あえてSetノードを置いているのも理由としてはあります。カーソル位置を覚えておく場合とか。

 

変数の関係と使用イメージを図にしてみました。見えている数が5個の場合です。

f:id:hiyokosabrey:20160913220312p:plain

この4つの変数(うち1つは定数)を使って表示範囲をコントロールします。

 

 必要な変数が用意できたので、カーソルの表示範囲チェックの部分を作ります。

また差し込んでいきます。

f:id:hiyokosabrey:20160913062605p:plain

カーソル位置 FocusIndex の値が更新された直後に判定します。

f:id:hiyokosabrey:20160913222427p:plain

あともう一息。

表示範囲を動かす処理です。

同じような内容が上と下につながるのでマクロにします。ListScrollと命名しました。

f:id:hiyokosabrey:20160913223637p:plain

スクロールする方向を指定するためのパラメータ(Integer型)を受け取れるようにしています。

ではマクロの中身はこうなっています。

f:id:hiyokosabrey:20160913224601p:plain

ScrollStepというFloat型の変数を作って置いています。これはスクロール移動量で、リストアイテムの高さと同じ値が入っています。これも定数になります。

 

 VerticalBoxのポジションをGetとSetしているとこで、見慣れない状態になっていると思います。これはピンを分解している状態です。

f:id:hiyokosabrey:20160913225044p:plain

 Split Struct Pin を選択するとFloat型に分解されるのです。Breakeノードを使わないのでスッキリです。

こういった分解できるものは他にもたくさんあるので、気になったら右クリックしてみるのをオススメします。

 

テストしてみましょう。

 

f:id:hiyokosabrey:20160913225623p:plain

ようやくらしくなりました。

あとは、矢印の表示くらいですが、長くなったので今回はこの辺で。