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

# はじめに
UnrealEngineを学習するにあたってのメモを記事にまとめます。
本記事では完結せず何回か分けて記事にする予定です。

前回

https://qiita.com/Miyakovsky/items/a2e080c94baa62439084

# 今回やること
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

# Gameplay Framework
動画時間:27:18~

- 「編集」->「プロジェクト設定」->「プロジェクト」->「マップ&モード」
- 「Default Maps」にある「エディタのスタートマップ」と「ゲームのデフォルトマップ」に作成した「Valley」に設定する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/ec2c842e-ae17-d6b1-31fe-0ab3f2d46192.jpeg)

- 「コンテンツドロワー」を開いて、「コンテンツ」フォルダに「Framework」フォルダを作成する
- 「Framework」フォルダで右クリックして「ブループリントクラス」を選択する
- 「親クラスを選択」で「Game Mode Base」を選択する
- ファイル名を「BP_GameMode」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/4672d2ae-c2a4-a1bd-9d3a-064cf0e6ee3c.jpeg)

- 「Framework」フォルダで右クリックして「ブループリントクラス」を選択する
- 「親クラスを選択」で「Character」を選択する
- ファイル名を「BP_Bot」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/c9fe9c97-26df-9af0-6d99-86f91f67a5ba.jpeg)

- 「Framework」フォルダで右クリックして「ブループリントクラス」を選択する
- 「親クラスを選択」で「Player Controller」を選択する
- ファイル名を「BP_PlayerController」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/c06e414f-4bbe-5376-019c-ba1795b8741d.jpeg)

- 「BP_GameMode」をダブルクリックして編集エディタを開く
- 「詳細」の「Player Controller」を先ほど作成した「BP_PlayerController」を設定する
- 「詳細」の「Default Pawn Class」を先ほど作成した「BP_Bot」を設定する
- 変更を適応して保存する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/eb09d5b4-a553-e0b6-d8f7-e0bf5b5e68c8.jpeg)

- 再び「プロジェクト設定」の「マップ&モード」を開く
- 「Default Modes」の「デフォルトのゲームモード」を「BP_GameMode」に設定する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/33e4a848-1363-f942-c67d-a4b9a6beed21.jpeg)

- 「オブジェクト追加」->「基本」->「PlayerStart」を選択する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/4234a83a-0b57-b1ca-8075-e2e16b10e6e6.jpeg)

:::note info
「END」キーを押すと選択したオブジェクトが地面につく
:::

- プレイボタンを押すカメラの視点がPlayerStartの視点になる



# Camera
動画時間:30:40~


- 「BP_Bot」をダブルクリックして編集エディタを開く
- 「詳細」の「レンダリング」の「Hidden in Game」のチェックを外す
- 変更を適応して保存する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/7976182a-3c27-15c3-cbdf-e303076330f6.jpeg)

- プレイボタンを押すとプリミティブが表示されている
- シミュレーション中にイジェクトボタンを押すことでプレイ可能なキャラクターのコントロールを解除し、マウス カーソル コントロールに切り替えることが出来る

:::note info
エディタでゲームを実行するためのショートカット ボタンは左から
[プレイ、スキップ、停止、イジェクト]
[プレイとシミュレート](https://dev.epicgames.com/documentation/ja-jp/unreal-engine/playing-and-simulating-in-unreal-engine)
:::

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/539bc5f8-6d91-475c-294e-b660aa26be94.jpeg)

- 「BP_Bot」の編集エディタを開く
- 「コンポーネント」の「Add」から「Spring Arm」を追加する
- 「コンポーネント」の「Spring Arm」を選択して「Add」で「Camera」を追加する
- 「コンポーネント」の「Spring Arm」を選択して「Transform->Rotation->Y」を「-50」に、「カメラ->Target ArmLength」を「2000」に設定する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/607dcca0-46b8-c84d-4890-0f04c0cd6ffa.jpeg)

- 「コンポーネント」の「Camera」を選択して「Field Of View」を「45」に設定する
- 「コンポーネント」の「Spring Arm」を選択して「Do Collision Test」を「Off」に設定する
- 「BP_Bot」のコンパイルを実行する
- プレイボタンを押してカメラが離れているを確認できる

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/20993b28-d606-bc33-6326-914a58afc7ff.jpeg)


# Movement
動画時間:32:33~

