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

みつまめ杏仁

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

テキストブロックのスクロール 続き

UE4 UI UMG Widget ブループリント

前回の続きでスクロールバーを付けてみます。

limesode.hatenablog.com

 以外にサクッとできました。まずはUMGのパーツを追加するところから。

 

f:id:hiyokosabrey:20170220223725p:plain

スクロールバー全体の大きさを決めるキャンバスパネルを親にして、スクロールバーの下敷きとバー本体を表すImageパーツを子供にします。ちょっとだけラクをしたいのでバーの長さは、テキストブロックの表示サイズと同じにしています。

 

スクロールバーの長さを計算して変更する関数を追加します。

f:id:hiyokosabrey:20170220224608p:plain

このセットアップ関数は、テキストブロックの中身を変更する関数の中に置きます。

f:id:hiyokosabrey:20170220224816p:plain

スクロールバーを動かすためのマクロを用意。

f:id:hiyokosabrey:20170220225243p:plain

これをテキストボックスのスクロール部分にくっつけます。

f:id:hiyokosabrey:20170220230103p:plain

テキストボックスを動かす計算をしたあと、その値を拝借するカタチです。

以上で完成です。

 

不思議の国のアリス(英語)の冒頭を使って試してみました。

f:id:hiyokosabrey:20170220230446p:plain

f:id:hiyokosabrey:20170220230458p:plain

やっぱりスクロールバーはいいですね。あとどのくらいっていうのが判るのは大事です。

UMGにはとても便利な 『スクロールボックス』 が既に用意されているので、わざわざ苦労して作ることもないのですが・・・ こういった基本的なUIを自分の手で一回は作っておくのもいいと思います。試行錯誤してみて初めて仕組みの深いところが分かったり、当たり前のように毎日使ってるGUIの奥深さに気付くこともあるかと。

 

ではでは今回はこの辺で

ステキなスクロールライフを!