前の記事でインターフェイスを作りましたが、せっかくなのでスピンボックスも作ってみることにしました。
スライダー同様、ゲームの設定画面とかでよく見かけます。スピンボックスはGUIの１スタイルでMicrosoft Developer Networkのドキュメントに簡単な説明があります → スピンボックス
▲と▼をクリックするたびに値が１段階変化します。数値を増減させるときに便利なのですが仕組みとしてテキストなどの文字列を入れて使われることもあります。数値のみの場合は明確に区別するために、 Numeric Stepper と呼ぶこともあるようです。
テキストの場合は、序列や段階を意図した言葉選びが重要です。したがって、このUIのメリットは 選択中の状態が分かりやすい ことと、その前後の内容が予測しやすい ことにあります。なので、増減と関連性のない、前後の脈絡のないテキストを選択肢にすると、複数ある選択肢の全体が把握しづらいため一通り送って確認しないと選べないので時間がかかります。
ゲームクリア後や実績解除などで、後から選択肢を追加しても画面のレイアウトに影響がないので、開発者にとっては都合のいいUI だったりします。でも途中で内容が増えても気づかないので、Newマークを付けたり、お知らせ表示を入れたりと、開発側としては結局手間がかかることに・・・。用法容量を守り正しく活用したいものです。
このへんがデメリットとなって使いづらさにつながるので、段階や序列のないテキストを選択肢にする場合はコンボボックスやリストボックスがオススメです。もちろん表示に余裕があれば全部並べて選択させるのがベストです。ゲームのUIってほとんどが選択肢と言っても過言じゃありません。なんらかの選択をユーザーにさせてユーザーの意思を尊重しているかのようにふるまいつつ、都合の悪い選択肢なんて最初から無かったことに・・・うわやめろなにを・・・ゴフゥ・・・中断
げふげふ（さてさて）、
今回はスライダーなどと操作方法を統一するために ↑ ↓ キーで項目を選んで、←→キーで内容の切り替えを行うようにします。レイアウトはスライダーと同じように並べるので↓のようになります。
新しくWidgetを用意してもいいですが、スライダーWidgetと共通の部分が多いので複製します。
UMG
不要なパーツを消してテキストブロックに置き換えます。
テキストブロックは is Variable にチェックを付けるのを忘れないように。
Widgetブループリント
必要な変数を用意します。複数の選択肢を扱うので、その個数を保持する integer型の変数と、受け取った選択肢用の Text型の配列変数です。
値を受け取る初期設定用の関数 initValue は ↓ のように変更します。
値を見た目に反映する関数 updateValue の中身は受け取った配列の中身を取り出すだけなので、 ↓ のようになります。
配列のエラーチェックをする場合は IS VALID INDEX ノードが便利です。
値をアイテムの数だけでループするようにするので、rangeCheck マクロを編集します。
これでコンパイルしてエラーが出なければ完成。
制御用Widget
キャンバスにできたスピンボックスのWidgetを追加します。
初期化の関数に追加します。
選択肢用のアイテムはここで、Make Arrayノードで渡します。
アクティブなWidgetを切り替える関数にも追加します。Switch on Int ノードをAdd pinして割り込ませます。
以上です。メンバーが一つ追加になったのにこの簡単さ。これもインターフェイスのおかげです。
さっそく再生してみましょう。
これでどんなセッティング画面が来ても対応できそうな気がしてきました。
あと必要そうな処理としては、制御用Widgetに値を返すようにしたり、変更内容をリアルタイムに反映したいときのために イベントディスパッチャーを用意したりすれば完璧な予感。
なんかUIって、表のグラフィックデザインにスポットが当たりがちですが、実際はこういった地味な内部処理が頑張ってたりするんですよね～ とか呟いてみたり。
コンポーネントとして用意されているので、わざわざイチから起こさなくても・・・
という声が聞こえてきそうですが、やっぱり仕組みを知ることで、次の新しいUIが生まれてくる気がするんですよ。
今回インターフェイスは使い回したので説明はしてませんが、汎用的なやつが一つあれば結構いろんなUIパーツに適用できるのでおすすめです。
というわけで今回はこの辺で。ツッコミとかリクエストとかあればコメントください。
ではでは
ステキなBPインターフェイスライフを！
