UE4 では UMG（Unreal Motion Graphics）というツールを使用して、Widget というブループリントをツリー上に組み込むことで、UI をデザインできます。
Widget には様々な種類があり、数も多いので今回はその Widget について１つ１つ紹介していきたいと思います。
docs.unrealengine.com
初回は Common 編です。
-
Check Box
・子Widgetを １つ 格納
・"Unchecked", "Checked", "Undetermined" の切り替えた状態を表示できる
・入力状況に応じての見た目、音を変更できる
・チェック状態変更時のイベント
Image
・子Widgetを格納できない
・色、テクスチャ、マテリアルで見た目を変更できる
・機能だけ見ると Border の劣化版だが、Border より処理が軽い Widget
（UIはネックになりやすいので Image で機能が足りるのであればこちらの方がよいと思われる）
Named Slot
・子Widgetを １つ 格納
・Widget の流用先で変更されることを前提にしたWidget
UMG で作成した Widget ブループリントは他の Widget 内に流用して使用することができる。
流用先で NameSlot の子Widgetを変更することで流用先ごとに別の Widget 内容で使用することができる。
Progress Bar
・子Widgetを格納できない
・Percent に ０～１ の範囲の値を指定することで値分バーを塗りつぶせる
・背景、塗りつぶし範囲、マーキー時の見た目を変更できる
・マーキー状態にはプロパティーもしくは BP から設定できる
Rich Text Block
・子Widgetを格納できない
・テキスト中の一部の文字を別フォントにしたり、画像を差し込んだり、Text Block では難しい表現ができる
◇ 基本的な使用方法
１．Rich Text Block を追加
この時点ではテキストを入力しても文字化けしたような見た目になります。
２．データテーブルを作成
Rich Text Style Row を元にデータテーブルを作成します。
３．Styleを作成
Row を追加していき、Style という名前のフォント設定を作成していきます。
Default という名前の Style は必ず作る必要があります。Style を指定していない場合、この Style になります。
（使用方法説明のため GreenText という Style も作りました）
４．データテーブルの指定
Rich Text Block のプロパティーに作成したデータテーブルを指定します。
５．Style で文字を囲む
以下のように Style でテキスト中の文字を囲むとデータテーブルの Style が適用されます。
◇ 画像の差し込み
１．RichTextBlockImageDecorator を継承したBPを作成
２．データテーブルの作成
Rich Image Row を元にデータテーブルを作成します。
作成したら「１」で作成した BP のプロパティーに設定します。
３．画像を用意する
作成したデータテーブルに Row を追加し、画像を用意します。
（IconRed という Row を用意しました）
４．デコレーターを指定
Rich Text Block のプロパティーに「１」で作成したデコレーターを指定します。
５．画像を差し込む
以下のように img id を差し込むとデータテーブルで設定した画像を差し込めます。
Text Block
・子Widgetを格納できない
・フォントや色を指定して文字を表示できる
◇ 取り消し線
Strike Brush にイメージを指定すると指定した見た目の取り消し線が表示されます。
（コンパイルしないと反映されないので注意）
◇ 影
Shadow Offset と Shadow Color を指定すると影が表示されます。
Shadow Color はデフォルトでアルファが０になっています。
◇ アウトライン
Font > Out Settings から Outline Size を１以上にするとアウトラインが表示されます。
Text Box
・子Widgetを格納できない
・ユーザーが文字を入力できる
・入力された文字のフォントや色を指定できる
・入力状況に応じての背景の見た目を変更できる
・文字色を変更できる
・スクロールバーの見た目を変更できる
◇ Hint Text
Text Box に何も入力されていない時、Hint Text に入力した文字が薄く表示されます。
◇ 文字を隠す（パスワード入力）
プロパティーの "Is Password" を有効にすると入力した際の文字が隠されます。
Common編は以上になります。
・Widget紹介 Input編
・Widget紹介 Lists編
・Widget紹介 Misc & Optimization編
・Widget紹介 Panel編
UE Version : 4.22.3-7053642
