前回作ったリストボックスにもう少しだけおまけを追加してみようかと。
リストボックスは、全体の一部分しか見えていないので、「もうこれ以上ないよ」または「まだ続くよ」というのをユーザーに伝えてあげた方が良いと思います。
伝え方としてはいくつかの方法があります。
・スクロールバー
・分数表記
・矢印でスクロール可能である表示
・ちら見せ
スクロールバーは全体の総数が分かってさらに今この辺、という示し方ができるので最強の部類です。総数が分かって今どこ、というのが分かるという意味では分数表記もアリですが、リストタイプよりページ切り替えするタイプに向いています。簡単な表示でそんなにややこしくないのが、矢印で示すタイプ。総数が分からないのが難点ですが、小規模のリストであればデザインも軽くできてそんなに悪くないと思います。
あとはパーツを必要としない、ちら見せ。まだ先があるように一部分だけを見せます。簡単そうだけどちょっとだけ補正の計算がややこしいです。
というわけで、今回スクロールボックスを使わなかったので、意地でもスクロールバーに頼らない表示を実装してみます。
で矢印タイプを作ってみます。
まずは、矢印のテクスチャ。64ｘ32。
テクスチャ容量節約のためMaskテクスチャにします。
アルファチャンネル無しの24bitのTarga形式です。
インポート設定は以下。
設定して保存したら、コンテンツブラウザのアイコン上で右クリックしてマテリアルを作成します。
UMGで使用するので、Material Domain（マテリアル属性）を Surface から Use rInterface に変更します。
↓↓↓ Blend Mode はOpacityを使いたいので、Translucent にします。
ノードはこのようにつなぎます。
マテリアルはこれで完成です。点滅させたりカラーを重ねたりしても面白いかもです。
前回作った『親』Widgetを編集します。
UMGで Image を２つキャンバスにレイアウトします。
Detailsタブの Appearance ＞ Brush ＞ Image のところに作ったマテリアルをセットします。矢印は上向きしか用意していないので、下側の矢印は回転させます。
Detailsタブの、Render Transform ＞ Transform ＞ Angle の値を -180 にしてます。
最初は消えていてほしいので、
Detailsタブの、Behavior ＞Visibility を Hidden にしておきます。
Widgetブループリントから触るので、IsVariableのチェックも確認。
編集モードをGraphに切り替えます。Event Tickにつないでいるところで空いているピンがあります。
ここに矢印を出したり消したりする処理をつなぎます。
表示範囲が一番上、もしくは一番下になって初めて消えて、それ以外では表示します。
配列のInde番号は 0 からスタートするので、個数を見ると、最後のIndex番号より１つ多い数字になります。（慣れないとよく混乱します）
ViewRange_Bottomも見た目の数（＝ViewRange_Num）を素直に足しているので、値としては１多い状態です。こういった値を扱うとき困るのが判定部分だと思います。
つなぎ方次第で同じ結果になるものもあってややこしいのですが、AとBどちらのピンを基準に考えるかがポイントです。
なので、こうなります。
今回は ＝＝（イコール）を選びましたが、他のものでも問題なく動作させることができます。たとえば↓
ViewRange_Top の値が、０ だったら Hidden（非表示） と、
ViewRange_Top の値が、０より大きかったら Visible（表示） は同じ結果になります。
というわけで再生してみると
いい感じになりました。
今回 あまり端折らないようにしようと心がけてみたのですがいかがだったでしょうか？
解らない部分などありましたらコメントいただければ、頑張ってお答えします。
ではでは
