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

みつまめ杏仁

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

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

f:id:hiyokosabrey:20160102210618p:plain

カーソルの移動処理を作ります。

並んでいる状態を眺めているとルールが見えてくる気がする。

上の例だと、上方向には -8、左右はそれぞれ -1と+1、下方向は+8 と、決まったパターンで数値を変化させればよさそうです。

ただ、端まで行ったときにはそのまま足してしまうとズレたりエラーが出そうです。

 とりあえず右に移動させるための関数を作ってみました。

f:id:hiyokosabrey:20160104231835p:plain

 あとはこれと同じようなやつを、上、下、左 と作ればいいんだけど、なんかスマートじゃない気がしたので、せめてタテ方向とヨコ方向の2つの関数で済ませられないかと思ってできたのがこれ。

まずはヨコ方向用。関数が受け取っている引数は、進む方向で、+1か-1。

f:id:hiyokosabrey:20160104234305p:plain

次はタテ方向用。受け取っている引数はこれも進む方向で、 +1か-1。

この数値に、ヨコ方向の数を掛け算して使ってます。

f:id:hiyokosabrey:20160104234245p:plain

これで親Widgetはほぼ完成。

 

あとはこの関数を呼ぶところ。

レベルブループリントでは、こうなってます。青いラインは、Create Widget した親Widgetの Return Value ピンにつながってます。

f:id:hiyokosabrey:20160104234919p:plain

Tickで検出するつくりだと、下のようになります。

f:id:hiyokosabrey:20160104235618p:plain

画像がやたらとデカくなるので方向キーのみにしています。左スティックも対応させると使い勝手がよくなります。

 

細かいロジックはだいぶ端折りましたが、期待通りに数値(IndexFocus)が変化するように考えていくとそれなりに出来上がってくる・・・はず。

 

あまり賢い作りじゃないかもですが、プロトタイプ程度ならなんとかなるかと思います。