SizeBoxやScaleBoxを使ってスコア表示を作る

SizeBox使用前

↓

SizeBox使用後

「VecticalBoxとHorizontalBoxを使ってテキストを並べてるんだけど、SCOREとHIGHSCOREで文字数が違うし、点数の部分も違うわけだから絶対どこかがずれてたんだけど、スコアのテキストをSizeBoxでラップすることによって、そこそこの大きさのスペースを確保しつつ右寄せというのが出来るようになったんだよ」

妹「これは4つのテキストをバラバラにして配置すれば、SizeBox使わなくても可能なのでは？」

「それでもいいんだけど、それだとScaleBoxに入れる段階でやっぱりSizeBoxが必要になる。ScaleBoxを使わない場合でも1点気になることがあって、点数が増えて幅に収まらなくなったら、その時はSCOREとかの表示を左側にずらしたかったんだよ。テキストがバラバラで連動してない状態だと、点数が増えた時にSCORE表示と点数の表示が重なってしまう。かといって高得点に対応するために余白を開けすぎると見た目がスカスカになる。でもSizeBoxを使うとこういう風にスムーズに広がるんだよ」

妹「SizeBoxは指定した大きさに固定するものなのに、伸びちゃっていいの？」

「WidthOverrideを使うと大きさが固定になるけど、今回はMinDesiredWidthで、最低サイズだけ設定してある。文字数が少なくても勝手に詰められることはないけど、文字が増えた時には遠慮なく伸びるようになる。だいたい最初に想定した通りの動作になった」

妹「わたしのはあんまり点数の桁数増えない設計だけど、もし頑張りすぎる人がいたら点数がはみ出して重なるかも。直した方がいいかな？」

「これはこれで精密にデザインされてるみたいだから、伸ばしたら変な気がするなあ。点数6桁ぐらいまでそのままで問題なさそう。それ以上の得点も考慮するなら、点数表示のテキストをSizeBoxじゃなくScaleBoxでラップする手がある」

「ScaleBoxは字が少ない時は最大限拡大して、字が多くなって枠に入りきれなくなると縮小してくれる。元が結構大きめの字ならこれでもいける。全体のレイアウトも崩れない。最終的には読めないレベルで数字が小さくなっちゃうだろうけど」

妹「解像度変える時じゃなくてもScaleBox使うんだ」

「中身の大きさが変わる可能性がある時には重要だね。拡大のみ縮小のみとかの拡大方法についての設定も出来るから、縮小だけにしておけば点が少ない時は今と変わらないはず」

妹「何につかうのかわかんないウィジェットが山ほどあるけど、あれも実は重要だったりするのかな」

「いまのところウィジェット全種類の半分も使ってないからね。他のも色々面白いと思うよ。ただ複数のウィジェットを重ねまくって遊んでるとたまにUE4がクラッシュする。だからウィジェットいじる時はセーブをこまめに」