UnrealEngineをチュートリアル動画で学習する その7

# はじめに
UnrealEngineを学習するにあたってのメモを記事にまとめます。
本記事で最後です。

前回

https://qiita.com/Miyakovsky/items/0b86fbde497e1075e184

# 今回やること
UnrealEngineの公式サイトにあるLearningの「Your First Game In Unreal Engine 5」を題材に学習していきます。

https://dev.epicgames.com/community/learning/tutorials/e2V/your-first-game-in-unreal-engine-5


本記事では主に以下を扱います。
- 開閉するドアとスイッチの作成
- エフェクトの作成
- 画面揺れ


[開発環境]
windows 11
UnrealEngine 5.3.2

# Interaction Component
動画時間:1:01:22~

- 「コンテンツドロワー」を開いて、「GameElements」フォルダで右クリックして「ブループリントクラス/Actor」を選択する
- 作成したブループリントの名前を「BP_PressurePlate」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/8d11b157-ca2d-c067-9fca-d838a8cf47e4.jpeg)

- 「BP_PressurePlate」の編集エディターを開く
- 「コンテンツドロワー」を開いて、「Props」フォルダにある「SM_PressurePlate_Frame」「SM_PressurePlate_Platform」を「コンポーネント/BP_PressurePlate/DefaultSceneRoot」にドラッグ&ドロップして追加する
- 「SM_PressurePlate_Frame」を「DefaultSceneRoot」にドラッグ&ドロップで上書きする
- 「SM_PressurePlate_Frame」を選択し、「コンポーネント」の「追加」で「Box Collision」ほ追加する
- 「Box Collision」を選択してスケールを変更して、オブジェクトのサイズに合うように合わせる

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/482453e2-5734-5d81-ad5f-be6f86321313.jpeg)

- 「Box Collision」を右クリックして「イベントを追加」から「Component Begin Overlap」「Component End Overlap」を追加する
- 「Component Begin Overlap」「Component End Overlap」の実行にそれぞれ確認用の「Print String」を追加する
- コンパイルを実行して更新する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/188fa862-ea8d-569c-fbed-885a6ff1abf1.jpeg)

- Valleyレベル内に「BP_PressurePlate」をステージに設置する
- プレイボタンを押して実行して、「BP_PressurePlate」内に出入りするとデバック表示されるのが確認出来る

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/2f1e0981-ddd1-b44e-92d7-fcbf0f28b7d5.jpeg)

- 「BP_PressurePlate」の「イベントグラフ」に戻る
- 確認用設定した「Print String」を削除する
- ノードを「Add Timeline」を選択して「Timeline」ノードを追加して、名前を「PlateAnimation」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/d7fdd5c0-51da-4f2f-2e06-bf12f663303b.jpeg)


- 「PlateAnimation」をダブルクリックして、Timelineの編集エディタを開く
- 長さを「0.5」にする
- 「トラック」から「フロートトラックを追加」を選択し、名前を「PlateMovement」にする
- カーブエディターに2つのキーを追加する
- 1つ目をTime「0.0」、Value「0.0」にする
- 2つ目をTime「0.5」、Value「1.0」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/17cd9d81-884e-4ee5-7e93-8a0ec726fd3b.jpeg)

- イベントグラフに戻る
- コンポーネントの「SM_PressurePlate_Platform」をグラフ内に入れる
- 「SM_PressurePlate_Platform」から「Set Relative Location」ノードを追加する
- 「PlateAnimation(Update)」->「Set Relative Location(実行)」に接続する
- 「Multiply」ノードを追加する
- 「PlateAnimation(Plate Movement)」->「Multiply(実行)」に接続する
- 「Set Relative Location」の「New Location」を右クリックから「構造体ピンを分割」で分割する
- 「Multiply(実行)」->「Set Relative Location(Location Z)」に接続する
- 「Multiply」の値を「-10」にする(動画では-20だが後で-10になる)
- 「On Component Begin Overlap」->「PlateAnimation(Play)」に接続する
- 「On Component End Overlap」->「PlateAnimation(Reverse)」に接続する
- コンパイルを実行して更新する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/3b3e444f-1de2-e3d0-9494-b01c58a99b7a.jpeg)

- プレイボタンを押して実行して、「BP_PressurePlate」の上に移動する、アニメーションが入っているのが確認できる

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/47068d39-317a-b651-e837-a45412ecb49f.jpeg)

