ブループリントの基本的なイベントとタイムライン、タイマー（Unreal Engine 4.25）

# 前提

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/7689a532-411d-5340-427e-4fc497f9fa06.png)

# 準備

外部オブジェクト(ブループリント）の参照の例の説明のために、FirstPerson プロジェクトにブループリントを追加しておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/51aac3d0-b2e5-e60e-b61f-69f6094f41c9.png)

キューブのアクターをひとつ画面内に配置して、右の詳細から「ブループリント/スクリプトを追加」を押して、ブループリントを追加してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/792f09d0-b866-b612-150c-2ce6ca8dd551.png)

デフォルトで Cube_Blueprint という名前のブループリントになりますが、ここではそのままの名前で作成したものとして説明します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/2a635e11-8f38-48e0-51f7-ee8346539cdc.png)

配置したキューブは、可動性を「ムーバブル」にして、Simulate Physics と Enable Gravity にチェックが入った状態にしておいてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/1147e90a-4320-f361-4f2f-f14b7d401955.png)

# キーボードやマウス、ゲームパッドからの入力を拾う

## AnyKey イベント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/34a680f7-82c7-9129-3269-f6d81e6cecf8.png)

AnyKey イベントを使えば、あらゆるキー、マウスのボタン、ゲームパッドのボタンからの入力（押した、離した）を拾えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/b6c51837-2258-5fe4-6625-3f0bd33f33ec.png)

どのキーが押されたかは、GetKeyDisplayName を使えば判定できます。ただし、押したキーに対応する名前は、必ずしもキーボードのキーに書かれた文字や、ゲームパッドのボタンに書かれた文字などと一致しないことが多いので、あらかじめ上のコードを使って調べたほうが良いです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/58d7ad79-053e-9d09-e570-edb17dc722f6.png)

AnyKey イベントノードの「詳細」にある Input Key の項目から、イベントを拾うキーやボタンを限定することもできます。というか、限定して使うことのほうが多いです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/40e7818a-4ded-6e51-2963-3e2a85c9bdff.png)

入力を拾うキーを限定すると、イベントノードの表記も変わります。上は Enter キーに限定したところです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/6fc2fc4e-bc23-0181-352d-b3ebe990d1f7.png)

マウスのイベントも拾えます。

## でも入力イベントを拾うにはプロジェクトのバインディング設定を使ったほうがいい

AnyKey イベントでキー入力などは簡単に拾えるので、デバッグ時には便利です。しかし実際にゲームやアプリなどでキー入力を拾う場合は、AnyKey イベントではなく**「プロジェクト設定」のバインディングの機能**を使ったほうがよいようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/6a990e2c-7a56-d7af-73e4-e59827fbd39b.png)

プロジェクトの設定は、メイン画面の「設定」からメニューを出して選べます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/31295827-4bad-5abd-eff6-21d2bf459c9e.png)

プロジェクトの設定のウィンドウが開いたら、エンジンという項目の中のインプットを選びます。すると上のような画面になります。「バインディング」のところに何も項目がない場合は「バインディング」の左側の三角形を押すと、上のようは表示になるはずです（FirstPersonExample でプロジェクトを作っている場合です）。

![ue5.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/bfb8e3b9-2318-316f-3407-b5d684360948.gif)

このウィンドウで、キー入力に対する新たなイベントを作成できます。「アクションマッピング」の右の＋を押すと、新たな項目が追加されるので、イベント名と対応する入力キーを選びます。Shift キーや Control キーを押したときだけ反応するようにもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/9f822de6-2020-7b8e-39a6-325763d85a27.png)

追加したイベント（MyAction）の右側の＋を押すことで、イベントに対応するキーやマウス入力などを追加できます。この状態で設定のウィンドウを閉じて、レベルブループリントを開けば、追加したイベント（MyAction）をノードとして追加できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/b228c931-9902-53a7-86db-29d2d6586ef8.png)

このように、名前で MyAction ノードを検索できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/d1a0e155-bba4-35db-c38a-9eeb8dac7a39.png)

MyAction ノードには Enter キーを割り当てたので、実質的に MyAction ノードは Enter キーを押したときのイベントを拾ってくれます。

このように、プロジェクトの設定で独自のイベントを追加しておくと、キーとイベントの割り当てを一か所でまとめて管理できるようになって便利です。

キー入力を拾うイベントをブループリント内で個別に書いてしまうと、割り当てるキーを変更しようとしたときに、どこに何のキーのイベントを書いたかわからなくなることが多いです。プロジェクトの設定の中で一括してキー入力とイベントとの関連付け（バインディング）を管理することで、その手の混乱が防げます。

# ゲーム開始時（アクタ作成時）のイベントを拾う

BeginPlay イベントで拾えます。ゲームが開始した直後（レベルが読み込まれた直後）か、アクタが作成された直後に呼び出されるので、アクタやブループリントを初期化する目的で使えます。

呼び出される厳密なタイミングについては、下記のドキュメントを参照してください。

