2
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 3 years have passed since last update.

UE4でのUI作成

Last updated at Posted at 2019-12-22

初心者のUE4のUI開発の触り

UE4のUIってこんな風に作るんだ という簡単な認識をしてくれれば幸いです
今後UE4は多く使われていくと思うので興味があれば触ってみてください

UMG

UE4でのUI開発にはUMG(Unreal Motion Graphics)が使われています
こういった画面で作業します

NewWidgetBlueprint 2019_12_23 1_26_16.png

グラフィッカーの方がプログラムを意識せず画面構成、アニメーションを作成することができます

UMGのパーツ

この画面に色んなパーツを組み込んで画面を構築していきます

パーツ

左上の「パレット」から素材を画面上にドラッグ&ドロップしていきます
「パレット」内の「一般」に画像、ボタンなど基本的なパーツが含まれています
NewWidgetBlueprint 2019_12_23 1_26_16_parts.png
上記から画像、ボタンを引っ張ってくると下記のように簡単に表示されます
NewWidgetBlueprint 2019_12_23 1_42_46_layout.png

階層

UMGパーツの階層構造が見えます
そこでパーツを選択しパーツ内の設定を変更することができます
NewWidgetBlueprint 2019_12_23 1_42_46_detail.png

詳細

選択したパーツの詳細が画面右に表示されます
NewWidgetBlueprint 2019_12_23 1_42_46_detail_slot.png

Slot

Slot内のパーツの位置、大きさの設定

Appearance

画像のリソース、色の設定

Behavior

画像の表示、非表示、入力の当たり判定
画像の透過度の設定

Render Transform

画像の位置からの移動、拡縮、基準(pivot)の設定
主にアニメーションで使われます

などなどほかにも沢山あります
こういった設定をプログラムなしで組めるのがUMGです

Blueprint

そしてプログラマーの方はBlueprintでUMGのパーツを制御することができます

NewWidgetBlueprint 2019_12_23 1_29_36.png

簡単な記事で申し訳ない

時間がなかったので今回は概要の触りも触りの部分を説明しました
またUMGはUUserWidgetというクラスで中身が見れるので詰まったら参照してみてください
またUMGのパーツを改造して自分のプロジェクトに使いやすいようにパーツを作っみてもいいかもしれません

2
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
2
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?