- 「コンテンツドロワー」を開いて、「GameElements」フォルダで右クリックして「ブループリントクラス/Actor」を選択する
- 作成したブループリントの名前を「BP_Door」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/4265f7ec-5d45-fd85-fa16-18f891858c44.jpeg)

- 「BP_Door」の編集エディターを開く
- 「コンテンツドロワー」を開いて、「Props」フォルダにある「SM_Modular_WallDoor」を「コンポーネント/BP_PressurePlate/DefaultSceneRoot」にドラッグ&ドロップして追加する
- 「SM_Modular_WallDoor」を「DefaultSceneRoot」にドラッグ&ドロップで上書きする
- 「コンテンツドロワー」を開いて、「Props」フォルダにある「SM_Door」を2つ「SM_Modular_WallDoor」にドラッグ&ドロップして追加するして、名前をそれぞれ「SM_Door_L」「SM_Door_R」にする
- 「SM_Modular_WallDoor」を選択して、「追加/Scene」でSceneを追加して、名前を「Anchor_L」にする
- 「Anchor_L」に「SM_Door_L」を入れる
- 「Anchor_L」の位置を「X=0.000000,Y=170.000000,Z=0.000000」にする
- 「SM_Modular_WallDoor」を選択して、「追加/Scene」でSceneを追加して、名前を「Anchor_R」にする
- 「Anchor_R」に「SM_Door_R」を入れる
- 「Anchor_R」の位置を「X=0.000000,Y=330.000000,Z=0.000000」に、回転を「X=0.000000,Y=0.000000,Z=180.000000」
- コンパイルを実行して更新する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/b3913b7d-2b62-1b18-aa96-44778888d798.jpeg)

- イベントグラフを開く
- すでにあるイベントのノードをすべて削除する
- ノードを「Add Custom Event」を選択して「Custom Event」ノードを2つ作成し、名前をそれぞれ「OpenDoor」「CloseDoor」にする
- ノードを「Add Timeline」を選択して「Timeline」ノードを追加して、名前を「DoorAnimation」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/6befe462-5066-0b83-ee60-2d00e7c6f01f.jpeg)

- 「DoorAnimation」をダブルクリックして、Timelineの編集エディタを開く
- 長さを「0.5」にする
- 「トラック」から「フロートトラックを追加」を選択し、名前を「DoorMovement」にする
- カーブエディターに2つのキーを追加する
- 1つ目をTime「0.0」、Value「0.0」にする
- 2つ目をTime「0.5」、Value「1.0」にする
- 2つのキーを選択状態にして、2つ目のキーに右クリックから「分割」を選択する
- カーブを徐々に上がるようにカーブ設定する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/888857bd-e89e-9f89-318c-69033afd0487.jpeg)

- イベントグラフに戻る
- コンポーネントの「SM_Door_L」「SM_Door_R」をグラフ内に入れる
- 「SM_Door_L」から「Set Relative Location」ノードを追加する
- 「On SM_Door_R」->「Set Relative Location(Target)」に接続する
- 「DoorAnimation(Update)」->「Set Relative Location(実行)」に接続する
- 「Multiply」ノードを追加する
- 「DoorAnimation(Door Movement)」->「Multiply(実行)」に接続する
- 「Set Relative Location」の「New Location」を右クリックから「構造体ピンを分割」で分割する
- 「Multiply(実行)」->「Set Relative Location(Location Y)」に接続する
- 「Multiply」の値を「-40」にする
- 「OpenDoor」->「DoorAnimation(Play)」に接続する
- 「CloseDoor」->「DoorAnimation(Reverse)」に接続する
- 「Event BeginPlay」ノードを追加する
- 「Delay」ノードを追加する
- 「Event BeginPlay」->「Delay(実行)」に接続する
- 「Delay」のDurationを「3.0」にする
- 「OpenDoor」ノードを追加する
- 「Delay」->「OpenDoor(実行)」に接続する
- コンパイルを実行して更新する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/a2aa12e1-3eb4-2bb6-408a-943aa6e2b345.jpeg)

- Valleyレベル内に「BP_Door」をステージに設置する
プレイボタンを押して実行して、3秒後にドアが開く

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/338f1410-49ec-d854-f0ad-4932f25c0bbc.jpeg)

