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

みつまめ杏仁

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

はみ出た文字のサイズを調整

UE4 UMG Widget

久しぶりの更新。なかなか記事を書く時間がないので困ったものです。

NintendoSwitchにもUE4が対応するということで、どんなゲームUIが出てくるか楽しみです。

さてさて以前テキストに合わせてフキダシの大きさを変えるのを書きましたが、今回は逆に決められたサイズを越えたら無理やり収めるというのを書いてみようかと。

UMGのテキストブロックには、Size to Content という設定があって、これを有効にすると中身に合わせてサイズが可変するというしくみが用意されています。

f:id:hiyokosabrey:20170319020555p:plain

 

まずはSize To Content にチェックを付けたテキストブロックを3つ並べてみます。

f:id:hiyokosabrey:20170319020110p:plain

ちょっと実験したいので、それぞれ文字詰めの方向を変えています。

f:id:hiyokosabrey:20170319021500p:plain

 

ブループリントから文字を流し込んでみます。

setTextノードを使います。

f:id:hiyokosabrey:20170319021924p:plain

適当な文字を仕込んでPlayしてみると・・・

f:id:hiyokosabrey:20170319022537p:plain

配置した Text Block のポジションから流し込まれて、見た目に差はでません。

 

文字詰めの指定をしても、エンジンが気を利かせてくれるわけではないようです。

残念。

試しに複数行のテキストを流し込んでみます。

f:id:hiyokosabrey:20170319023805p:plain

文字のサイズを小さくしています。

横の一番長いテキストに合わせてきちんと文字詰めされていることが分ります。

 テキストの長さ次第でレイアウトが安定しないのはちょっと使いづらい感じです。

 

さてさて、気を取り直して、

まずはテキストブロックのサイズを取得する処理を用意します。

基準点を指定して、そこにセンタリングする関数を作りました。

センタリングの仕組みを簡単に図にしてみました。

f:id:hiyokosabrey:20170321003611p:plain

 

 テキストブロックにテキストをセットした後に呼び出します。

f:id:hiyokosabrey:20170321001706p:plain

 

こんな感じになりました。同じ内容ですがバラバラのテキストブロックです。

f:id:hiyokosabrey:20170319220803p:plain

 

この辺で長さの違うテキストを表示してみます。

 大好きなゲームから拝借。

f:id:hiyokosabrey:20170321005407p:plain

 これを、はみ出たやつだけ縮小すようにします。

センタリング処理の関数に追加します。

f:id:hiyokosabrey:20170321010653p:plain

 

でPlayしてみると・・・

f:id:hiyokosabrey:20170321010914p:plain

いい感じに収まってくれました。

 

フォントの形がおかしくなるので、あまりやらない方がいいのですが、

表示したいテキストのうち、ほんの少しくらいならこういった縮小処理は画面レイアウトを維持するためには積極的に使っていきたいものです。

 

ではでは今回はこの辺で