ボスを倒したときとかに、3Dの画面の手前に「勝利！」みたいな文字が流れるやつの作り方です。いわゆる、ウィジットというものを使います。

準備

Windows 10 home/pro
Unreal Engine 4.24

方針

サードパーソンテンプレートを使う（他のテンプレートでも同じようなことはできる）
ボックストリガーを配置して、そこにプレイヤーが入ったら文字が表示されるようにする。
ボックストリガーから出たら文字は消える。

手順

サードパーソンテンプレートでプロジェクトを作る。

作り方はUnreal Engine 4.24 で正確に往復移動するオブジェクト（アクター）を作るの記事に書いたので、ここでは省略。プロジェクトを作成したところからメモ開始。

テキスト表示部（ウィジット）を作る

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

NewWidgetBlueprint という項目ができるはず。名前は変更できるけど、ここではこのままの名前で進める。

NewWidgetBlueprint をダブルクリックすると、ウィジット（２D画面）の編集ウィンドウが開く。もしイベントグラフが表示されていたら、右上の「デザイナー」のボタンを押すとこの画面になるはず。

左側の「パレット」の中から「一般」「Text」を選んで、中央の画面の中までドラッグドロップする。

すると、緑色の枠がついた文字が表示されるので、右側にある「詳細」の中のパラメータを変更して、文字の内容とか、色、フォントサイズ、位置などを変更していく。

特段の理由がなければ、Size To Fit にチェックを入れておくことと、アンカーのプルダウンメニューで真ん中に四角のあるもの（下図）を選んでおくといいかも。

編集が終わったら、左上にある「コンパイル」を押して、ブループリントを編集するウィンドウをいったん閉じ、メインウィンドウに戻る。

プレイヤーが入ったら反応するボックストリガーを置く

左側の「基本」を押して、ボックストリガーを探してメイン画面の中にドラッグドロップで置く。

右側のアウトライナの中から、今置いた TriggerBox を探して、トランスフォームの「拡大縮小」を調整して、ボックストリガーを少し大きくしておく。ここでは X と Y の拡大率を 3 くらいにしてみた。

TriggerBox を選んだ状態で、ブループリント/スクリプトを作成を押す。

このウィンドウが出たら、そのまま「ブループリントを作成」を押す。Blueprint の名前は、デフォルトで TriggerBox_Blueprint になるはず。

ボックストリガーの設定はここまで。

ボックストリガーに入ったら文字を表示するブループリントを書く

ブループリントを書く場所は、ウィジット側に書く方法と、ボックストリガー側に書く方法、レベルブループリントに書く方法がある（と思う）。複数のアクターというかブループリントをまたいだ処理になるので、ここではレベルブループリントに書いてみる。

準備

メインウィンドウの上にある「ブループリント」のメニューから「レベルブループリントを開く」を選ぶ、

こんな画面になるはず。

左側の「マイブループリント」の中にある「変数」の右の＋を押して変数を作る。ここでは HairunoKanshi という名前にしといた（わざと日本語っぽくしてるのは、名前は自由につけていいということを示している）、

HairunoKanshi 変数を選択した状態で、詳細のところで「変数の型」のプルダウンメニューを開いて、TriggerBox と入力する、すると TriggerBox_Blueprint という項目が出てくるのでそれを選ぶ。

選んだら、変数の型の色が青っぽくなるはず。「変数の型」のすぐ下にある「インスタンス編集可能」という項目にチェックを入れておく。

これで一度、左上の「コンパイル」を押しておく。

ウィジットを表示するイベントグラフを書く

ゲーム開始時に、ウィジットの作成だけしておいて、表示の必要があったときだけ Viewport （つまり画面）に出して、不要になったら画面から消す、みたいな感じで処理を書いてみる。

ウィジットの初期化の処理部分

BeginPlay イベントを置く。

ウィジットを作成のノード置く。

クラス名は New Widget Blueprint を選んでおく。

Return Value の先を伸ばして右クリックして「変数へ昇格」を選ぶ。

こんな感じになるので「セット」のところの NewVar0 という名前を、HyoujiMoji とかに変えておく。

これで、ゲームの開始時にウィジットが作成される。でも画面には表示されない。

ボックストリガーに入ったらウィジットを表示する

HairunoKanshi を選ぶと「詳細」の下のほうに「イベント」という項目ができていて、その中に On Actor Begin Overlap という項目があるので、右側の緑色の矩形に＋と書いてあるボタンを押す。すると、イベントグラフの中に赤いノードが追加される（はず）。

「変数」の HyoujiMoji をイベントグラフにドラッグドロップすると Get か Set が選べるので、Get を選ぶ。そのあと、置かれたノードから線を伸ばして右クリックして、AddTo とか入力すると、AddToViewPort というのが選べるのでそれを選ぶ。

こんな感じでグラフをつなぐ。

これで「コンパイル」を一度押しておく。

変数の HairunoKanshi を選んだ状態で、右の「詳細」を見ると、真ん中あたりにデフォルト値という項目ができているので、そのプルダウンメニューを開いて TriggerBox_Brueprint を選ぶ。

もういちどコンパイルしてメインウィンドウにもどる。

実行

これで、ボックストリガーのある位置にプレイヤーが入ったら、画面に Haittade! と表示されるようになる。

課題

しかし、今の状態だといくつか問題がある。

一度表示されたら消えない。
ボックストリガーに出入りすると、screen にすでに追加されてるで！みたいなワーニングが出る。