- 「コンテンツドロワー」を開いて、「Framework」フォルダで右クリックして「ブループリントクラス/Actor Component」を選択する
- 作成したブループリントの名前を「BP_InteractionComponent」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/cd54e36b-f656-5116-4ed7-1b0793ce696d.jpeg)

- 「BP_InteractionComponent」の編集エディターを開く
- すでにあるイベントのノードをすべて削除する
- ノードを「Add Custom Event」を選択して「Custom Event」ノードを2つ作成し、名前をそれぞれ「StartInteraction」「StopInteraction」にする
- 「マイプループリント/イベントディスパッチャー」から追加して、名前を「OnInteract」にする
- 「OnInteract」を選択し、「インプット」の「追加」をして、名前を「on」にする
- 「OnInteract」をグラフにドラッグ&ドロップして「呼び出し」で追加する
- 「StartInteraction」->「Call On Interact(実行)」に接続する
- 「Call On Interact」の「On」をONにする
- 「Call On Interact」の複製を作る
- 「StopInteraction」->「Call On Interact(実行)」に接続する
- 「Call On Interact」の「On」をOFFにする
- コンパイルを実行して更新する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/cce92024-ec74-b756-35df-8d07c2d43577.jpeg)

- 「BP_PressurePlate」の編集エディターを開く
- 「コンポーネント」を追加で「BP_InteractionComponent」を追加する
- 「BP_InteractionComponent」をグラフにドラッグ&ドロップで追加する
- 「BP_InteractionComponent」から「Start Interaction」ノードを追加する
- 「On Component Begin Overlap」->「Start Interaction(実行)」に接続する
- 「Start Interaction」->「PlateAnimation(Play)」に接続する
- 「BP_InteractionComponent」から「Stop Interaction」ノードを追加する
- 「On Component End Overlap」->「Stop Interaction(実行)」に接続する
- 「Stop Interaction」->「PlateAnimation(Reverse)」に接続する
- コンパイルを実行して更新する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/9c722f4c-172d-bafc-887b-6476e8910d95.jpeg)

- 「BP_Door」の編集エディターを開く
- 「Event BeginPlay」に接続している「Delay」「Open Door」を削除する
- 「マイプループリント」の「変数」を追加し、名前を「Trigger」にし、変数の型を「Actor」にする
- 「Trigger」の目のアイコンをONにする
- 「Trigger」をグラフにドラッグ&ドロップして「Get」で追加する
- グラフの「Trigger」を右クリックして「検証済みゲッドに変換」を選択し「Get」に変換する
- 「Event BeginPlay」->「Get(実行)」に接続する
- 「Get Component by Class」ノードを追加する
- 「Get(Trigger)」->「Get Component by Class(Target)」に接続する
- 「Get Component by Class」の「Component Class」を「BP_InteractionComponent」にする
- 「? Is Valid」ノードを追加する
- 「Get Component by Class(Return Value)」->「? Is Valid(Input Object)」に接続する
- 「Get(Is Valid)」->「? Is Valid(Exec)」に接続する
- 「Get Component by Class(Return Value)」からノード作成で「Assign On Interact」を選択して「Bind Event to On Interact」「OnInteract_Event」を追加する
- 「? Is Valid(Is Valid)」->「Bind Event to On Interact(実行)」に接続する
- 「Branch」ノードを作成する
- 「OnInteract_Event(On)」->「Branch(Condition)」に接続する
- 「OnInteract_Event(実行)」->「Branch(実行)」に接続する
- 「OpenDoor」「CloseDoor」ノードを作成する
- 「Branch(True)」->「OpenDoor(実行)」に接続する
- 「Branch(False)」->「CloseDoor(実行)」に接続する
- コンパイルを実行して更新する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/546fcadd-352c-9672-f3d6-47f09f5fe600.jpeg)

- Valleyレベルを開く
- 「BP_Door」を選択し、「詳細/デフォルト」の「Trigger」を「BP_PressurePlate」にする
- プレイボタンを押して実行して、「BP_PressurePlate」の上に移動すると「BP_Door」が開き、「BP_PressurePlate」から離れると「BP_Door」が閉まる

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/76daa765-dcb6-93d3-a9bb-07b0647b864b.jpeg)