- 「BP_PlayerController」の編集エディタを開く
- 「Print String」ノードを作成して、「Event BeginPlay」に接続する
- プレイボタンを押すと画面左上に「Hello」と1回だけ表示される

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/ef12c536-dc21-0fcc-863b-461ec616e8b8.jpeg)


- 「Print String」を、「Event Tick」に接続する
- プレイボタンを押すと画面左上に「Hello」と連続で表示される

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/9d0158ed-b961-6d94-5f3e-0158e5415693.jpeg)


- 「Get Controlled Pawn」ノードを追加する
- 「Add Movement Input」ノード作成し、「Get Controlled Pawn」->「Add Movement Input(Target)」に接続する
- 「Event Tick」->「Add Movement Input(実行)」に接続する
- 「Add Movement Input」の「WorldDirection」の「X」を「1.0」にする
- プレイボタンを押すとカメラが移動するのを確認できる
- 「Get Hit Result Under Cursor by Channel」作成する
- 「Break Hit Resul」ノードを追加する
- 「Get Hit Result Under Cursor by Channel(Hit Result)」->「Break Hit Resul(Hit)」に接続する
- 「Get Action Location」ノードを追加する
- 「Get Controlled Pawn」->「Get Action Location(Target)」に接続する
- 「Get Unit Direction」ノードを追加する
- 「Get Action Location」->「Get Unit Direction(From)」に接続する
- 「Break Hit Resul(Location)」->「Get Unit Direction(To)」に接続する
- 「Get Unit Direction」->「Add Movement Input(World Direction)」に接続する


![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/9dba8ebe-434e-acb1-2b46-a464f031edec.jpeg)

- プレイボタンを押すとカメラがマウスの位置に向かって移動するのを確認できる
- 「BP_PlayerController」の「詳細」の「Show Mouse Cursor」をONにすることでマウスカーソルが非表示にならない

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/b1d73daa-c95d-f948-d5ed-3829b97285c2.jpeg)

# Input
動画時間:35:20~

- 「編集」->「プロジェクト設定」->「インプット」->「バインディング」->「アクションマッピング」を追加
- アクションの名前を「ToggleInput」にする
- 「ToggleInput」を展開して、キーボードアイコンをクリックして、マウスアイコンに変える

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/51676a97-5aa3-9afc-266a-931694761b44.jpeg)

- 「BP_PlayerController」の編集エディタを開く
- 「InputAction ToggleInput」ノードを追加する
- 「マイブループリント」の「変数」に「AddMovement」名のBoolean変数を追加する
- 「AddMovement」変数をD&Dして、「Set AddMovement」を選択する
- 「AddMovement」ノードをコピーして2つにする
- 片方の「AddMovement」ノードのチェックをONにする
- 「InputAction ToggleInput(Presssed)」->「AddMovement(ON)」に接続する
- 「InputAction ToggleInput(Released)」->「AddMovement(OFF)」に接続する
- 再度「AddMovement」変数をD&Dして、「Get AddMovement」を選択する
- 「Branch」ノードを追加する
- 「(Get)AddMovement」->「Branch(Condition)」に接続する
- 「Event Tick」->「Branch」に接続する
- 「Branch(True)」->「Add Movement Input(実行)」に接続する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/b9243599-3892-851a-1edb-e10aa3b737d3.jpeg)

- プレイボタンを押すと、カメラが左クリックすると移動するのを確認できる

# Character Setup
動画時間:37:07~

- コンテンツドロワーを開き、「コンテンツ」フォルダ内に「Character」フォルダを作成する
- インポートを押して、素材フォルダから「Character/SKM_Antbot.fbx」を選択して開く
- インポート設定の「詳細設定」の「Create Pysics Asset」をOFFにして、インポートする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/92b77e97-1c34-9187-39aa-cd5c8c9e3e6b.jpeg)

