前提

身内用に書いたものを、暫定的に公開しているものです。何かおこったら閉じるかもしれません。

前の記事に書いた知識（ブループリントの最低限の知識）は持っている、という前提で書いてます。特に説明のない限り、Unreal Engine 4.25 で FirstPerson テンプレートで作成したプロジェクトのレベルブループリントのイベントグラフ上で操作をする前提です。

UE4の2次元UI的なもの（UMG）を作る仕組みについて

UE4でユーザインタフェース的に使える、二次元のボタンとかテキスト、メニューみたいなものを作る仕組みがあります。

上の画面の中央に出ている Resume とか Exit のボタンや、左上に出ているスコア表示、画面中央に見えている照準を示す赤い十字などがそうです。テキストだけでなく、画像やアニメーションを表示することもできます。

これらを実現する具体的な方法としては、ウィジットを使う方法と HUD （Head Up Display）クラスとを使う方法の二つがあります。HUD クラスを使う方法は UE3 までは標準だったようですが、UE4 からはウィジェットを使うのが標準になったようです（多分）。なので、以下ではウィジェットについてのみ書きます。

ちなみに、UE4では二次元 UI 的なものを作る仕組みのことを総称して UMG（Unreal Motion Graphics UI デザイナ）というようです。

他の記事

Unreal Engine 4.25 でゲームの一時停止、再開、初期化、終了(Pause, Resume, Reset, Quit) を実現する

ウィジットのざっくりとした使い方

二次元UI的なものを画面に出すには、おおむね以下の手順が必要です。

ウィジェットのブループリントクラスを作る
UIを作成するエディタでボタンやテキストなどを配置する
ボタンを押したりしたときの動作をブループリントで記述する（必要ならば）
レベルブループリントなどにウィジットを表示したり消したりする処理を書く

以下、順番に説明します。

ウィジットのブループリントクラスを作る

コンテンツブラウザで右クリックして、ユーザインタフェイスからウィジェットブループリントを選びます。

こんな感じのアイコンができるので、名前を変更しておきます。ここでは SampleMenu にしました。以下、SampleMenu という名前にしたものとして説明します。

これでウィジェットのブループリントクラスが用意できました。

UIエディタでテキストやボタンを配置する

作成したウィジェットブループリントクラスをダブルクリックすると、こんな感じのエディタが開きます。中央の点線（というか緑）の枠が、画面の外枠のサイズをい示しています。この範囲内に、ボタンやテキストなどを配置していきます。

例えば、ボタンは「一般」の中の Button を選んで、画面内にドラッグドロップで配置します。

配置したら、ボタンの周囲の白い点をつかむことでリサイズできます。右側の「詳細」の中で、数値入力で位置やサイズを指定することもできます。ボタンに文字を表示させたい場合は「テキスト」という違う部品を使います。

「一般」の中にある Text の項目をドラッグドロップでボタンの上に配置すると、ボタンに表示する文字として使えるようになります。ボタンの部品とテキストの部品が親子関係になり、ボタンを移動させればテキストもついていきます。

テキストを選択した状態にすると、右側の「詳細」で表示する文字やフォント、サイズ、色などを設定できます。ここでは文字（Text）を Resume として、表示色を黒に変更してみました。

変更後はこんな感じになります。

ボタンを選んで、右側の「詳細」のところで ResumeButton に名前を変えておきます。デフォルトでは Button_001 のような番号のついた名前になっているのですが、これだとプログラムでこのボタンを使うときに、何の機能のボタンなのかが分かりにくいです。自分で見て、何のボタンかわかるように名前を変えておくと多分幸せになれます（多分）。

作成したボタンなどは、コピペで増やすこともできます。ペーストするときは、左の Canvas とかかれた項目を選択してから、ペーストの操作をします。そうしないと、コピーしたボタンが親になった状態で、新しい部品がペーストされてしまいます。

