[UE5]スクロールボックスでいい感じにスクロールさせる

UIで良く使われるスクロールボックス、普通にスクロールさせようとするとホイールの入力値やボタン入力に一定のスクロール量をかけたりして実装することが多いかと思います。

これをなんかいい感じに、表示範囲に合わせてスクロールできないかなーって考えたことありませんか？

今回はそんな”いい感じに”スクロールするための方法のご紹介になります。

今回のサンプルは以下の様なWidget構成となります。

いたってシンプルで、ScrollBoxに子としてTextを配置しただけのものとなります。設定もほぼデフォルトままです。

そしてブループリントがこちら。

こちらもそこまで複雑ではないブループリントとなります。

やっていることはScrollBoxの大きさに収まる様にスクロール量を計算して、その値をScrollOffsetに加えている形となります。

実際に動かしてみるとこんな感じ。

と、ここまでの説明とスクショだけで今回の主題はほとんど全てお伝えしてしまっているのですが、少し補足をします。

紹介したサンプルではスクロールボックスの大きさを[Get Desired Size] – [Get Scroll Offset Of End]で計算しているのですが、実はこれを使わずともスクロールボックスの大きさを取得する方法が存在します。

このSlot as Canvas SlotのGet Sizeで直接スクロールボックスに設定している大きさを取得できます。

エディタのDetailsのこの項目に入力した数値が返ってきます

では、なぜわざわざ計算する方法を紹介したのかというと、Widgetの構成次第でGetSizeだと正しい値が返ってこないパターンが存在するからです。

具体的にはSizeBoxやVerticalBoxなどの子WidgetにScrollBoxを設定していて、キャンバススロットでサイズ設定が出来ない時となります。

構成的に問題ない場合はキャンバススロットからのGetSizeの方が分かりやすいので、そちらのノードでも良いかもしれませんね。

最後に、スクロールボックスのサイズぴったりに近いスクロールよりも、もうちょっと細かくスクロール量を調整したいときの調整方法も記しておきます。

一回の移動量を算出する際の分割数に倍率を掛けることでスクロール量が調整できます。

スクショの例だと一回の移動量が半分になり、スクロール端につくまでの操作数が倍になるといった感じです。

用途に合わせて倍率を調整してご利用ください。

短いですが、今回の解説は以上となります。