続きです。
シンプルな作りですが、キャラセレ画面としてある程度必要と思われる内容まで用意できました。今回はキャラを選ぶにあたっての能力値をグラフで表現したものを作って追加します。
まずはテクスチャ。
40ｘ40 のグレースケールでアルファチャンネルは無しです。
今回のゲージはマテリアルを使わずに増減させます。が、テクスチャ容量を節約したいので、ちょっぴりマテリアルの助けを借ります。
テクスチャのフォーマットをグレースケールにしてしまうとテクスチャのメモリ消費量は 1/4 に減らせられるのですが、UMGで扱えません。そこで下図のようなマテリアルを用意します。
グレースケールなので、Rチャンネル（G、Bのピンでも結果は同じ）のピンをOpacityにつなぐことで、テクスチャをアルファチャンネルとして使えます。
TextureSampleノードの設定が変わります。
（テクスチャ設定の sRGB のチェックを外すとLinearGrayscale になります）
マテリアルができたら、次はグラフ用のWidgetブループリントを新しく作ります。
作ったマテリアルを張り付けるImageパーツをキャンバスに配置します。
このImageパーツにマテリアルをセットしたらヨコに伸ばして使うので設定をいじります。
ひとまず横の長さは400にします。
このパーツは下敷きにするので、適当に暗めのカラーにします。
このImageパーツを複製します。
複製したらカラーを明るくして上に重なるように移動して、さらにZOrderの数値を調整します。
ゲージ部分のパーツが完成です。次にテキストブロックを左横に配置します。
このテキストブロックはブループリントから内容を書き換えるので、 Is Variable にチェックを付けておきます。
さて、肝心のゲージが増減するしくみですが、アニメーションを使います。
新しくアニメーションを作成して、ゲージのサイズをアニメーションさせます。
キーフレームは１秒刻みで、0.0～9.0 にキーを打ちます。動かすのは Slot のSize。
→ 
1秒あたり 40ずつ サイズを大きくしていきます。
キーを打ち終えたら、
トラックのキーを全てConstantに変えます。マウスドラッグでアニメーションのキーを一気に選択したら、右クリックするとサブメニューが出てくるのでConstantを選択します。Constantはキーとキーの間を補間しません。
Sizeの値をキーセーブしてるのに、トラックには Offset と書かれるのはちょっと混乱しそうです。
アニメーションができたら、あとは、Widgetブループリントでコントロールします。
必要な関数は２つです。
名前をセットする関数
引数でテキストを受け取ってキャンバスに置いたテキストブロックにセットしてやります。
グラフの長さをセットする関数
引数でグラフの長さに対する値を受け取ってアニメーションのキーフレームに変換します。アニメーションの再生は Play Animation To を使います。
このノードは再生する場所を指定できます。↑の Volume はUMGで作ったアニメーションコンポーネントの名前です。
StartとEndの値が同じ場合、アニメーションは動き続けるので、再生したらすぐに止めます。
この、指定した時間で止めてグラフの長さを調整する方法は Flash でアニメーションを制作したことがある方は、すでにお馴染みの方法だろうと思いますがいかがでしょうか？
２つの関数ができたところで、このゲージアセットは完成です。
実装してみる
セレクト画面のメインWidgeを開いて、できたゲージのWidgetをキャンバスに並べます。今回は４つ。ちょっと大きめの枠線は親のキャンバスパネルです。
キャンバスパネルに子供として並べておくと、まとめて移動したり、表示のON・OFFが簡単にできるのでオススメです。キャンバスは親子構造にできるので便利ですが階層が深過ぎると処理負荷があがるのでほどほどに。
キャンバスに並べたら、扱いやすくするために配列にしてしまいます。
Initialize関数を編集します。
先に配列変数を用意しても問題ないですが、オススメの方法をご紹介します。
まずVariablesのリストに並んでいるWidgetを４つドロップします。→①
つぎに一番上のノードのピンからドラッグして Make Array ノードを取り出します。→ ②
Add pin でピンを増やし、ノードを４つ全部つないだら、Make ArrayノードのArrayピンの上で右クリックして Promote to Variable を選択します。 → ③
ゲージWidgetの型の配列変数ができあがります。
次にテキスト型の配列変数を用意します。
これは変数の型が Text なので、探すのが簡単です。配列変数にしたら、Setでグラフにドロップして、MakeArrayノードをつなぎます。テキストはゲージの横に表示する名前になります。
さっそくゲージに名前をセットしてしまいましょう。続きにForEachLoop ノードをつなぎます。（キーボードの［F］ を押しながらクリック）
下のようにつなぎます。
この状態で再生してみると、このようになります。
データテーブルを用意する
次に、キャラクターの能力値をまとめたデータテーブルを作ります。
まず先に用意するのはStructure。
コンテンツブラウザで、右クリック ＞ Blueprints ＞ Structure
開いて編集します。中の New Variable ボタンを押すと変数が追加できるので、Integer型の変数を４つ追加します。
Default Value（初期値）は０で構いません。
できたら保存して閉じます。
次に DataTable を用意します。これもコンテンツブラウザで
右クリック ＞ Miscellaneous ＞ Data Table
を選択。
Structureを選べと訊いてくるので、作ったStructureを選んでOKボタンを押します。
ダブルクリックして編集します。下のようなエディタが開くので下段のRowEditorタブにある ＋ ボタンをクリックします → ①
クリックしたらRow Name を変更します。 → ②
この名前はキャラクターのIndex番号になります。後でブループリントから扱うときに数字を使うので 0～7 の半角の数字にしておきます。
キャラクター全員のパラメータを入力できたら保存して閉じます。
再びメインのキャラセレWidgetに戻ります。
関数を一つ新しく追加します。
作ったデータテーブルを読み込んで必要なデータを取り出すために、
Get Data Table Row ノードを使います。
Data Tableの青いピンのところに用意しておいたData Table をセットします。
Row Name No薄い紫のピンには、Integer型の引数からString型を経由してつなぎます。
Integer型 → String型 → Name型
こういった型を変換することをキャストすると言います。私たち人間は「 １ 」という文字を見た時、「字」なのか「数」なのかを周辺の情報をもとに判断します。コンピュータはある意味単純なので型を指定してやらないと意図通りに処理してくれません。キャストにはルールがあってキャストできないものがあります。Int型（Integerは省略すると Int）は いきなりName型にできないので、いったんString型にします。
これで、RowNameに該当するデータの有無で右の処理が分岐します。青いピンからは見つかった場合にデータが取り出せます。
データを取り出したらBreake ノードで分解することができます。
Initialize関数で準備したゲージの配列変数をここで使います。Getノードで順番に取り出しながら、ゲージのWidgetに用意しておいた関数に値を渡してやります。
Return Node で戻り値（Success＝Boolean型）を設定しているのはデータが取り出せなかったときのエラー対策をとるための準備なので、べつに無くても問題ありません。
関数は出来上がりです。
これをEventGraphにつなぎます。場所は2か所。
最初のカーソル位置とサムネイルにフォーカスをセットする部分と、キー入力を受け付けてフォーカスを切り替える部分です。
出来上がりです。
いかがでしたか？
結構なボリュームになりましたが、だいたいの構造と必要な処理が理解できれば、絵素材の制作を除くと１時間もあれば作れるようになります。今回のオマケ部分はいろんな作り方があるので時間の掛かり方はアイデア次第になりますが、ぜひイロイロ凝ったものを試してみたいですね。
今回の作ってみるシリーズはあまり集中して書く時間が取れなかったので、間があいてしまったのが残念です。前半に比べ後半は細かい説明は省略してますので、記事の内容で分からないとこや間違いの指摘等あれば、お気軽にコメントください。
ではでは
ステキなキャラセレライフを！
追記：
今回のエントリー扱っている絵素材については、いらすとやさんの素材を使わせてもらいました。使用するにあたって事前にやり取りはしておりませんので問題あれば記事を削除いたします。
