前回の続き
基本の土台としてはそれなりにカタチになったと思うので、スライダー以外のUIパーツを作ってみようと思います。
今回の仕様はキーボードのカーソルキーで操作する想定にしています。
スライダーがUIパーツとして登場する画面にありそうなやつを 3種 選んで作ってみようと思います。
Index
スピンボックス
あらかじめ決められたいくつかの選択肢が、順番に切り替えられるタイプ。コンシューマーゲームが登場したころからメジャーになった印象がありますが、今でもよく見かける定番の設定用UIです。コンパクトでレイアウトにやさしく作りやすい。選択肢がテキストラベルで示されるので分かりやすいのがメリットだけど、選択肢の全体が見えないので、全部を確認するために一通り見たくなるというのがデメリット。これについては、なるべくループさせないのが良さそう。数と内容にもよるけど、ループしたことがわからないことが多く行き過ぎても気づかないことが結構ある。さらに選択肢が増えることを想定するのであれば、知らせるのが難しいのでこのUIはお勧めできない。
今回作るものは、選択肢の数をコッソリ忍ばせています。
wb_Slider をDuplicate（複製）すると使いまわせるパーツもあるし、関数やイベントの改造程度で済むのと、BPインターフェイスの登録も済んでるのでラクチンです。というわけで複製前提で書いていきます。
wb_Spin と命名
Designer
パーツの構成は以下
こっそりと HorizontalBoxを置いています。中身は空っぽ。高さは 1px。
Is Variableを有効にします。
ヒエラルキーは以下
アニメーションはスライダー同様に用意します。
ただし、HorozontalBoxの中身は面積が小さいのもありますが、ちょっと作りがややこしい（動的に生成）ので、ズルしてHorizontalBox のBehaviorにある Render Opacity（透明度） で明暗を変化させています。
タイムラインのトラックにあるパーツをキャンバスおよびヒエラルキーから削除すると赤字になります。
グラフに置いていた場合はコンパイル時にエラーが出るので気づけますが、演出物やデコレーションパーツだった場合はコンパイルエラーが出ません。新しく同じ名前で作り直して同じプロパティ（設定項目）があれば、しれっと普通のカラーに戻ります。赤字のまま放置することができますが、復活しないのが分かった時点で削除してしまいましょう。
Graph
初期化関数 InitValue はちょっと大きくなります。
選択肢を テキスト型の配列 で受け取るようにします。選択肢の数を調べて変数にお取り置きします。
上の続きはこちら
右下の SetHighlightColor という関数はこうなっています。
フォーカス／アンフォーカスのカラーをきっちりセットするならここで行うとよさそうです。
値を更新する関数は以下
選択肢の数と同じだけループを回して、フォーカスしている番号と比較してカラーをスイッチ。
左右キーを押して内部の数値を切り替えるところで、範囲チェックしているマクロはこんな形にしました。
使ってる変数は以下
改造と追加は以上です。
組み込みは後述しますが、一足お先に動作の様子を貼っておきます。
レベル選択
これもコンパクトで段階やグレードの設定にむいてるタイプ。スライダーと原理的には同じで、段階が荒くざっくりと設定するときに使われる。表現としてはゲージと同じようなつくりでデザインの幅が広いのがうれしい。
今回 10段階で作成しています。0を含めているので 状態としては 11レベルあります。
さっそく中身を見てみましょう
アセット名は wb_Level と命名
Designer
パーツの構成は以下
テクスチャを用意します。サイズは変則で 36 x 48px
表示したい全体の幅を10分割して、圧縮とアライメント対策として 4の倍数になるよう調整しています。
このテクスチャをマテリアルでタイリングします。
マテリアルで描画することによって、ゲージとしての表現がすごくカンタンになります。
マテリアルを使わずにタイリングできますが、ゲージとして扱うにはそこそこ手数が必要なので、今回マテリアルで省力化しました。
UMG の Image WidgetはBrushのところで画像と同じようにマテリアルをセットすることができます。
ヒエラルキーは以下
Graph
マテリアルの中に干渉するために、Dynamic Material Instanceを作っておきます。
Promote to Variable（変数に昇格）すると手間が省けます。
値を更新する関数で利用します。
初期化の関数はスライダーと同じなのでそのままで。
範囲チェックのマクロはループなしです。
今回使った変数は以下
改造と追加は以上です。
組み込みは後述しますが、一足お先に動作の様子を貼っておきます。
チェックボックス
スピンボックスで代用が可能なのと、今回他のタイプに合わせてコンパクトに作ったので、選択肢が少ないのが残念ではある。On/Off や True/False みたいな対義語ではなく、2つ並べないと比較できないような選択肢で効果的だと思う。
チェックボックスな見た目だけど、複数選択できないのでラジオボタンと同じふるまいをします。そういえば 近頃は「ラジオボタン」ってどれくらい通用するんだろうか。
基本の仕組みがあれば、いろいろアレンジできるよという例として見てもらえれば。
アセット名は wb_Checkbox と命名
Designer
パーツの構成は以下
チェックボックスはテクスチャとマテリアルを使って見た目をスイッチします。
サイズは 128 x 64 px Grayscale
パーツの各サイズは
40 x 40 px
これをマテリアルで切り出します。
40 px 横に移動させると絵が変わります。2パターンしかないので、パラメータを 0 か 1に限定して扱うようにすると、 移動幅（この場合 40/128 = 0.3125）に掛け算することでスイッチとして機能するようになります。
ヒエラルキーは以下
Graph
マテリアルのパラメータをいじるために、Dynamic Material Instance を準備。
初期化の関数はこんな感じに
選択肢が 2択なので、Integer型だった変数 Value は Boolean型にタイプをチェンジして受け取り。
選択肢用のテキストラベルは数が固定なので、配列で受け取ってそのまま表示しに行きます。
値を更新する関数はこんな感じ。
マテリアルのパラメータをスイッチするだけの簡単なお仕事。
範囲チェックのマクロはループなしの場合
ループありの場合
ブールの値は、NOTノードを使うと否定されて反転することになるので、それを自身に代入することで トグルスイッチ として利用します。
今回使用した変数は以下
改造と追加は以上です
組み込みはこのすぐ後に続きますが、一足お先に動作の様子を貼っておきます。
組み込む
さてさていよいよ大詰め。先に作ったスライダー達と一緒に並べていきます。
前回作った wb_Settings を編集します。
Designer
はい、並べました。
ヒエラルキーはこうなりました
順番の入れ替えやら増えたり減ったりすることを思うと、このネーミングはよろしくないのですが、この後の配列に登録する場面では便利になるはず。
Graph
初期化のところで配列に追加します。
このグラフの後ろで、テキストラベル（表示名）と初期値をセットするのを追加します。テキストや数値、選択肢の量などは自由に変えてみてください。
以上で追加完了です。
カンタンですね。
あとはコンパイルして問題なく動作すれば完成。
動いてるのはツイッターに貼ります。
最後に
いかがでしたか？
設定画面としての完成は目指していないので、中途半端な終わり方かもしれないですね。ゲームのデータをどう反映し、またフィードバックするかはシステムを設計される方にお任せします。
ブループリントインターフェイスを使うと関数を共通化できて UIのパーツを派生させて制御するのが易しくなります。4年前の記事は一度できたものを修正するという構成だったので、今回は最初からBPインターフェイスを用意する流れに変えました。
UE5版でリライトのために読み直しましたが、昔の自分だけど知らない人の記事を読んでる感覚にもなって不思議な気分でした。
他の記事でもUE5版にして欲しいものがありましたら、コメント欄からどうぞ。
ぼちぼちの更新になりますが、できる限り対応していきたいと思います。
ではでは
今回はこの辺で
ステキなUIデザインライフを！