- [アクタのライフサイクル](https://docs.unrealengine.com/ja/Programming/UnrealArchitecture/Actors/ActorLifecycle/index.html): 公式ドキュメント

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/c0d0c47f-bc3f-7361-4956-0f6e2d8f0c13.png)

アクターのブループリントクラスを作成すると、最初から BeginPlay イベント（と OnActorBeginOverlap、EventTick イベント）が配置されています。

レベルブループリントには BeginPlay イベントは配置されていませんが、自分で追加することはできます。

# ゲームの実行中に毎フレーム呼び出されるイベントを拾う

UE4 がアプリの実行中に、画面を更新しようとするたびに呼び出すイベントです。
Unity でいうところの Update() に相当するものです。アクターを移動させたり、継続的に状態を変化させたり（回転、拡大縮小、マテリアルを変更するなど）するのに使えます。

しかし、EventTick は毎フレーム処理されるため、ここに重い処理を記述すると、ゲーム自体が重くなってしまうことがあります。継続的な移動や変形をするだけなら、タイムラインやアニメーションを使ったほうが良いことが多いです。

## アクターを EventTick で動かす例

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/8dc612a6-472c-a33c-6a3b-8682efe358f9.png)

画面に Cube を配置して、Blueprint クラスを追加します。Cube の「詳細」で可動性を必ずムーバブルにしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/b720a257-cfdf-a4ef-12c6-62b152b05ba7.png)


EventTick イベント以下を上のように書きます。これで、UE4 のゲーム画面が更新されるたびに Velocity の分だけ Cube が移動するようになります。Z軸（高さ）が 1000 (cm) になるまで上に移動し、1000 cm になったら下方向に移動して、今度は Z軸が 0 (cm) になったら上に移動するようにしています。

このような感じで、EventTick を使うことでアクタを移動させることができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/3689b3c6-247a-41d6-4c93-03b556352213.png)

このような、アクタの位置を強制的に更新する方法では重力が無視されるので、動きが人工的になります。物理シミュレーションを使って「自然に」アクタを動かすには、AddImpuct のようなアクタに力を加えるノードを使います（後述、するかなー）。

# アクターをタイムラインを使って動かす

EventTick を使えば継続的にアクタを動かすことはできますが、往復運動のような比較的単純な動きをさせる場合は、タイムラインを使うか、アニメーションを使うほうが楽なことが多いです

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/dbb05b9d-8959-61b0-ddac-89d03d94b578.png)

タイムラインは、値が時間の経過に従って自動的に変わっていく変数のようなもの、と思えばたぶんだいたいあってます。イベントグラフで右クリックして Timeline と入力すると、タイムラインを追加するという項目があるので、それを選ぶことで追加できます。

## タイムラインへのトラックの追加と編集

、![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/9eb2838b-f628-ed2f-e31b-9983593c5273.png)

タイムラインのノードが追加されたら、ダブルクリックしてタイムラインを編集します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/a42d7b9a-9add-dc9a-fbe9-8dbb0b06e186.png)

最初にタイムラインのタブを開いた時点では、上のように何も中身がない状態になっています。「トラック」を追加することで、タイムラインが出力する値の種類を選べます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/0c62600d-8fbc-ea49-1db1-6b3fc43a5453.png)

ためしに左の「フロート」トラックを追加してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/e0df68a8-43c3-38fd-bfd4-1bf89a520927.png)

フロートトラックを追加すると、上のように時間経過に従って値をどのように変化させるかを編集できるトラックが追加されます。トラックの上でマウスのホイールを上下させることで、時間軸方向の拡大率を変更できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/41381daf-c18b-e7fd-5945-238cc8fde4a1.png)

トラック名がデフォルトで「新規トラック_0」とかなっているので、適当に変更します。ここでは Height としてみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/de7843b4-2f86-cd56-7135-68a871328e26.png)

「長さ」の値を変更すると、タイムラインの時間の長さを変更できます。ここでは 2 秒に設定してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/1d059e14-9c89-7568-619c-f79cc64bdf8a.png)

タイムライン内で右クリックすることで、キーフレームを追加できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/950cdfcf-1be8-b627-e23a-2ac20c78197c.png)

キーフレームを3つ追加して、1秒で値が1まで増えて、そのあとさらに1秒で0まで戻るようにしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/10f1b2b8-5f40-d091-f20f-35307a385045.png)

キーフレームの黄色いポチをクリックしてから、左上にある「時間」「値」の項目を直接編集することで、値を正確にいれることもできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/713b6cd6-c783-1150-9e60-492df0efd909.png)

右上の「オートプレイ」と「ループ」にチェックを入れておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/04c10e62-5f66-c30b-dde2-ccb8603154ee.png)

キーフレームで右クリックして、キー補間を追加することで、トラックの線を曲線的にすることもできます。

## タイムラインを使ったグラフの作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/12d05040-088e-8dc2-a695-fe2a884290dd.png)

