前回のタブっぽい何かに、リストメニューっぽい何かを追加してみます。
背景のマテリアルにPARAGONのアセット使わせていただきました。
その前に前回のマテリアルで、大事な設定を見つけました。
UI 表示では フォグの影響を受ける必要はないので、Apply Fogging のチェックを外してみました。
すると、Intructions（命令）の数が減ったのです！
頂点シェーダの処理が約1/2、TextureSamplersの数も1/4になったので、これは効果アリですね。次回から確実に外していこう。
では、リストメニュー用のスタティックメッシュを用意します。
Blenderで↓のようなメッシュを作りました。
下にある黒っぽいのはドロップシャドウ用のメッシュです。２面のポリゴンで１つのオブジェクトになっていて、こうことができるのがスプライトにない強みですね。作るときは１枚だけ作って複製し、ずらして統合します。影のカラーを付けたいので頂点カラーを付けています。
ちなみに作業用のテクスチャは以下。等間隔に並べます。
この色分けはUV範囲を分かりやすくするためにレイヤーで色を載せています。この色分けに沿ってUVの頂点をきっちり当てます。
エンジンにインポートする際は、グレースケールにして、TGA形式にします。
メッシュはFBXでエクスポートします。流れは前回の記事と同じですが、頂点カラーを有効にする必要があります。まずは Import Settings でやる場合は、以下の場所にあります。
インポートした後に有効にすることもできます。その場合は StaticMeshエディターの右のDetailsタブの中にあります。
変更したら、Assetメニューから Remport（再読み込み）すれば反映されます。
テクスチャインポートしたら、マテリアルを作成します。
頂点カラーを使うには 専用のノードが用意されています。そのまま Emissive Color に渡してもいいのですが、ブループリントから色味をいじりたいので、MultiplyノードでVectorParameterノードを掛けています。
リストの文字は、UVの位置をずらしてバリエーションを出します。
今回移動するのは縦方向、Vの値だけが変化すればいいので、Uの値はそのままにします。
ちなみに Append は合成、Add は加算です。
A と B を Append すると、 （A, B） になって
A と B を Add すると、 A + B になります。
白いラインが全部一緒なので、慣れないと分かりにくいのですが、上の場合、
TexCoordから出てるのが、(U, V) の Flort2 または Vector2 とよばれる型。
左端の２つのノードは 単品のFloat型で、これを Append でくっつけて、
(0, OffsetV) にして、Add ノードで、（U, V） に加算しています。なので、
(0, 0.5) + (0, 0.25) だと (0, 0.75) になるのです。この単品の float が何本になってるかをノードの前後で把握することのが、マテリアル攻略の助けになります。
ちなみに下の例では、エラーにはなりませんが・・・
(0, 0) に対して 単品の float を足すので、OffsetV = 0.25 だとしたら、
(0.25, 0.25) になります。これではUVが斜めに移動することになります。
マテリアルができたので、次にマテリアルインスタンスを作ります。
マテリアルのアセットアイコンの上で右クリックしてコンテキストメニューから選択します。一番上にあります。
マテリアルインスタンスにすると、仕込んでおいたパラメータのみ触ることができるようになります。（チェックボックスにチェックを付ける必要があります）
文字を変更するのはUV値のVの方なので、パラメータ ”OffsetV” の値を変更します。
今回は48px ÷ 512px ＝ 0.09375 が間隔なので、パラメータは以下のようになります。
テクスチャに並べておいたテキスト分のマテリアルインスタンスを用意します。
いまのところコンテンツブラウザは以下のような状態。
等間隔に並んでいるので計算させた方がよさそうに見えますが、ゲーム開発においてメニュー項目なんてのは変更されるのが常です。さらにイベント用ROMなど特殊な状況のパッケージを作る際にも意図的に変更することがあります。このようなアセット構造にしておくことで、プログラマーとデザイナーとで分業しやすい状態にできるのでオススメです。
ブループリントアクターを用意します。
StaticMesh とChildActor をAdd Componentボタンから追加します。
追加しただけだと空っぽなので、Static Meshには さきほどインポートしたMeshアセットと対になるマテリアルインスタンスをセットします。
最後の Child Actorコンポーネント には、前回の記事で作ったブループリントをセットします。
Child Actorコンポーネントは、そのままだと中身にアクセスできないのでConstruction Script 内でキャストして変数化しておきます。
（なんかちょっと不思議な感じ、間違ってるのかな・・・）
続きを組む前に、関数を２つ用意。
見た目をデフォルトにする関数と、
見た目をフォーカス状態にする関数。
ConstructionScript 内で表示位置と状態のセッティングは済ませておきたいので、
StaticMeshComponentを配列変数にして、そこから ForEachLoop でいろいろセット。
ループ処理の前後どちらでも問題ないと思うけど（上図では後）、配列に仕込んだ数を変数に持たせておきます。
準備ができてきたので、前回作ったタブっぽいウィンドウのブループリントを再び編集します。
イベントディスパッチャーを追加します。
作ったイベントディスパッチャーは、アニメーションの終了を通知するためのもので、TimeLineノードのCompleteピンにつなぎます。
これでこのブループリントは編集終了。
次はこのイベントディスパッチャーをバインドしてやります。
再び今回のBP。
これで、ウィンドウの出現アニメーションが終わるのを待つことができます。
出現が完了したら、カスタムイベントで受け取って、リストメニューを表示する、という流れです。ここでリストのフォーカス位置を管理するための変数 int型 をひとつ用意しています。上図の FocusIndex。
右下の部分は、このあと何度か登場するので、関数にしてしまいます。
まとめて選択しておいて、右クリック ＞ Collapse to Function を選びます。
できた関数ノードを編集して、Pure型にしてみます。
ノードが変化します。
今フォーカスされてるやつをGetするだけの関数だけど、こうしておくことで、ノードもスッキリして、名前で何をしてくれるかわかるし、関数の中にチェックの仕組みも入れやすくなります。
例えば下の例は StaticMeshComponentの配列から正しく取り出せるかチェックする場合。
で、リストのフォーカスをくるくると切り替える仕組みをカスタムイベントで組みます。
このイベントの Inputs（引数）は int型で、+1 か -1 を受け取ります。
ブループリントはこれで一応完成です。
さっそくレベルブループリントからテストしてみます。
左の Set View Target with Blend ノードは、任意のカメラに切り替えるときに使います。Spawn Actor from Class ノードを使ってActorブループリントをシーンに呼び出します。
キー入力でテストしてみたので、Inputノードは カーソルキーの ↑（Up）↓（Down）です。
再生してみると、
GIFが重くて上げられなかったので２つに分けました。
うまく動いてくれました。
PostProcess の影響を受けるので、カラーのコントロールが難しいですが、UMGと大して変わらない印象です。UVアニメーションで凝ったことができるのと、アルファの透明部分をカットして描画負荷を軽くしたり、UVがレクト（長方形）じゃなくてもいので、テクスチャを節約できたり、頂点カラーが使えたりと、メッシュでUIパーツを作成できると、いろんな表現ができるのでとても楽しいです。
個人的に、お手軽さではUMGの方に軍配が上がりますけどね。
ではでは今回はこの辺で
ステキな［３D］UIライフを！