ワーニングというのはこんなやつ。The widget 'NewWidgetBlueprint_C' was already added to the screen. とか表示される。これは、すでにウィジットが Viewport に追加済みの状態になっているのに、オーバーラップのイベントが起こるたびに Viewport に再度追加しようとするために表示されている。

消えるように改造

ボックストリガーから出たら Viewport から削除するようにする。そうすれば、表示されっぱなしということはなくなるし、ボックストリガーに再度入るときは、必ず Viewport から削除されている（外に出ている状態でなかければ、再度入ることはできない）はずなので、ワーニングも出なくなる（多分）。

レベルブループリントの改造

メインウィンドウの「ブループリント」のメニューから「レベルブループリントを開く」を選んで、レベルブループリントを編集できる状態にしておく。
、

変数の HairunoKanshi を選んで、右側の「詳細」の「イベント」の中にある OnActorEndOverlap の緑色のボタンを押す。すると、上のように ActorEndOverlap の赤いノードが追加されるはず。

「変数」の HyoujiMoji をイベントグラフに置く（メニューはGetを選ぶ）。HyoujiMoji の青いノードからラインを伸ばして、右クリックしてから「状況に合わせた表示」のチェックを外して、検索欄に RemoveFrom と入力する。すると Remove from Parent が選べるので、それを選ぶ。チェックを外さないと、この選択肢が表示されないことがある。

こんな感じでグラフを作る。

コンパイルする。これで、ボックストリガーの外に出ると文字が消えるようになる（はず）。

実行

ちゃんと消えたね！（静止画じゃわかんないけど…）ワーニングもでないはず。

Delay を使って、一定時間たったら消えるようにするのもありだけど、その場合は文字が消える前にボックストリガーから出て、すぐにまた入るとワーニングがでてしまう。その場合は、AddToViewPort する前に、HyoujiMoji に Parent があるかどうかを判定するなどして、二重に追加しないようにチェックすることで回避できる（多分）。

文字をアニメーションさせる（おまけ）

ウィジットの文字にアニメーションを追加することで、表示されたときに文字を動かしたり、色を変えたり、変形させたりとか、動きをつけることができる。おまけ的に、作り方を簡単にメモっておく。

準備

ここでは、Haittade!! という文字が 3 秒かけて左から右に移動するというアニメーションを作ってみる。

コンテンツブラウザで NewWidgetBlueprint を選んでダブルクリックする。

右上の「デザイナー」のボタンを押して、この画面にしておく。

左下にある「アニメーション」というボタンを押す。名前を入力できるけど、とりあえずこのままでやる。

アニメーションを追加してから中央下あたりにあるライムラインというタブを押すと、こんな感じの表示になるはず。

アニメーションの編集

ここからアニメーションの編集をする。

下のトラックのところの時間を 0 のところに合わせた状態にして、ウィンドウの中にある Haittade!! という文字を左側の画面外の位置に移動させる。

位置が決まったら、右側の「詳細」の中の位置X という項目の右側にある小さいポチを押す。

すると、こんな感じでタイムラインの0秒のところにキーフレームが設定されるはず。

次に、タイムラインのところの時刻を表す縦線を 3 秒のところに先に移動してから、画面内の文字を右の画面外の位置まで動かす。ちなみに Y 座標をかえずにマウスで移動したければ、Shift キーを押しながら移動すると、水平に移動できる。

再度「位置X」の横のポチを押す。これで3秒のところにもキーフレームが設定される。

これでアニメーションの編集は終わったので、一度コンパイルしておく。

アニメーションを実行する

アニメーションは作っただけでは実行されず、プログラムで明示的に「アニメーションを実行しろ！」と命令しないといけない。アニメーションを実行するには、直前の手順で作った NewAnimation という変数（アニメーションは変数扱いになる）を参照する必要があるので、たぶんアニメーションを作成した NewWidgetBlueprint の中で実行するのが素直な気はする。

でも、ここではあえて NewAnimation をレベルブループリントから再生してみる。そうしたほうが、コードが一か所にまとまってすっきりするし（適当）。

アニメーションを外部から実行できるようにする

メインウィンドウの「ブループリント」のメニューから「レベルブループリントを開く」でレベルブループリントを編集できるようにする。ここまで編集した内容に以下を加える。

イベントグラフ内にある Hyouji Moji から線を伸ばしてメニューを出し、PlayAnimation と入力する。するといくつか選択肢が出るので、Play Animation With Finish Event の項目を選んでつなぐ。

再度、Hyoji Moji から線を出して、GetNew と入力する。すると Get New Animation が出てくるので、それを選ぶ。

最終的にこんな感じにつなぐ。これで、アニメーションが実行されるようになる。

実行

コンパイルしてから実行する。

ここまでの手順が間違っていなければ、こんな感じで動くはず。（静止画だけど）

ボックストリガーの範囲外に出ると、アニメーションは止まって文字も消える。再度ボックストリガーに入れば、アニメーションは実行される。

Play Animation With Finish Event 以外の、たとえば Play Animation Forward とかでもアニメーションは再生されるのだけど、これだと画面から文字が消えてもアニメーションが終了したことにはならないようで、すぐにボックストリガーに入りなおすとアニメーションが表示されない。

Play Animation 関係のノードは、動作が微妙に違うようなので、使うときは調べてみてね！

参考

アニメーション(公式)