ここでは、Resume ボタンと Exit ボタンを作ってみました。Exit のボタンも、選択して「詳細」のところで ExitButton という名前に変えてきます。「詳細」で名前を変えると、左の「階層」のところの部品名の表示も変わります。

ちなみに、ボタンやテキストの部品と、このエディット画面全体（Canvas）のことをUE4ではまとめて「ウィジェット」と呼ぶようです。つまり、ボタンもウィジェットであり、2次元UI的な画面そのものもウィジェットです。ただし、分かりにくいのでここでは

ボタンを押したときの動作をブループリントで書く

ボタンなど、押したときに何かさせるプログラムを書くときは、ウィジェットのエディット画面の右上にある「グラフ」を押します。

こんな画面になって、配置したウィジェットの動作をブループリントで記述できます。左側の「変数」のところで、プログラムを追加したいウィジェット（部品）を選び、下の「イベント」で具体的に何のイベントが起こった時の動作を書くかを選びます。

たとえば、ResumeButton がクリックしたときの処理を書きたければ、ResumeButton を選択した状態で、下の「イベント」で On Clicks の横にある＋ボタンを押します。すると、画面内に On Cliked (ResumeButton) というイベントノードが配置されます。これを使って、ボタンが押された時の処理を記述します。

例えば、このように記述すると、ResumeButton を押したらウィジェット全体が画面から消えます。

もし、グラフのエディタ内でボタンが変数として表示されていない場合は、デザイナに戻って、ボタンの「詳細」のところの is variable にチェックを入れてください。ここにチェックを入れた部品だけが、グラフのほうで変数として使えます。

ExitButton のほうにも上のようにノードを追加しました。これで、ExitButton を押すとアプリが終了します。

ウィジットを表示したり消したりする処理を書く

作成したウィジェットを画面に表示するためには、レベルプループリントなどにウィジェットを画面に出すプログラムを追加する必要があります。

ウィジェットを画面に出すには、CreateWidget ノードでウィジェットクラスからぅジェットを作成し、AddToViewport ノードで作成したウィジェットを画面に表示するという手順が必要になります。

画面内に「ウィジェッを作成」と書かれているノードは、CreateWidget で検索して出すことができます。

Class のプルダウンメニューから SampleMenu を選ぶと、ノード名が「Sample Menu ウィジェットを作成」に変わります。作成したウィジェットを AddToViewport ノードに引数として渡すと、画面に表示させることができます。

最後の「セット」のノードでは、ウィジェットを表示したあとにマウスカーソルの表示を有効にしています。FirstPersonProject ではデフォルトでカーソルが表示されていないので、ボタン操作のためにカーソル表示を強制的に有効にしています。

「セット」のノードは、GetPlayerController のノードから線を引き出して「ShowMouse」と入力して SetShowMouseCursor を選ぶことで配置できます。

GetPlayerController のノードは、PlayerController と入力すれば検索できます。

実行

ここまで作って「プレイ」すると、Zキーを押したらメニューが表示され、ボタンを押したらゲームの再開、終了ができるようになっていると思います。

しかし、メニューが出てもそのままゲームの操作ができてしまいます。ゲームの実行を止めてメニューを出すには、もう少し手順が必要になりますが、長くなるので下記を参照してください。

Unreal Engine 4.25 でゲームの一時停止、再開、初期化、終了(Pause, Resume, Reset, Quit) を実現する

ウィジェットのアニメーション

概略だけ。

＋アニメーションというボタンを押します。アニメーションの項目が追加されるので、それを選択します。

0.00 のところにカーソルを合わせておきます。

アニメーションを追加したいウィジットを選択して、詳細のところで変更したいパラメータを変更します。上の例では、アピアランスの Color and Opacity のところで色を赤っぽくしてます。変更したら、その横にある＋のついたボタンを押します。

これで 0.00 の時刻にキーフレームが追加されます。

時刻を 1.00 とかに変更して、色を変えてまた＋を押します。