イベントグラフに戻って、上のような感じでグラフを作ります。ポイントは、BeginPlay イベントの先にタイムラインをつなぐことです。うっかり EventTick につなぎそうになりますが、タイムラインノードはそれ自体が EventTick にように、タイムラインより後ろにつないだノードを毎フレーム実行するので、それではうまくいきません。

上のようにプログラムを書くと、ゲームスタートした直後からCubeが上下に移動します。オートプレイにチェックをしていないと、自動的には動き始めません（Play From Start にスタートのトリガーを入れる必要があります）。ループにチェックを入れていないと、上下に一度移動しただけで止まります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/abc781f6-106f-5469-6533-44e60edfada8.png)

# 知っておくと便利な関数（おまけ）

## 画面に文字を表示する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/965a01b1-2d7e-43a6-7587-f118db624069.png)

PrintString ノードや PrintText ノードを使うと、画面上に文字を表示できます。文字は自動的にスクロールして消えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/9b826caa-badd-e058-c5c6-92d62dd94243.png)

文字の表示は上のようになります。

## 一定時間の遅延を入れる（ウェイトを入れる）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/05525e18-1d7a-c9a9-a268-277118aa7a2c.png)

Delay を使うと前のノードを実行してから、一定時間だけ待って次のノードを実行させることができます。上のようなコードを書くと、Enter を押してから 1秒後に Enter と表示されます。

Delay はちょっとした遅延を入れるのには便利です。ただし、Delay ノードの後に実行されるノードでは、そのノードに入力される値が（遅延によって）予期しない値になることがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/85ad8c27-8e6f-4521-ad37-32521c231fe7.png)

こんな感じのコードを書いてプレイし、Enter キーを連打すると、連打のタイミングによって HOGE と表示されたり DELAY と表示されたりします。プログラムの見た目上は DELAY と表示されそうな感じがしますが、必ずしもそうなりません。

これは、Enter のイベントの処理が、非同期かつ重複して行われるためです。Enter イベント以下につながっているノードの処理がすべて終わっていなくても、Enter キーが押されると Enter ノード以下の処理が（並行して）実行されることから、このようなことが起こります。

具体的には、後段にある Delay を処理している間に Enter キーが押されると、すでの処理中の Enter イベント以下の処理（これを処理Aとします）とは別に、非同期で同じ処理が実行されます（これを処理Bとします）。処理Aの後段のDelayが処理されている間に、処理BのSTRにHOGEをセットする処理が実行されてしまうと、処理Aの出力結果は HOGE になってしまう、ということです。

このような、非同期処理とDelayの組み合わせはバグの原因になることが多いです。後述の SetTimer 関連のノードでも同じようなことは起きますが、Delay では同じ実行ラインの上にノードを並べるので、つい同じ値を取ると考えがちです。Delay を使用する際には、Delay の実行中に Delay と同じライン上で参照する変数の中身が変化することを考慮する必要があります。

## 一定時間の遅延の後に関数を実行する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/3406aa6b-7919-e9c0-ad0b-46582b8c3b04.png)

SetTimerByFunctionName を使うと、一定時間の経過後に、指定された関数を呼び出すことができます。上のようなコードをかくと、Enter を押した 5秒後に Print 関数が実行されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/862b8226-4f74-cfe8-c8dd-c4b537c4f658.png)

関数名は文字列で指定する必要があります。関数名が間違っていると、何も実行されません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/0e082922-1484-228b-e657-ae30c12aa53c.png)

Looping にチェックを入れると、指定した時間間隔で関数を繰り返し実行します。Loop に指定したタイマーを止めるには、PauseTimerByFunctionName を使います。

タイマーの時間間隔の変更は UpdateTimerByFunctionName で、タイマーを完全に停止させるには（クリアするには）ClearTimerByFunctionName を使います。

なお、SetTimerByFunctionName では引数に取る関数の引数を指定する方法がないため、引数のある関数を使うことはできません。しかしビルドエラーにはならないため、予期しないバグの原因になりやすいです。

## 一定時間の遅延の後にイベントを実行する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/593db01e-349e-4754-a0fe-1cc33c2c03d2.png)

SetTimerByEvent は SetTimerByFunctionName の Event 版です。javascript の SetInterval 関数によく似ています。イベントの赤い線を引く必要があるため、イベントグラフ内でしか使えません（関数内にはイベントが配置できないため）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266247/5f256cad-65f8-6460-c320-ae6861808ee1.png)

PauseTimerByEvent は、SetTimerByEvent の返り値を引数に取ります。上のように直接線をつながなくても、変数を経由しても問題ありません。

SetTimerByFunctionName と比べて、使い勝手の上では以下の点で異なります。

- 実行するイベントを文字列ではなく、直接線を引くことで実行するイベントを指定します。関数名のタイプミスによるバグが発生しにくいです。
- SetTimerByFunctionName は関数名でタイマーを管理するため、同じ関数を複数のタイマーで使うことができませんが、SetTimerByEvent のほうはハンドラーで管理するため、複数のタイマーで同じイベントを呼び出すことができます。

# 続いた

次回はアクター関連の予定です。