# Effects, Sounds & Camera Shake
動画時間:1:13:22~

- 「コンテンツドロワー」を開いて、「Content」内に「Effects」フォルダを作成する
- 「Effects」フォルダを選択する
- 右クリックから「FX/Niagaraシステム」を選択し、「空のシステムを作成」を選択し、名前を「FX_Dust」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/2a6f7f41-6f35-9868-de75-ed5360a1b378.jpeg)

- 「FX_Dust」の編集エディターを開く
- グラフ内の「FX_Dust/System State」を選択する
- 「詳細/LoopBehavior」を「Once」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/72a42ac1-668d-b991-490c-4f08ba6c9da5.jpeg)

- グラフ内で右クリックして、「エミットを追加/Empty」を選択する
- 「Empty」の「エミットの更新」の追加から「Spawn Burst Instantaneous」を選択する
- 追加した「Spawn Burst Instantaneous」を選択する
- 「詳細/Spawn Count」の値を「10」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/31e7579b-6a67-efc1-ae59-4512a598c6a8.jpeg)

- 「Empty」の「Spawn Burst Instantaneous」を選択する
- 「詳細/Point Attributes/Color Mode」を「Direct Set」に変更する
- カラーを「R:0.596 G:0.418 B:0.000」にする
- 「詳細/Sprite Attributes/Sprite Size Mode」を「Random Uniform」に変更する
- 「詳細/Sprite Attributes/Sprite Size Mode/Uniform Sprite Size Min」を「2.0」に変更する
- 「詳細/Sprite Attributes/Sprite Size Mode/Uniform Sprite Size Max」を「4.0」に変更する
- 「詳細/Point Attributes/Mass Mode」を「Random」に変更する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/1e6f3f12-1bd9-4718-5668-6914b66437cd.jpeg)

- 「Empty」の「パーティクルのスポーン」の追加から「Add Velocity」を選択する
- 「Add Velocity」の詳細に出ているエラーを「問題を修正」で解決する
- 「詳細/Add Velocity/Velocity Mode」を「In Cone」に変更する
- 「詳細/Cone/Cone Axis/x」を「-1.0」に変更する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/98942590-e87f-2b95-0e1b-b88fef397995.jpeg)

- 「Empty」の「パーティクルの更新」の追加から「Scale Sprite Size」を選択する
- 「Scale Sprite Size」の「詳細」のカーブエディターの右の2つ目のノードを選択する
- キーデータのYを「15」に変更する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/c7005bed-8d2e-aaea-009e-21fb73a02533.jpeg)

- 「Empty」の「パーティクルの更新」の追加から「Curl Noise Force」を選択する
- 「Curl Noise Force」の「詳細/Curl Noise Force/Noise Strength」を「15」に変更する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/d189777e-688b-fc19-58dc-d65f413d171e.jpeg)

- 「Empty」の「パーティクルの更新」の追加から「Gravity Force」を選択する
- 「Gravity Force」の「詳細/Gravity Force/Gravity/Z」を「30」に変更する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/9821e805-6866-591c-e70a-75011a33ca62.jpeg)

- 「Empty」の「パーティクルの更新」の追加から「Scale Color」を選択する
- 「Scale Color」の「詳細/Scale Color/Scale Alpha」に「Float from Curve」でカーブエディターを追加する
- カーブエディターの右の2つ目のノードを選択する
- キーデータのXを「0.6」に変更する
- アセットの保存をする

- 「コンテンツドロワー」を開いて、「Character/A_Antbot_Run」を開く
- アニメーションを20%くらいで停止する
- トラック「1」に 、停止しているタイミングの位置に右クリックして「通知を追加/Play Niagara Particle Effect」を追加する
- 追加した「Play Niagara Particle Effect」を選択して、「詳細/NiagaraSystem」に「FX_Dust」を選択する
- 「詳細/Socket Name」に「foot_r」を選択する
- アニメーションを71%くらいで停止する
- トラック「1」に 、停止しているタイミングの位置に右クリックして「通知を追加/Play Niagara Particle Effect」を追加する
- 追加した「Play Niagara Particle Effect」を選択して、「詳細/NiagaraSystem」に「FX_Dust」を選択する
- 「詳細/Socket Name」に「foot_l」を選択する
- アセットの保存をする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/4ce9dff7-1c5d-2f32-84a0-55ae9d056cab.jpeg)

