読者です 読者をやめる 読者になる 読者になる

みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

Widgetでタイル型のボタンをグリッド状に並べる

UE4 UMG Widget UI

f:id:hiyokosabrey:20160102210618p:plain

インベントリ画面とかアイテム管理を行う画面では、テキストよりもアイコンで並べた方が、収まりもよく管理しやすいうえにカーソルの移動回数も減るので、グリッドレイアウトが採用されることが多いです。

UMGにはGridPanelという便利そうなものが用意されていて、恐らくこれを使うのが賢明な方法だと思いますが、ゲームパッド操作が前提なのと、動的な配置変更や調整を考えるとブループリントで配置した方が後々融通が利きそうな気配もあるので、ブループリントを使って並べたいと思います。

恥ずかしながらGridPanelについてあまり検証できてないのも理由ではありますけど・・・

で、並べる際によく使う方法のメモです。

 

まずはタイリング用の子Widgetを用意します。

f:id:hiyokosabrey:20160102211030p:plain

 シンプルにベースとなる■四角とテキストブロックです。

アニメーションはひとまず、通常時”DEFAULT”と、カーソルが乗った(実際には乗っててなくてハイライト処理)フォーカス状態”SELECT”の2種を用意。

このアニメーションを呼び出す関数を作ったら、ひとまず子Widgetは編集終了です。

f:id:hiyokosabrey:20151226205851p:plain

f:id:hiyokosabrey:20151226205922p:plain

各アニメーションは、再生中にバッティングすると、思ったとおりの結果にならないことがあるので、再生中の恐れがあるアニメーションを先に止めます。

 

 

Widgetを用意します。

今回の肝はここからです。

調整が便利になるように、いくつかの変数を用意します。

f:id:hiyokosabrey:20160103000527p:plain

 前回の記事でも書いてますが、基本的に子Widgetを並べるときは、配列変数に積んでいきます。カーソルを実現しようとすると、キー入力に応じてIndex番号をプラスマイナスするだけで済むからです。

このあと、いろいろ計算で利用するので、まず初めに用意する変数は3つ。

 

・ヨコ方向の数

・タテ方向の数

・配列用の最終Index番号(上の2つの変数から算出)

 

タテとヨコの変数は初期値をセットしておきます。

Detailタブの、Default Value の部分です。

f:id:hiyokosabrey:20160103001652p:plain

 

変数が用意できたら、次にForLoopノードにつなぎます。

f:id:hiyokosabrey:20160103105359p:plain

 ForLoopノードの右側は、前回の記事と同じような構成です。右端はいつものパターンなのでマクロ化してます。中身は後述します。

今回 Panels という配列変数を作って Create Widgetして出てきた結果 ReturnValueを積んでいってます。

配列変数は積むと一方向に伸びるイメージです。なのでグリッドな感じにしようと思うと少し工夫が必要になります。

f:id:hiyokosabrey:20160103112917p:plain

UE4では2次元配列は使えないので、通常の配列変数を下図のような形で扱います。

f:id:hiyokosabrey:20160103113237p:plain

座標も同様に、一定の数まで並べたら折返すようにします。

左上を0にして並べると下図のようになる想定です。

f:id:hiyokosabrey:20160102210618p:plain

ここで活躍してくれる2つのノードがあります。

f:id:hiyokosabrey:20160103113741p:plain

 

今回はここまで。

続きは次回にて。