0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

汎用性の高いUIが作りたい

Posted at

はじめに

この記事は汎用性が高いUIを作りたい記事です。同じ見た目のボタンをたくさん作りたいとき(アイテムスロットとか)に使えます。
先日開催された、historia様主催の第20回ぷちコンにて使用してします。

使用環境
Windows11
UnrealEngine5.2.1

UIの汎用化

UnrealEngineではボタンやテキストボックスなど左側のタブに用意されているもののほかに自作したUIをUIの中に入れ子構造で入れることが可能になっています
image.png

基礎の形を用意します。
image.png
(例:PCのショートカットみたいなやつ)

Pre Contexctで見た目を変更したいものを呼び出しセットします。
image.png
見た目を変更したいもの(画像のBrushとかTextの文字列、Fontの文字サイズや色など)を変数にしてインスタンス編集可能にしておくことで表示するUMGに置いたときに個別に編集することができます。

image.png

見た目の変数はGet+アピアランス下のタブの名前(この場合GetFontでフォントが呼べる)でBPで
編集可能です
image.png

OnClickなどの呼び出しはインターフェースで配置予定のUIに送信しています。
image.png
↑MainUI(配置場所)の取得
image.png
UMG側にインスタンス編集可にした任意の型の変数を作ってボタン判別用の内容を入れておき、インターフェースが呼び出された際にその変数を渡すことでボタンの判別ができます。

これにより、一つのUIにすべてのUIを乗せる、なんてことをしなくても機能別に切り分けてUIを作ることができます。

スクリーンショット (20).png
↑MapフォルダーとGame.exeは全く同じUIを配置しています

これで一つのUMGにすべての機能を配置するのとはおさらばだ!!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?