インベントリ画面とかアイテム管理を行う画面では、テキストよりもアイコンで並べた方が、収まりもよく管理しやすいうえにカーソルの移動回数も減るので、グリッドレイアウトが採用されることが多いです。
UMGにはGridPanelという便利そうなものが用意されていて、恐らくこれを使うのが賢明な方法だと思いますが、ゲームパッド操作が前提なのと、動的な配置変更や調整を考えるとブループリントで配置した方が後々融通が利きそうな気配もあるので、ブループリントを使って並べたいと思います。
恥ずかしながらGridPanelについてあまり検証できてないのも理由ではありますけど・・・
で、並べる際によく使う方法のメモです。
まずはタイリング用の子Widgetを用意します。
シンプルにベースとなる■四角とテキストブロックです。
アニメーションはひとまず、通常時”DEFAULT”と、カーソルが乗った(実際には乗っててなくてハイライト処理)フォーカス状態”SELECT”の2種を用意。
このアニメーションを呼び出す関数を作ったら、ひとまず子Widgetは編集終了です。
各アニメーションは、再生中にバッティングすると、思ったとおりの結果にならないことがあるので、再生中の恐れがあるアニメーションを先に止めます。
親Widgetを用意します。
今回の肝はここからです。
調整が便利になるように、いくつかの変数を用意します。
前回の記事でも書いてますが、基本的に子Widgetを並べるときは、配列変数に積んでいきます。カーソルを実現しようとすると、キー入力に応じてIndex番号をプラスマイナスするだけで済むからです。
このあと、いろいろ計算で利用するので、まず初めに用意する変数は3つ。
・ヨコ方向の数
・タテ方向の数
・配列用の最終Index番号(上の2つの変数から算出)
タテとヨコの変数は初期値をセットしておきます。
Detailタブの、Default Value の部分です。
変数が用意できたら、次にForLoopノードにつなぎます。
ForLoopノードの右側は、前回の記事と同じような構成です。右端はいつものパターンなのでマクロ化してます。中身は後述します。
今回 Panels という配列変数を作って Create Widgetして出てきた結果 ReturnValueを積んでいってます。
配列変数は積むと一方向に伸びるイメージです。なのでグリッドな感じにしようと思うと少し工夫が必要になります。
UE4では2次元配列は使えないので、通常の配列変数を下図のような形で扱います。
座標も同様に、一定の数まで並べたら折返すようにします。
左上を0にして並べると下図のようになる想定です。
ここで活躍してくれる2つのノードがあります。
今回はここまで。
続きは次回にて。