- 「M_BotBase」マテリアルの編集エディタを開く
- 「Character」フォルダ内に「T_Antbot_Albedo.png」「T_Antbot_Atlas_Eyes.png」「T_Antbot_Face_C.png」「T_Antbot_M_R_AO.png」「T_Antbot_Normal.png」「T_Bot_Masks.TGA」をインポートする
- 「T_Antbot_Albedo.png」を「M_BotBase」に入れる
- 「Base Color」に接続していた「Param」ものを切る
- 「Blend_Overlay」ノードを追加する
- 「T_Antbot_Albedo(RGM)」->「Blend_Overlay(Base(V3))」に接続する
- 「Param」のカラーをオレンジにして、「Param」->「Blend_Overlay(Blend(V3))」に接続する
- 「Blend_Overlay(Result)」->「Base Color」に接続する
- 「適応」して、「SKM_Antbot」を開いて編集内容を確認する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/b191d28b-0866-29ec-2ca9-ba6a48f47e95.jpeg)

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/11acc300-eef0-b692-4672-59330b527f36.jpeg)

- 「T_Antbot_M_R_AO.png」を「M_BotBase」に入れる
- 「T_Antbot_M_R_AO(R)」->「Metallic」に接続する
- 「T_Antbot_M_R_AO(G)」->「ラフネス」に接続する
- 「T_Antbot_M_R_AO(RBGA)」->「アンビエントオルクージョン」に接続する
- 「適応」して、「SKM_Antbot」を開いて編集内容を確認する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/bea3d069-63b0-abea-31da-d4301a355f83.jpeg)

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/0ce254c5-8b88-1856-16fb-acae4e499e94.jpeg)

- 「T_Bot_Masks.TGA」を「M_BotBase」に入れる
- 「Lep」ノードを追加する
- 「T_Bot_Masks(G)」->「Lep(Alpha)」に接続する
- 「T_Bot_Masks(G)」->「Lep(Alpha)」に接続する
- 「Blend_Overlay(Result)」->「Lep(A)」に接続する
- 「Lep」->「Base Color」に接続する
- 「3」キー+「左クリック」で「Constant3Vector」ノードを作成する
- 「Constant3Vector」の色をグレーに変える
- 「Constant3Vector」->「Lep(B)」に接続する
- 「適応」して、「SKM_Antbot」を開いて編集内容を確認する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/f1ff22b9-1bbb-358f-ef87-0be92c9ffbcc.jpeg)

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/f0552b79-bba1-27e4-cb5f-f0e9eb941829.jpeg)

- 「T_Antbot_Normal.png」を「M_BotBase」に入れる
- 「T_Antbot_Normal」->「Normal」に接続する
- 「Multiple」ノードを追加する
- 「T_Bot_Masks(R)」->「Multiple(A)」に接続する
- 「Multiple」->「エミッシブカラー」に接続する
- 「3」キー+「左クリック」で「Constant3Vector」ノードを作成する
- 「Constant3Vector」の色を水色に変える
- 「Constant3Vector」->「Multiple(B)」に接続する
- 「適応」して、「SKM_Antbot」を開いて編集内容を確認する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/612a1f2b-a2c2-e61f-4a05-520303987391.jpeg)

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/eb88320a-b765-6867-f2ee-d46890099b34.jpeg)

- 「MI_BotFace」マテリアルの編集エディタを開く
- 「T_Antbot_Face_C.png」を「MI_BotFace」に入れる
- 「T_Antbot_Atlas_Eyes.png」を「MI_BotFace」に入れる
- 「Add」ノードを追加する
- 「T_Antbot_Face_C(RGB)」->「Add(A)」に接続する
- 「Add」->「エミッシブカラー」に接続する
- 「Multiple」ノードを追加する
- 「T_Antbot_Atlas_Eyes(A)」->「Multiple(A)」に接続する
- 「Param」->「Multiple(B)」に接続する
- 「Param」の色を水色に変える
- 「Multiple」->「Add(B)」に接続する
- 「FlipBook」ノードを追加する
- 「FlipBook(UVs)」->「T_Antbot_Face_C(UVs)」に接続する
- 「1」キー+「左クリック」で「Constant」ノードを作成する
- 「Constant」のValueを「4」にする
- 「Constant」->「FlipBook(Number of Rows)」に接続する
- 「Constant」->「FlipBook(Number of Columns)」に接続する
- 「1」キー+「左クリック」で「Constant」ノードを作成する
- 「Constant」->「FlipBook(Aniation Phase)」に接続する
- 「適応」して、「SKM_Antbot」を開いて編集内容を確認する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/07fba9da-7912-ec84-2b10-05c6bd698a0d.jpeg)

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/8854534f-3294-01b6-b6aa-8567831ba241.jpeg)


次回

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