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

みつまめ杏仁

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

UMGでリストボックスを作ってみる 《おまけ》

前回作ったリストボックスにもう少しだけおまけを追加してみようかと。

 

limesode.hatenablog.com

limesode.hatenablog.com

 リストボックスは、全体の一部分しか見えていないので、「もうこれ以上ないよ」または「まだ続くよ」というのをユーザーに伝えてあげた方が良いと思います。

伝え方としてはいくつかの方法があります。

 

・スクロールバー

・分数表記

・矢印でスクロール可能である表示

・ちら見せ

 

スクロールバーは全体の総数が分かってさらに今この辺、という示し方ができるので最強の部類です。総数が分かって今どこ、というのが分かるという意味では分数表記もアリですが、リストタイプよりページ切り替えするタイプに向いています。簡単な表示でそんなにややこしくないのが、矢印で示すタイプ。総数が分からないのが難点ですが、小規模のリストであればデザインも軽くできてそんなに悪くないと思います。

あとはパーツを必要としない、ちら見せ。まだ先があるように一部分だけを見せます。簡単そうだけどちょっとだけ補正の計算がややこしいです。

 

というわけで、今回スクロールボックスを使わなかったので、意地でもスクロールバーに頼らない表示を実装してみます。

 

で矢印タイプを作ってみます。

まずは、矢印のテクスチャ。64x32。

f:id:hiyokosabrey:20160915012120p:plain

テクスチャ容量節約のためMaskテクスチャにします。

アルファチャンネル無しの24bitのTarga形式です。

インポート設定は以下。

f:id:hiyokosabrey:20160915012653p:plain

設定して保存したら、コンテンツブラウザのアイコン上で右クリックしてマテリアルを作成します。

f:id:hiyokosabrey:20160915012836p:plain

UMGで使用するので、Material Domain(マテリアル属性)を Surface から Use rInterface に変更します。

f:id:hiyokosabrey:20160915013346p:plain

↓↓↓ Blend Mode はOpacityを使いたいので、Translucent にします。

f:id:hiyokosabrey:20160915013359p:plain

ノードはこのようにつなぎます。

f:id:hiyokosabrey:20160915013829p:plain

マテリアルはこれで完成です。点滅させたりカラーを重ねたりしても面白いかもです。

 

前回作った『親』Widgetを編集します。

UMGで Image を2つキャンバスにレイアウトします。

f:id:hiyokosabrey:20160915014212p:plain

Detailsタブの Appearance > Brush > Image のところに作ったマテリアルをセットします。矢印は上向きしか用意していないので、下側の矢印は回転させます。

Detailsタブの、Render Transform > Transform > Angle の値を -180 にしてます。

最初は消えていてほしいので、

Detailsタブの、Behavior >VisibilityHidden にしておきます。

Widgetブループリントから触るので、IsVariableのチェックも確認。

 

編集モードをGraphに切り替えます。Event Tickにつないでいるところで空いているピンがあります。

f:id:hiyokosabrey:20160915015751p:plain

ここに矢印を出したり消したりする処理をつなぎます。

 

 表示範囲が一番上、もしくは一番下になって初めて消えて、それ以外では表示します。

f:id:hiyokosabrey:20160916001737p:plain

 配列のInde番号は 0 からスタートするので、個数を見ると、最後のIndex番号より1つ多い数字になります。(慣れないとよく混乱します)

ViewRange_Bottomも見た目の数(=ViewRange_Num)を素直に足しているので、値としては1多い状態です。こういった値を扱うとき困るのが判定部分だと思います。

f:id:hiyokosabrey:20160916052030p:plain

つなぎ方次第で同じ結果になるものもあってややこしいのですが、AとBどちらのピンを基準に考えるかがポイントです。

なので、こうなります。

f:id:hiyokosabrey:20160916045905p:plain

 今回は ==(イコール)を選びましたが、他のものでも問題なく動作させることができます。たとえば↓

f:id:hiyokosabrey:20160916053005p:plain

ViewRange_Top の値が、0 だったら Hidden(非表示)  と、

ViewRange_Top の値が、0より大きかったら Visible(表示) は同じ結果になります。

 

というわけで再生してみると

f:id:hiyokosabrey:20160916054854g:plain

 

いい感じになりました。

今回 あまり端折らないようにしようと心がけてみたのですがいかがだったでしょうか?

解らない部分などありましたらコメントいただければ、頑張ってお答えします。

ではでは