- プレイボタンを押して実行して、走ると追加したエフェクトが発生する
- 「コンテンツドロワー」を開いて、「Content」内に「Audio」フォルダを作成する
- 「編集/プラグイン」で「MetaSound」があることを確認する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/b670a58a-8e07-e3f9-8b09-0f25f1e47dcc.jpeg)

- 「Audio」フォルダを選択する
- 右クリックして、「オーディオ/MetaSoundソース」を追加して名前を「SFX_FootStep」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/b8385886-3a42-21b7-26e7-b04c7a96fe71.jpeg)

- 「SFX_FootStep」の編集エディターを開く
- 「Noise」を追加する
- 「Noise」のタイプを「White Noise」にする
- 「AD Envelope(Audio)」を追加する
- 「Input」->「AD Envelope(Audio)(Trigger)」に接続する
- 「Multiply(Audio)」を追加する
- 「AD Envelope(Audio)(Out Envelope)」->「Multiply(Audio)」に接続する
- 「Multiply(Audio)」->「Output」に接続する
- 「AD Envelope(Audio)」の「減衰時間」を「0.3」、「AttackCurve」を「0.1」、「DecayCurve」を「0.2」に設定する
- 「Square(矩形波)」を追加する
- 「Square」の「周波数」を「10.0」、「パルス幅」を「1.0」に設定する
- 「Add(Audio)」を追加する
- 「Square(オーディオ)」->「Add(Audio)」に接続する
- 「Add(Audio)」->「Multiply(Audio)」に接続する
- 「Multiply(Audio by Float)」を追加する
- 「Multiply(Audio by Float)」の値を「0.1」に設定する
- 「Noise(Audio)」->「Multiply(Audio by Float)」に接続する
- 「Multiply(Audio by Float)」->「Add(Audio)」に接続する
- アセットの保存をする
- オーディオの再生ボタンを押して音を確認する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/81b654b9-39de-182c-676f-d8caa9959c1a.jpeg)

- 「コンテンツドロワー」を開いて、「Character/A_Antbot_Run」を開く
- 「通知トラックを挿入」をしてトラクック「2」を作る
- トラクック「2」に、20%くらいの位置に「PlaySound」を追加する
- 追加した「PlaySound」を選択して、「詳細/アムニノーティファイ/Sound」に「SFX_FootStep」を選択する
- トラクック「2」に、71%くらいの位置に「PlaySound」を追加する
- 追加した「PlaySound」を選択して、「詳細/アムニノーティファイ/Sound」に「SFX_FootStep」を選択する
- アセットの保存をする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/53274235-f776-4b9f-d382-e1ff1e8bd910.jpeg)

- プレイボタンを押して実行して、走ると追加したサウンドが鳴る

- 「コンテンツドロワー」を開いて、「Effects」フォルダを選択する
- 右クリックして、「プループリント/DefaultCameraShakeBase」を選択し、名前を「CamerShake」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/aac0badc-ac66-de77-1d82-bafab60a7f90.jpeg)

- 「CamerShake」の編集エディターを開く
- 「詳細/Root Shake Pattern/Timing」の「Duration」を「0.1」、「Blend in Time」を「0.01」、「Blend Out Time」を「0.05」に設定する
- 「詳細/Root Shake Pattern/Location」の「Location Amplitude Multiplier」を「8.0」、「Location Frequency Multiplier」を「12.0」に設定する
- コンパイルを実行して更新する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/0b2dede6-3d90-a4cb-1060-7dd8aa678581.jpeg)

- 「BP_Door」の編集エディターを開く
- 「PlayWorldCameraShake」ノードを追加する
- 「SetRelativeLocation(実行)」->「PlayWorldCameraShake(実行)」に接続する
- 「PlayWorldCameraShake」の「Shake」を「CamerShake」に設定する
- 「GetActorLocation」ノードを追加する
- 「GetActorLocation」->「PlayWorldCameraShake(Epicenter)」に接続する
- 「PlayWorldCameraShake」の「OuterRadius」を「10000」に設定する
- コンパイルを実行して更新する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/2654ed0d-8867-7ff7-7b82-801d9686a24f.jpeg)

- プレイボタンを押して実行して、ドアを開くと画面揺れが発生する


以上、終了