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

04.22

[UE4]UMGでどこまでもタイリングするねこちゃんの作り方 はコメントを受け付けていません。

アイキャッチ

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

 

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

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

sozai_1

 

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

【親:メインのWidget】
sozai_2_oyaw

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

 

以下から子Widgetの説明です。
ヒエラルキーの順序がこんな感じですが、
sozai_2_ko2
Paletteのちょっとした解説を含むので下記は少し順序を無視します。

 

■[Scale Box]をルートとします

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

 

■[Horizontal Box]【1】

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

sozai_ho1_fill

 

 

■[Image]  Neko_Head と Neko_Hip

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

 

 

■[Horizontal Box]【2】※無くてもOK

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

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

sozai_togire_padd2

sozai_togire_neko

 

■[Border]

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

sozai_border1

 

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

sozai_last

伸び伸びできて実に楽しいですNE!

是非ご活用ください~。

 

※Widgetの作り方とゲーム内で表示させる流れは公式ドキュメントを参照してください。
https://docs.unrealengine.com/latest/JPN/Engine/UMG/UserGuide/WidgetBlueprints/index.html
そして↓へ
https://docs.unrealengine.com/latest/JPN/Engine/UMG/UserGuide/CreatingWidgets/index.html

  • このエントリーをはてなブックマークに追加

関連記事

コメントは利用できません。

カテゴリー

ページ上部へ戻る