[UE4]UMGでどこまでもタイリングするねこちゃんの作り方

改訂バージョン: Unreal Engine 4.20

ＵＩデザインで汎用的に使うラインや、
タイリングされたアイコンなどを毎回設定するのはメンドクサイ・・・
そんなお悩みを解決するWidget設定のご紹介です！

タイリングできるwidgetをつくろう

今回は【ねこちゃん】を用意しました。
頭とお尻は違うデザイン、お腹だけタイリングするように
下記のような３枚のテクスチャを用意します。

これをWidgetで表示させる構造はざっとこんな感じです。

【親：メインのWidget】

【子：配置した今回作るWidget】

以下から子Widgetの説明です。
ヒエラルキーの順序がこんな感じですが、

Paletteのちょっとした解説を含むので下記は少し順序を無視します。

こうしておくと親Widgetに配置した時に子Widgetのレイアウトが崩れませんし、
階層内のテクスチャもスケールを維持してくれます。

このボックス内に入れられた素材は入れた数に合わせて横に等間隔に整列します。
今回はテクスチャを３つ入れる訳ですが、横軸のアライメントをCenterにしたままだと
伸ばしてもテクスチャがついてこないのでHorizontal AlignmentをFillにします。

イメージ素材としてそのまま入れただけです。

【１】と同じですが、SlotのSizeをFillにして伸び～るようにしておきます。

ねこちゃんの場合はこの[Horizontal Box]をわざわざ入れなくてもいいのですが、
SlotのPaddingに適当な数値を入れると下記のような間隔調整ができます。

こちらもHorizontal Box【２】のようにSlotのSizeをFillにして伸び～るようにします。
且つ！
Appearance→TintのTilingをHorizontalに設定してタイリングして出てくるように設定できます！

そして最後に親widgetにお好きなように配置すれば・・・

是非ご活用ください～。