前回でリストを表示するとこまでできました。
今回はカーソルの移動と、表示範囲の移動を作っていきます。
カーソルの移動とキー入力
カーソルを動かすためには、「いまここ」というのが分かっていれば
次に移動する場所が計算できます。そのための変数をInteger型で作って Event Construct ノードのすぐあとにつなぎます。FocusIndex と命名。
つながなくても初期値はセットできますが、「Set」の状態で初めの方につないでおくことで、初期値が分かりやすくなるのでオススメです。
カーソルの移動範囲はリストアイテムの先頭から最後までです。
先頭は０で問題ないとして、最後はどうやって調べる？
数があらかじめ決まっているわけではないし。
配列に好きなだけテキストを入れる仕様なので、その自由度を尊重して、Length ノードを使います。そしてその値を保持しておく変数を用意します。
カーソル用の変数が用意できたところで、キー入力を受け取れるようにします。
ポイントは get Player Controller ノードです。そして Was Input Key Just Pressed ノードです。
Keyのところに操作したいデバイスのボタン等をセットします。上の図はキーボードのカーソルキー「↑」と「↓」です。ゲームパッドだと、D-Pad の UpとDown になります。ちなみに D-Pad の D は Directional のDなので、方向キーのことです。
ReturnValueピンが赤いので、ブーリアンで値が出てきます。True か False です。ということで Branchノードをつなぎます。さらに Event Tick ノードともつなぎます。
キーボードとゲームパッド両方で操作したい場合は、こちらの記事を参考にしてみてください。
それぞれのBranchノードから、変数 FocusIndex の値を プラスマイナスするようにつなぎます。
VerticalBox にアイテムを追加すると、上から下に向かって足されていきます。なので上方向にカーソルを進めるには、FocusIndexの値を減らせばいいわけです。
一旦増やしたり減らしてみて、範囲を越えてないかチェックします。無事範囲に収まっていれば次に進みますが、越えていれば何もしません。
越えていなければ、+1、-1した値を、FocusIndexに入れます。これで変数がカウントアップまたはダウンしたことになります。
この新しくなった値で、配列に入れてある『子』Widgetのリストアイテムの関数を呼び出します。フォーカス状態にする関数です。
CreateWidgetした際に配列に積んでいった『子』WidgetをGetで指定してフォーカス状態にします。
この辺でテストしてみましょう。
動くには動きましたが動かすたびにフォーカス状態になっていきます。
デフォルトに戻す処理を入れていないのです。
で、入れる場所は２か所。まだFocusIndexの値が更新される直前です。
ゴチャついてきたので、マクロを作って差し込むことにします。setFocus関数につないだのと同じような形です。
setListItemDefault という名前にしました。
これでテストしてみましょう。
いい感じです。
ですが、下に動かすと表示範囲の外に行ってしまいます。
表示範囲の移動
表示範囲を越えたのかどうかを調べて、越えていれば表示範囲を動かせばいいのですが、表示範囲を管理する変数が必要です。Integer型を３つ用意します。
これを最初の方に仕込みます。仕込む場所は ↓
カーソル位置をセットしている直後に仕込みます。見えている範囲はカーソルが一番上にある状態でスタートしたいからです。
カーソルの位置を基準に変数の初期値を決めてセットしています。
見えている数 ViewRange_Num は見た目に見えている数を初期値として持たせています。今回は 8個見えているので、
としています。
カーソルの初期位置と違って、最初から最後まで変動しないのと、デザイナの都合なのとで、特に明示しなくても誰も困らないので明示しなくていいかなと。
こういうのを「定数」とか言います。
ちなみにカーソルの初期位置については、UX的に利用する場合があるので、あえてSetノードを置いているのも理由としてはあります。カーソル位置を覚えておく場合とか。
変数の関係と使用イメージを図にしてみました。見えている数が５個の場合です。
この４つの変数（うち１つは定数）を使って表示範囲をコントロールします。
必要な変数が用意できたので、カーソルの表示範囲チェックの部分を作ります。
また差し込んでいきます。
カーソル位置 FocusIndex の値が更新された直後に判定します。
あともう一息。
表示範囲を動かす処理です。
同じような内容が上と下につながるのでマクロにします。ListScrollと命名しました。
スクロールする方向を指定するためのパラメータ（Integer型）を受け取れるようにしています。
ではマクロの中身はこうなっています。
ScrollStepというFloat型の変数を作って置いています。これはスクロール移動量で、リストアイテムの高さと同じ値が入っています。これも定数になります。
VerticalBoxのポジションをGetとSetしているとこで、見慣れない状態になっていると思います。これはピンを分解している状態です。
Split Struct Pin を選択するとFloat型に分解されるのです。Breakeノードを使わないのでスッキリです。
こういった分解できるものは他にもたくさんあるので、気になったら右クリックしてみるのをオススメします。
テストしてみましょう。
ようやくらしくなりました。
あとは、矢印の表示くらいですが、長くなったので今回はこの辺で。