こんな感じでキーフレームが追加されていきます。キーフレームに設定したところのパラメータを変えたい場合は、キーフレームを選択した状態でパラメータを変更し、再度＋を押します。＋を押さないと変更されません。

同じ時刻に複数のパラメータのキーフレームを追加することもできますし、単独のキーフレームを設定することもできます。このあたりは、他のアニメーションツールと同じ感じです。

カーブエディタでパラメータの変化量のカーブを編集することもできます。

アニメーションの表示は、ブループリントを書いて明示的に再生する必要があります。逆再生とかもできるようです。

このくらいヒントがあればあとはできるはず（適当）。

カスタムウィジットを作る

自分でオリジナルのウィジェットを作成して、別のウィジェットの中に配置することができます。

こんな感じで Text と TextBlock を配置して、MyWidget みたいな名前でブループリントクラスを作ってビルドしておきます。

すると、こんな感じで別のウィジェットのデザイナーの「パレット」の中に、作成したウィジェットの項目ができます。

項目を選んでドラッグドロップすれば、作成したウィジェットをひとまとまりの部品のようにして配置できます。

ウィジェットに無駄な余白ができないようにする

ポイントとしては、自作したウィジェットは「左上を原点として、右下がクリップされた状態で」配置されるということです。

こんなふうに、左上にぴったり合わせてカスタムウィジェットを作っておけば、

他のウィジェットに配置したときに、無駄なスペースなく（きれいに？）配置できますが、

こんなふうに、左上から離れた位置にテキストなどを配置していると、

他のウィジェット内に配置したときに、このように左上から部品を配置した場所までのスペースが、マージンのように（何もない空白として）開いた状態で配置されます。

カスタムウィジェットにイベントを追加する

カスタムウィジェットで発生したイベントを外部に通知したり、外からイベントを受け取れるようにするには、イベントディスパッチャーを使います。

TextBlock を内部に含むカスタムウィジェットを作ったとき、内部にある TextBlock のイベントを拾う例について書きます。TextBlock のイベントに対応するイベントディスパッチャーをまず用意します。ここでは TextInputCommited と TextInputChanged を追加してます。（名前はイベントに合わせる必要はないです）

イベントディスパッチャーを追加した時点で、他のウィジェットにカスタムウィジェットを配置したときに、イベントのタブ内にイベント配置のための＋ボタンが追加されます。

必要に応じてイベントディスパッチャーに引数を追加しておきます。ここでは、OnTextChanged イベントにあわせて Text 型の引数を追加してます。

こんな感じになります。しかし、イベントディスパッチャーを追加しただけでは、TextBlock で発生するイベントは拾えません。

このように、内部のウィジェットのイベントに対して、対応するイベントディスパッチャーの呼び出しノードを配置する必要があります。これで、実際にテキスト入力がなされた（または完了した）ときに、MyWidget の TextInputChanged や TextInputCommited のイベントノードが呼び出されて、実行されるようになります。

MyWidget を配置した側でこんなコードを書けば、MyWidget 内部の TextBlock の入力完了イベントを拾えます。

カスタムウィジェットの内部にアクセスできるようにするには、普通にパブリックな関数を作ればOKです。

こんな感じのコードを書いておけば、

こんな感じでふつうに呼び出せます。

ListView みたいなウィジェットの要素として使う

ListView や TileView のような、他のウィジェットを要素のように使うウィジェットの要素として、カスタムウィジェットを使うことができます。ただし、それぞれ親になるウィジェットにあわせたインタフェースを実装する必要があります。

要素のクラスはウィジェット（ブループリント）クラスとして作成すること
デザイナで左上を原点として内部ウィジェットを配置すること

くらいを知ったうえで、以下の記事を読めば多分わかるはずです（きっと）

[UE4]UE4.20で追加されたListViewウィジェットについて

結論

後半雑になったので、UE5 でも変更がなければいつか追記します。