みつまめ杏仁

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

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

本記事は2017/3/21にアップした内容に、2018/8/6に加筆修正した内容になります。

 

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

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

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

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

f:id:hiyokosabrey:20170319020555p:plain

 

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

f:id:hiyokosabrey:20170319020110p:plain

 

簡単かつ確実に中央揃えにするために、アンカーは、3つともCenter Top。

f:id:hiyokosabrey:20180805220724p:plain

さらにAlignment の値も3つとも X を 0.5 にします。

f:id:hiyokosabrey:20180805221747p:plain

あと、Position X も 0.0 にすると、特に計算しなくても中央揃えになってくれます。

 

まとめると、横方向に中央揃えにする場合、以下の3か所をセットすればOK。

f:id:hiyokosabrey:20180806204859p:plain

この組み合わせで、確実に中央揃えにできます。

親のキャンバスパネルのサイズを変えても、きちんと追随します。

 

Alignment で指定した位置が、そのパーツの基準位置ということになります。

そして、Anchorsの基準位置から 「どれだけ離すか」というのが、Positionの値になるので、結果として、中央揃えになります。

 

 

配置ができたので、ブループリントから文字を流し込んでみます。

SetTextノードを使います。

f:id:hiyokosabrey:20170319021924p:plain

単品だと↑のようなカタチになりますが、3つのTextBlockにまとめて流し込むには、まずTextBlockを配列型にします。MakeArrayノードから作る方法をご紹介します。

f:id:hiyokosabrey:20180805213830p:plain Add pin をクリックして [2] まで増やします。

そこへ TextBlockをつないでいきます。

TextBlockは IsVariable にチェックを付けると、変数として扱うことができます。

Getの形で接続。

f:id:hiyokosabrey:20180805213911p:plain

最後に、Array ピンの上で右クリックして、Promote to Variable を選択すると、

f:id:hiyokosabrey:20180805213954p:plain

TextBock型の配列が出来上がります。

 

この配列に対して ForEach Loop ノードを使えばすべてのTextBlockにアクセスできます。

f:id:hiyokosabrey:20180805220415p:plain

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

f:id:hiyokosabrey:20180805222147p:plain

3つとも一度に書き換わります。

 

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

準備として、テキスト型の配列を用意します。

実際のゲームでは値を受け取って表示する流れになりますが、ここでは実験なので、このブループリント内で、用意します。

テキスト型の配列変数をあらかじめ作っておいて、Setの形で配置します。

そこへ、Make Array ノードをつないで、Add pinすると、いくつもテキストを入力することができます。

とりあえず大好きなゲームから拝借。

f:id:hiyokosabrey:20180806210927p:plain

これを、先のForEachLoopで利用します。

f:id:hiyokosabrey:20180806211515p:plain

 

再生してみます。

f:id:hiyokosabrey:20170321005407p:plain

みごとに2つ目がサイズオーバーです。

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

 

はみ出た場合に縮小する関数はこんな感じ。textSizeAdjust と命名。

f:id:hiyokosabrey:20180806214214p:plain

関数が受け取る値(Inputs)のピンは2つ、TextBlock型と、Float型です。

 

この関数を、ForEachLoop でループ処理している最後の部分につなぎます。

f:id:hiyokosabrey:20180806214342p:plain

関数に渡している MaxWidth の 230 は、縮小するかしないかを判定するためのしきい値になります。

f:id:hiyokosabrey:20180806213717p:plain

 

でPlayしてみると・・・

f:id:hiyokosabrey:20170321010914p:plain

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

 

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

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

 

ではでは今回はこの辺で

ステキなTextBlockライフを!

 

 

再編集にあたって

先日コメントを頂いて、改めて記事を見てみると余計な情報はあるわ、Alignmentの使い方分かってないわで、大変申し訳ない気持ちになった次第で、表題通りにバッサリと整理しました。

計算してセンタリングできるという方法を披露したかったのだと、当時に思いを馳せてみたのですが、「はみ出た文字サイズを調整」というタイトルと合ってない印象はどうしようもないので、内容の再編集に踏み切りました。