Unreal Engine 5 チュートリアルをやってみた

# 序章

いろいろな情報が落ちていますが、何から試したらいいか、わからなかったので、頑張って["Your First Game In Unreal Engine 5 Tutorial"(本家に飛びます)](https://dev.epicgames.com/community/learning/tutorials/e2V/your-first-game-in-unreal-engine-5)をひたすら実行することにしました。

せっかく確認しながら進めるので、気になるところをメモしていきます。直訳・翻訳ではなく、やったことの記録になります。翻訳ではないので、あしからず。

お断り
- 5.1.1で実行しました
- Windows版です
- 画面は、英語モードです
- 用語はめちゃくちゃです。理解が進んだ際には、更新します

このあと、いろいろ試す機会があり、こちらを仕上げるモチベーションが下がったため、当初の下書きのまま載せます。表記が揃っていなかったり、用語が間違っているままです。あしからず。

# 事前準備
インストールに関しては、色々情報があるので割愛します。おそらく、Windows版でもLinux版でも、どちらでも対応できます。

通常の作成操作自体は、CPUパワーが重要な印象です。ただ、シミュレートする(プレイボタンを押す)ときには、GPUパワーがないと、パラパラマンガになります。

## Stack-O-Botの入手
[Stack-O-Bot](https://www.unrealengine.com/marketplace/ja/product/stack-o-bot)本体を使うわけではなく、その中にあるアセット(FirstGameInUE5_Source.zip)が目的です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/dcfcca9f-9db3-e951-1397-0887639a83f0.png)

ダウンロード(ランチャーで開く)をして、プロジェクトを作成すると、作成したプロジェクトのフォルダの下に、FirstGameInUE5_Source.zipが配置されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/4d36953e-9af9-64d4-c778-ce63888082e2.png)

ここから、どこか好きなところにUnzipしておきます。このあと、チュートリアル内部で、Content Browserからパーツを呼び出します。

Stack-O-Botを起動するためのランチャー自体が、Linux版にはないので、zipファイルの入手には、WindowsかMacが必要そうです。(本来はLinux Loverですが、このため、UE5はWindowsにも入れました)
また、Stack-O-Bot自体も結構なサイズなので、容量に不安がある場合は、zipファイルを退避させたあと、消しても構いません。

# チュートリアル
## はじめの一歩
UE5を起動した後、画面に従って、新規プロジェクトを立ち上げます。Games->Blankを選択です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/c4476926-c8b5-cbba-16a8-3ebb47221ce3.png)

起動直後
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/bc7047d2-ba2b-9e4a-deb1-f5ed05878c47.png)

ここから、この土地を更地にします。

```
File -> New Level (CTRL+N) -> Empty Level
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/76cd213d-59e6-f10b-de0f-326c067655a9.png)
セーブするかと聞かれますが、不要なので、しません。すると、真っ暗なLevelが完成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/8c70d137-28f2-7433-35ce-3c5a7008c326.png)

## Lighting (1:15近辺)
ベースとなるオブジェクトを選択します。画面では、sphere選択しています。プルダウンメニュー開いているどこかで、"sphere"とタイプすると、勝手に、サーチが始まり、対象が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/ca6f5832-f48f-782e-87ac-1c645c829ab9.png)
ここでは、画面に従って、Shapesからsphereを選択します。(このあと、Landscapeに差し替えるので、なんでもいいといえば、なんでもいいです。なんなら、cubeを選んだほうが、ちょっとだけ楽です)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/8cd75a6b-6ac2-ed80-5764-663d379261b7.png)
このあと、ライトを追加していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/6760b58f-92f2-1a01-2ae3-d4991c8ffb39.png)

Env. Light Mixerを選択して、そのあとのダイアログボックスのアイテムをすべて選択します。

- Create Sky Light (空の光加減, 乱反射生成?)
- Create Atmospheric Light (DirectLightのこと。光源?)
- Create Sky Atmosphere (空?)
- Create Volumetic Cloud (雲?)
- Create height Fog (空の描写を画面全体へ展開?)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/a831fe4c-5124-3e6e-1afb-fc10c6590920.png)
アイテムラベルのお目々をOn/Offすると、効果がわかるので、試してみてください。

光の状態をリアルタイムでの反映を期待する場合は、Real Time CaptureをOnにします。

```
SkyLight->Light->Real Time Capture -> CheckBox On
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/7d673fc3-3dd6-600e-c5a5-fee974382e12.png)

最後に、アイテムを整理して、作業をセーブして、この章は終わりです。

Item Labelにて、フォルダを作って、ライト関係のアイテムを押し込みます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/b078dc1c-3632-51c1-fc42-a59de51da9fb.png)

ここまでの内容をMapsフォルダーにセーブします。
フロッピーディスクボタンを押すと、"Save Level As"ダイアログが現れます。
```
(new folder) --> Maps (と命名) --> Name (Valley) --> Save
```
コンテンツフォルダに、フォルダ(Maps)を新設して、その下に、Valleyという名でセーブします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/df561bd7-444b-1e6e-2ab2-862ab0e63427.png)

セーブ完了です。初めてだと、ここまででもお腹いっぱいです。そのそも、画面がスムーズに動かないです。


## First Asset (3:37近辺)
今度は、オブジェクト(?)の生成に移ります。かばんみたいなオブジェをつくります。BluePrintの操作も始まります。

まず、オブジェに関わるアイテムを保存するフォルダを作ります。チュートリアルでは、Propsにしています。のちほど、Stack-O-botから引っ張ってきたアイテムを登録(import)していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/f049b54a-68f4-6c06-9cdd-3f74a687f441.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/ebef7e64-a094-39b4-de8d-5d540be3db39.png)
デフォルトから変更必要はないので、そのままimportをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/98c1f531-611b-4b91-9639-81d5352c84b0.png)
以下の要素が追加されます。
- M_Carbon (カーボン素材部分, かばん本体)
- M_Metal (メタル素材部分, かばん、ふた？の部分)
- M_Plastic (かばんの角)
- SM_Crate (かばんの全貌)
このあと、それぞれの要素に対して、色を付けたり、表面の塩梅(反射の具合や素材など)を操作していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/b169e645-064e-034f-9bd4-a06b505e2e74.png)
はじめの状態です。このあと、各要素を操作することによって、角に色がついたり、本体の色や表面素材が変更されたり、反射素材がつけられたりします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/3818f21a-0e42-f889-3012-2b821f69eb0c.png)
テクスチャをImportします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/d250c68e-620d-f9c9-f86d-fbcb3817ba9d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/2de2a7d6-513f-95d9-1b68-7d3b1e40bf14.png)
すると、2つアイテムが増えました。T_Grunge_AとT_Plastic_Nです。これらを利用して、角のプラスティックの色合いを変更します。これらを、T_Plastic_NのRGBをNormalへ、T_Grunga_AのRGBをRoughnessと、画面の指示通りに配置します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/d5549c48-67b9-a6c2-5cd8-798fc4e9b18d.png)

T_Plastic_Nでデコボコ感、T_Grunga_Aでざらざら感を出しているようです。
このあと、上下にメタリックな質感、本体にメッシュの質感をつけていきますが、いずれも似たような操作(Roughnessへの紐付けと、Normalへの紐付け)を行っていきます。

Metalの操作中。Metalicに1を入れて、roughnessに0を入れると、ピカピカに輝く表面になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/e90e63f3-015e-d177-c800-41dbcd423053.png)
このあと、調整パラメータ(UVs)の入力を行います。画面のどこでもいいので、右クリックして現れるダイアログボックスに"coor"とタイプすると、"TextureCoordinate"が選択されるので、選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/045d46e2-e1f8-4a41-3e8e-0f9ac807a9b7.png)
そして、現れたTexCoordに対して、U=5, V=5を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/4d74231c-4c5d-8d2b-4481-a576fd321e13.png)
表面がデコボコになりました。途中で、Applyを押すと、取り込んでいるアイテム側の設定が変わります。今の設定でできているかばんはこのような感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/1cfc3dc6-5c93-72d2-259f-12e3a8790e0c.png)
画面で言われている操作を進めて、最後に本体の加工に入ります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/ca942453-7f3b-6bdd-c2a3-da5ce1e2b8e0.png)
言われたとおりに設定して(映像では80ですが、ここでは120を設定)、applyします。すると、このような感じに仕上がります。 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/7e4296cb-f220-0543-fec4-4c7f9fa0e366.png)
本家では、ツートーンカラーになっていますが、なぜか、単色です。気にしないでおきます。

このあと、このかばんをValleyへ展開してきます。

まず、最初に設置したSphereを、cubeへ置き換えます。

```
Sphereを選択 -> 右クリック -> Replace Selected Actors with -> Cubeを選択
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/18115a4e-77b9-7ec7-cdd7-aa41aa074eb0.png)
このとき、以前選択していないアイテムは表示されません。スクショでは、いろいろいじったので表示されています。そのため、適当に選択しておく必要があります。これが、冒頭でcubeを選択しておいてもいいかも、という話につながります。
なお、Sphereのままでもよさそうなのですが、かばんが弾んでくれないので、実験としては面白くないです。そのあと、かばんを設置して、かばんの属性(Simulate Physicsをonにして、Mass(kg)を適当に重量)を設定すると、シミュレートできます。プレーボタンを押すと、かばんがcubeにぶつかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/1d4f095c-3f2e-05b5-68a7-7f95ad2a6ece.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/a06e677f-66ee-7541-c791-9443b18325db.png)

ここまでで、かばんの操作が終了です。(かばんとよんでいますが、crateは、箱という意味らしいです)


## BluePrints (9:59近辺)
複数のアイテムを操作するとき、先程の操作のように、画面にかばんをドラッグドロップして、パラメータ調整することで、対応することも可能ですが、ひとつひとつ行う必要があり、複数の同一オブジェクトを管理するには面倒です。ここでは、かばんをBluePrint内に組み込むことで、同一のキャラクターをもたせる、という操作を行います。

まず、BluePrintを保管するフォルダを作ります。そして、その中に、"Actor"属性のBluePrintを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/a00cc00a-36a6-29b9-ade1-cb5c5f42d071.png)
BP_Crateをダブルクリックして、編集モードにします。ここで、先程作成したかばん(StaticMesh属性)を追加します。

```
Components -> +Add -> "static" で検索 -> "static mesh"を選択 -> 
名前を"CrateMesh"へ変更 -> 左側へ移動して -> "Static Mesh”で"SM_Crate"を選択
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/9563c4c4-6b0b-eb3e-2574-a6711a189bb0.png)
すると、このような状態になります。先程のSM_Crateの編集画面に近いパラメータが左側に現れます。これに対して、先ほどと同じく、物理の法則と、自分の重さ、その他特性を設定していきます。

```
Simulate pysics -> ON
Mass (kg) -> 40
Linear Damping -> 0.1
Angular Damping -> 1.0
```


## Landscape (12:05近辺)
この章では、地形を組み立てていきます。
SphereからCubeに変換した床板を削除して、Landscapeを作成していきます。
```
Sphereを選択 -> DELキーで削除 --> 左上のドロップダウンメニューでLandscape Modeを選択
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/9d9d44b8-10a3-de96-c9d7-ca7d049573fe.png)
左にあるメニューから、ブラシのタイプやサイズ、効果などを調整しなから、起伏を作っていきます。Sculptを選択すると、盛り上がります。角を取りたいところにSmoothを当てると、丘のような形になります。
大体の形が完成したら、Landscapeのマテリアルを作ります。
```
Content Drawer -> new folder -> Landscapeフォルダを生成
Landscapeフォルダ選択 -> Create Basic AssetからMaterialを選択 -> M_Landscapeと命名
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/c0987452-f4de-60ec-c1d6-1684dfd45820.png)
視点を移動させたい場合は、Selectionに一度戻す必要があります。移動しては、Landscape Modeにして、加工する、という形を取ります。(訂正: Landscape Modeのまま、Manageにすると、移動できました)

マテリアルの詳細設定に移ります。M_Landscapeをダブルクリックして、エディタを起動します。
```
roughと入力 -> "Full Rough"チェックボックスをON
```
次に、landscapelayerblendを選択。
```
右クリック -> landblendを検索 -> LandscapeLayerBlendを選択
右メニュー Layer addで、SandとGrassの2つを登録する
3を押しながら左クリックを押して、ベクトル設定のアイテム表示。砂漠色なりそうな色を作成
Landscapeの中の、Landscape属性のうち、Landscape Materialに対して、ここで作ったM_Landscapeを適用
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/4deca0b7-5fbc-5306-0f59-54d5ea5f79d6.png)
ここで、Landscapeモードに戻って、作成したSand LayerとGrass Layerを使えるようにします。
```
Paint -> Target Layer -> Layers
Sandのほうに、Sand_layerInfoを追加します ("+"ボタンを押すと、登録に進みます)
Grassのほうに、Grass_layerInfoを追加します ("+"ボタンを押すと、登録に進みます)
```
そして、Grassを選択して、Paintモードで、緑にしたいところを塗っていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/f2bd4857-b145-0b06-18d0-0ed96e1c911c.png)
色塗りが終わったところで、今度は、表面加工に移ります。再び、M_Landscapeのエディット画面に戻って、BluePrintにT_Grass_MとT_SandTileable_BCをImportします。

この先、いろいろな技が登場します。まとめて紹介します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/1681a57d-9a75-cc9a-0b70-abd768adeee3.png)


<dl>
    <dt>WorldPosition</dt>
    <dd>座標位置を取得します。位置によって、微妙に表現を変えられます。</dd>
    <dt>Mask</dt>
    <dd>WorldPositionは、x,y,xで取得するので、そこから1値や2値を使いたいとき、どの値を使うか指定できます。ここでは、TextureのUVsに入力させるので、2値を取るように指定します。音声はxyzと言っていたと思いますが、設定は、RGBAになっています。設定は、R,Gを取ることにしています</dd>
    <dt>Divide</dt>
    <dd>これは、A÷Bをしているだけです。UVsに入れる前に、値の調整をしています。</dd>
    <dt>Linear Interpolate</dt>
    <dd>"L"を押しながら左クリックすると現れます。もしくは、Lerpと検索すると、linear interpolateが表示されるので、それを選択します。画面の通り、薄い緑、濃い緑、テクスチャを融合する機能のようです。パラメータはいじらないです。</dd>
    <dt>Named Route</dt>
    <dd>入力出力を分断できる機能のようです。GOTOのイメージを持ちました。ここでは、SandのTexture出力をNamed Sandに渡して、Lyer BlendのLayer Sandの入力にあてがっています。同様に、GrassもLerpからの出力をLayer BlendのLayer Grassの入力にあるGrassへ渡しています。</dd>
</dl>

WorldPositionでは、絶対値をとりこんでいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/3d4a0640-d6bd-3fc3-a9ca-ddeaf2be14fa.png)
MASKでは、R,Gを選択しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/e04a06ce-1b10-2bb5-32bf-907e7ce6fc97.png)

この他の技としては、左上の球へのプレビューです。Named SandやNamed Grassにpreviewの設定があります。それをOnにすると、球にプレビューが反映されます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/80ca8c3c-5516-f813-8def-171ac2d91aad.png)
Start Previewing Nodeとすると、球に状態が反映されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/510fc292-bbec-98e9-806b-cd4d7ba916b3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/acb579f2-5571-9a2d-bdc6-c54037f372b3.png)

ここまでが、ざっくり土地を作成する段階です。このあと、草と岩の詳細化をしていきます。


## Landscape Glass (18:19近辺)

まず、Environmentという新しいフォルダを作成し、Stack-o-BotのサンプルソースのEnvironment/GrassからSM_GrassClumpとT_GrassClumpをインポートします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/12fade64-701b-478e-5f96-bed3fd048c38.png)

このあと、インポートしたテクスチャとマテリアルを配置します。それと、M_Landscapeから緑の要素をコピペしてきます。このような感じになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/80e2c528-3482-beb7-fe26-21f293bf30df.png)
ここで変更したのは、M_GrassのBlend Modeです。(上画像の左下にあります)
```
Material->Blend Mode->Maskedへ変更
```

そのあと、これをLandscapeへ接続する操作を行います。

まず、Content DrawerへFoliage->Landscape Grass Typeを追加します。(画面では、すでにF_LandscapeGrassが作られています)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/267d567d-0e51-a5cf-0801-2190d49c391a.png)

F_LandscapeGrassにリネームしたあと、ダブルクリックして、プロパティを開きます。
```
Glass MeshにSM_GrassClumpを設定
Grass Densityを800に変更
Scale XをMin 0.1, Max 0.4に変更
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/4778bfbb-0713-6af7-3e3f-3c840f699f72.png)

M_LandscapeのBluePrintの画面へ移動し、作成したパーツを関連付けていきます。直訳すると、草に葉っぱをくっつけるというところでしょうか。
```
    背景を右クリックして検索ツールを表示
 -> "output grass"と検索
 -> "LandscapeGrassOutput"が表示されるので、選択
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/519c0daf-90e4-504b-266e-05941b480e0f.png)

生成したGrassに対して、F_LandscapeGrassを割り当てます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/792033a3-4964-04a4-5793-6f0486966dc8.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/8afad0b9-8699-fe8e-215e-c4a4b153071e.png)
このGrassOuputへ入力するものを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/d524f5d7-b4a6-8cc3-4e82-015dd71bb7f0.png)

Sample landと検索すると、LandscapeLayerSampeが選択されます。これをGrass Outputへ接続して、完成です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/9e7dcea2-a330-8eaa-f7f1-1879eb7d987e.png)

草がこのような感じで写ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/0a22feaa-89a5-a8f0-6e23-92eeba7659a1.png)

## Rocks (20:38近辺)

最初に、RockFlat01とT_RockTileable_BCをImportします。映像でも処理が重いと言っておりましたが、分単位で待たされました(RockFlat01が重い)。
RockFlat01をインポートする際、BuildNaniteをOnにします。その後、BluePrintで、依存関係を構築していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/0c6d3755-6a39-1a65-e631-75fa475fe971.png)
<dl>
    <dt>Mask(上部)</dt>
    <dd>今回は、G,Bをとっています。岩の筋の方向が、こちらのほうがいい、と映像ではいっておりました。</dd>
    <dt>Mask(中部)</dt>
    <dd>Sand生成時に使ったものをコピペしてきています。</dd>
    <dt>Mask(下部)</dt>
    <dd>VertexNormalWSから受け取る値のうち、Bだけを利用するように選択させます。</dd>
    <dt>Texture(上部: T_RockTileable)</dt>
    <dd>Importしたテクスチャです。とくに設定はないです。</dd>
    <dt>Texture(下部: T_SandTileable)</dt>
    <dd>Sand生成時に使ったものをコピペしてきています。</dd>
    <dt>Lerp</dt>
    <dd>"L"を押しながら左クリックでも現れます。3入力をマージしてくれます。</dd>
    <dt>VertexNormalWS</dt>
    <dd>VertexNormalWSで検索すると、でてきます。WorldPositionのように、WorldSpaceから値を生成します(頂点法線だそうです)</dd>
</dl>
このような岩になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/b478dd50-27dd-4038-ea9a-878471a0441a.png)

このあと、岩をLandscapeの中に埋めていきます。

岩のFoliageを作成します。Content DrawerのEnvironmentに、Static Mesh Foliageを追加して、F_FlatRockと名付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/e82b8175-810d-98e8-855b-8995340a9600.png)

登録したら、Editで、先程作ったRockFlatを紐付けます。Editで変更する項目は以下のとおりです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/5d93e2f8-3df3-1fb5-4424-ce5936c5c08a.png)

```
Mesh -> RockFlat_01
Z Offset -> -100,-100
Align To Normal -> Off
Affect Dynamic Indirect Lighting -> On
Affect Distance Field Lighting -> On
Collision Presets -> BlockAll
```
編集が終わったFoliageをFoliage ModeにしたLandscapeに登録していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/a3128aba-ed98-91b1-760f-1903b8bef384.png)

```
"+ Foliage" -> F_FlatRockを選択
```

登録後、Paintにて、ペタペタ岩を貼っていきます。
```
Density / 1Kuu -> 1-100 (1ブラシ操作で、どれくらいの岩を貼り付けるか設定。多めが良ければ100近傍)
Scale X -> Min 0.3, Max 0.6 (映像に従います。岩の大きさです)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/f3b8d6ef-70a0-7f45-a367-d77db5796655.png)
このような感じで、貼り付けました。

最後に、SM_Crateの属性を変更して終わりです。岩が、Naniteで表現されているので、かばん(Crate)もNanite化します。

```
Enable Nanite Support -> On
Apply Changes
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/1effa8a6-a81e-9f38-0d36-7f6b5a5f3cf1.png)

これで、この章はおしまいです。


## Vegetation (25:49近辺)
Stack-O-Botから、SM_Bush_FoliageTypeとSM_Tree_FoliageTypeを引っ張ってくる手順となります。
まず、Stack-O-Botのプロジェクト作成します。
そこから、次の手順を踏みます。
- SM_Bush_FoliageTypeとSM_Tree_FoliageTypeを選択
- Asset Actionsを選択
- Migrateを選択
- OKを選択 (表示されているものすべてをMigrateします)

すると出力先を聞いてくるので、適宜選択します。(FirstGameもしくはこの手順で使用しているフォルダが望ましい)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/44a4cc86-b6bc-2ae1-c1e3-8b651b1bf595.png)
Migrateが終わると、Contentの下に、StackOBotが作られています。これで、取り込み完了です。これらを使うには、Foliage Modeにして、それぞれを選択することになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/9cc24cbf-fc4d-f913-26bc-988193d45b7c.png)

```
"+Foliage"にて、SM_Brush_FoliageTypeとSM_TreeFoliageTypeを追加
```

登録後は、ブラシとオブジェクトの大きさの設定をしつつ、岩と同じ要領で、ポコポコ追加していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/1d115a3a-02d7-fa89-0959-f6ad4accd420.png)


## Gameplay Framework (27:19近辺)
ここでは、いろいろなパラメータを、独自のものに変えていく操作を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/65e09136-295b-160e-357a-8bdea2b14ef4.png)
プレーボタンを動かすと、黄色い表示のアイテムが増えます。これらが、デフォルトで補足されているパラメータとなります。これらは、Project Settings -> Project -> Maps&Modes -> Defalut Modes -> Selected GameModeで設定できます。これらに登録できるアイテムを作っていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/2d1a4bcc-aa42-4a7b-8c48-1bb69a08fd0f.png)

FrameworkというフォルダをContentの下に作り、BluePrint AssetのGame Mode BaseをBP_GameModeとして追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/a2ca9ec1-d03a-39a3-ac7f-f36bd1317add.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/dabe33fd-1113-9c77-ebc8-ea4e620c1aec.png)

同様に、CharacterをBP_Botとして、Player ControllerをBP_PlayerControllerとして登録します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/a3fac267-7a25-c006-ad0e-36b6931c4be6.png)

このあと、BP_GameModeを開きます。変更するポイントは次のとおりです。
- Player Controller Class -> BP_PlayerController
- Default Pawn Class -> BP_Bot

変更後、左上のCompileとsaveを押します。Save後、Project SettingsでPlayer Controllerを変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/194ce284-9c06-5550-bac1-4f2f28de9898.png)
先程作ったBP_GameModeがあるので、そちらを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/94f5bcbd-4ab3-e27a-06fe-19b0e8db6a0d.png)
Defalut Pawn ClassとPlayer Controller Classが、入れ替わったことが確認できます。

ここで、プレーヤーの最初の立ち位置を登録します。
```
PLACE ACTOR -> Basic -> Player Start
```
矢印がついたカプセルが登場するので、適当な位置に配置します。地面に接触した状態にしたい場合は、空中に浮かした状態で、ALT+ENDの同時に押すと、接地面まで落下します。低すぎると、BADsizeと表示して教えてくれます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/9b5c18c4-6fb4-e2e8-c497-0b4b2718cc21.png)

正しい位置では、フラッグとコントローラ表示です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/08933598-0cac-0d39-b1cf-0b40efc9d286.png)


## Camera (30:42近辺)
ここでは、カメラ位置の設定をします。映像にしたがうと、プレーヤー後方の45度上空からの映像になります。
BP_Botを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/69b83874-78df-e255-b25b-b09679f90311.png)
次の項目を変更します。
```
Rendering -> Hidden in Game
```

次に、カメラを設置していきます。spring armの下に、Cameraを配置します。

```
BT_Bot -> Add -> spring arm
Spring arm -> Add -> Camera
```

SpringArmを選択して、次の値を変更します。

```
Transform -> Rotation -> 0, -50, 0
Camera -> Target Arm Length -> 2000
Camera Collision -> Do Collision Test -> Off
```

Cameraを選択して、次の値を変更します。

```
Camera Settings -> Field Of View -> 45
```

このあと、プレーボタンを押すと、先程は、プレイヤー視線だったものが、上から見た映像になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/03c92ec1-b75e-c6dd-6499-47f75b78b1fe.png)


## Movement (32:33近辺)
動きを加えていきます。

<dl>
    <dt>Get Controller Pawn</dt>
    <dd>キャラクターの状態を入手します。</dd>
    <dt>Add Movement Input</dt>
    <dd>キャラクターを制御するモジュールです。Event Tickと動かすキャラクター(Target)と方向(World Direction)を設定します。</dd>
    <dt>Get Hit Result Under Cursor by Channel</dt>
    <dd>カーソルに追尾するように設定します。</dd>
    <dt>Break Hit Result</dt>
    <dd>進めない状態になったときの、跳ね返り処理を設定します。</dd>
    <dt>Get Actor Location</dt>
    <dd>キャラクターの現在位置を入手します。</dd>
    <dt>Get Unit Direction (Vector)</dt>
    <dd>キャラクターの現在とその他条件から、キャラクターの動く向きを決定します。</dd>
</dl>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/f59b4575-5e35-d1c3-7e00-feb2908b604c.png)

画面上にマウスカーソルを表示したい場合は、次の操作を行います。

```
BP_PlayerController (Self) -> Mouse Interface -> Show Mouse Cursor
```


## Input (35:20近辺)
Project Settingsで、Inputのパラメータをマウス(左クリック)へ変更します。

```
Project Settings -> Input -> Bindings -> Action Mappings -> "+"
 -> Rename "ToggleInput"
 -> Click Keyboard icon -> "Left Mouse Button"
```

BP_PlayerControllerのエディット画面に戻って、マウスからの制御を追加します。
最初に、左側My BlueprintのVARIABLESに"AddMovement"を追加します。


<dl>
    <dt>InputAction ToggleInput</dt>
    <dd>マウスの左クリックしたとき、リリースしたときの動作を定義します。次のSET AddMovementで状態を管理します</dd>
    <dt>SET (上部, SET AddMovement)</dt>
    <dd>マウスがクリックされたときの状態、Add MovementをOnにします。</dd>
    <dt>SET (下部, SET AddMovement)</dt>
    <dd>マウスがクリックされたときの状態、Add MovementをOffにします。</dd>
    <dt>Add Movement</dt>
    <dd>マウスの状態。Conditionとして、Branchへ入力します。</dd>
    <dt>Branch</dt>
    <dd>マウスの状態によって、Tickの制御を変えます。FalseをAdd Movement Inputから外すことで、マウスがOn出ない限り移動しない状態になります。</dd>
</dl>


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/a00903d0-4684-b264-7892-3824f438494b.png)


## Character Setup (37:08近辺)


Advancedを開いて、Create Pysics AssetをOffにします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/fa694ec4-815b-1077-ee3d-21a3f07455d0.png)

Importすると、4つのアイテムができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/d12cb994-0b63-e85d-775d-076e3848cbe5.png)

さらに、テクスチャをImportします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/532d7dbc-4959-c1cc-a66a-a83cb649fcf6.png)

M_BotBaseをエディタで開いて、表面の加工をしていきます。
もともとのStack-O-Botの中身がわかっていないので、ここまで来ると、画面をフォローしているだけの感じになっています。手順を踏むと
- 腕の色が、本体の色と異なる (ツートーンになる)
- 白いリングが光る
ようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/1204f565-d0a9-6d86-bec9-43b7b3de2c69.png)

T_Antbot_M_R_AOとT_Bot_Mask、T_AntBot_Albedoを開くと似たような絵が、異なる色で書かれているのがわかります。
T_Antibot_Albedoに対して、Paramで、オレンジを与えています。これで、オレンジ色のロボットになります。そのあと、T_Bot_Maskから、緑(G)要素を引っ張ってきて、グレーに置き換えています。これで、オレンジの一部をグレー化していることになります。
T_Antbot_M_R_AOは、名前が示している通り、Metalic, roughnessとAmbient Occlusionのデータが含まれています。そのまま、RはMetalic、Gはroughness、Bは、Ambient Occlusionへ入力します。
これで、ロボットに意図した色がつくようになっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/c86924e3-2865-01b0-9d3b-cce15bec5aa2.png)

この章の最後は、目の作成です。グレーになっている目を加工します。これは、MI_BotFaceで行います。
こちらも、Stack-O-Botの中身がぁ、という状態なので、そのまま操作します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/89f0312e-f182-742b-a4f6-e82db88fb26b.png)

T_Antibot_Face_Cにいわゆる白目の部分が、T_Antobot_Atlas_Eyesにいわゆる黒目のデータが入っています。
T_Antobot_Atlas_Eyesには、いろいろと目の形が入っているので、それをFlipBookにて選択しています。ここでは、目の状態は"1.0"、目の種類を"4.0"で選択しています。これで、黒目は丸型になります。
できたロボットはこのような具合です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/a1a38117-a50c-cc08-e13e-dd804f09aa43.png)

前の画像と比較すると、緑の目が入っていることがわかります。


## Character Movement (43:04近辺)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/6d19bdf0-c82d-296b-cb54-6297ef1b51d8.png)

正面の向きがずれていたので、修正します。(-90を入力)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/4faf63de-f198-9987-cd1c-aba3792d7c69.png)

それ以外にも、カプセルに収めるように、パラメータを調整します。

```
Capsule Component -> Shape -> Capsule Half Height -> 70 (高さを低く)
Capsule Component -> Shape -> Capsule Radius -> 25 (少し細く)
Mesh -> Transform -> Location -> -70 (高さに合わせて小さく)
Character Movement -> Character Movement (Rotation Setting) ->
  Orient Rotation to Movement -> On
  Z -> 420 (少し早く回転させる)
```

ロボットをカーソルに追従させるためには、UE5.1.1では、次の設定も必要でした。

```
BP_Bot -> Pawn -> Use Controller Rotation Yaw -> Off
```

さらに、パラメータの調整を行います。

```
Character Movement ->
Character Movement (General Settings) -> Max Acceleration -> 500
Charcter Movement: Walking -> Max Step Height -> 60
Charcter Movement: Walking -> Walkable Floor Angle -> 60
Charcter Movement: Walking -> Ground Friction -> 0
Charcter Movement: Walking -> Max Walk Speed -> 400
Charcter Movement: Walking -> Braking Deceleration Walking -> 800
```

## Animation (45:22近辺)

Characterの下に、Animationsフォルダを作成して、Stack-O-Botから、アニメーションをコピーします。そのとき、Import Meshはoffにして、インポートします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/8d6bb5ce-81f0-42df-49a0-ff353ec97b9f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/bce4d831-88fa-6f1b-a894-9412cc163b59.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/df1a3901-c74b-2a08-89e4-1901c32d5e9f.png)

このインポートによって、アイドル・歩き・走りのアニメーションが利用可能となります。このあと、BluePrintの用意を始めます。


```
Animation -> Animation Blueprint -> SKM_Antbot_Skeleton
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/ea6d0c70-0a7f-dbe5-1a2f-6552a90c4a94.png)

作成後、ABP_Bot と命名します。そして、ダブルクリックしてオープンします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/e0b4f20a-d0b9-e03b-e97f-2856845f8d30.png)

以下の手順で、このABP_BotをBP_Botに接続します。
- A_Antibot_Idelを接続
- Framework -> BP_Botを開く
- 左側->BP_Bot->Capsule Component -> meshを選択
- Animation->Anim Class->ABP_Bot を選択

映像では、この状態で一度実行していますが、以前と変わらず、Botくんは、向きが変わるだけで、特にアニメーションしないです。そこで、次のことを行っていきます。

- 先のIdleを削除
- State Machineの追加 (映像では、Add New State Machineとなっています)
- 名前をLocomotionに変更
- LocomotionとOutput Poseを接続



- Locomotionをダブルクリックして、動作を定義
- EntryからIdel Stateを追加
- IdleからWalk/Runを追加
- Walk/RunからIdleへ線を伸ばす
- Idleをダブルクリックして、動作を定義
- A_Antbot_IdleをResultへ接続
- 同様に、Walk/Runについても、ダブルクリックして、A_Antbot_Walkを接続

続いて、遷移条件を追加します (矢印の上にある丸をダブルクリック)
- Event Graphへ移動
- ? Is validを追加して、Try Get Pawn OwnerのReturn Valueと接続
- Event Blueprint Update Animationと? Is ValidのExecと接続
- Get Velocityを追加して、Try Get Pawn OwnerのReturn Valueと接続
- Get VelocityのReturn Valueから、Vector Length XYを追加して接続
- Vector Length XYから、Promote to variableで、変数へ値をセット
- 変数の名前をGroundSpeedへ変更
- SETのExecに? Is Validの"Is Valid"を接続 (しないと更新されない)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/ddefac4d-9900-ec22-379c-5f236d985f3a.png)

Locomotionに戻って、Idle->Walk/Runの間の先の設定を実施

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/6f8a4946-7b5d-6c41-dcbd-b0179b972ee2.png)


矢印をダブルクリックして、条件を設定
GroundSpeedとスピードを比較して、しきい値以上(ここでは0)なら、遷移
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/d891917f-5d7c-9d6a-4a2f-828238a6136c.png)

同様に、反対側を設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/a67575eb-8184-17a0-67eb-e42e4f11d5a5.png)

次に、歩くと走るの違いを設定していきます。
- Walk/Runに移動
- Blend Space 1Dを追加 (映像で選択していますが、5.1.1では、legacy扱いです)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/137a8701-8070-83a0-3fd5-9792cb620384.png)

- 名前をBS_WalkRunとします
- ダブルクリックして、設定画面に写ります
- Horizontal Axis の名称をSpeedに設定
- Maximun Axis Valueを400に設定 (Botの最高速度に合わせる)
- Analysis -> Horizontal Axis Functior で Locomotion を選択
- Analysis Properties -> Bone/Socket 1/2 にそれぞれfoot_l/foot_rを設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/7c8c5b8b-8271-55cd-c640-6ef7c8ef1b36.png)


## AI Controller (52:30近辺)

BP_AIControllerへ戻って、Blueprintの設定していきます。
- Set Timer by Eventを作成し、Event BeginPlayと接続
- Customer Event を作成し、Moveと名付け、Set Timer by EventのEventと接続
- AI MoveToを作成し、Moveのexecと接続
- Get Controlled Pawn 作成し、AI MoveToのPawnと接続

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/97cc07b1-50e0-3ac4-8868-b519710329a6.png)

コンパイルして、問題がなければ、セーブして、Valley画面へ戻ります。BP_Botを画面に落として、作業を続けます。

BP_BotのDetails、Pawnとたどり、AI Controller ClassにBP_AIControllerを設定します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/baca526f-2eee-929f-fb40-eaa27e232e0e.png)

Quick addから、NavMeshBoundsVolulmeを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/8de7e363-abec-b2e8-028d-5e903105a297.png)

- 地面の高さを合わせます (地面にめり込んでいる場合)
- CTRL+Pを押して、メッシュの範囲に色を付けます
- メッシュの範囲を拡大します (赤と緑の軸をのばします)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/3533f7cf-0025-348a-a22a-ebed4dee4048.png)

ここで、お試し実行すると、AI Botは、座標0,0,0に向かって走り出します。
このあと、BP_BotのConstruction Scripへ移動します。

- Meshクリックしてを放り込みます
- Meshを構成しているM_BotBaseの内容を確認します
- 色パラメータの名前をColorにします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/a1203812-d1c2-5f36-6671-c2b3dd93a30f.png)

- BP_BotのConstruction Scripに戻ります。
- Create Dynamic Material Instanceを追加し、Mashと接続
- Create Dynamic Material InstanceのReturn Valueをのばして、Set Vector Parameter Valueを選択
- Set Vector Parameter ValueのParameter NameをColorに変更 (M_BotBaseの色を定義している名前を設定)
- Valueで色を適当に変更 (映像では青を設定)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/d4727fe6-bc15-83ea-8b1a-0096ca6da0d1.png)

ここで、Valleyに戻ると、AI Botは、青色に変わっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/31da0e31-a232-9927-503b-fcf9751655e8.png)

色を変更する他の方法として、Valueを変数化します。
- Promoto to valiable
- 名前をColorへ変更
- Instance Editableと設定
- 一度コンパイルして
- Default Valueを設定 (映像では、もとのオレンジの色を設定、といっている)
- Valleyに移動し、AI Botを選択
- Colorを違う色に変更 (映像では、青を選択)


## Spawn and collect Orbs (55:46近辺)

- FirstGameのサンプルから、Propsへ追加
    - SM_Door
    - SM_Modular_WallDoor
    - SM_Pickup_Orb
    - SM_PressurePlate_Frame
    - SM_PressurePlate_Platform
- 変更しないので、そのままimport allを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/7cee07f6-fcda-ff4e-717e-26696995e58b.png)

- Content DrawerのGameElementsへ新しいBluePrintを追加
    - Actorを選択
    - BP_Orbと命名
- BP_Orbを開く
- Content DrawerからSM_Pickup_Orbを選択し、BP_Orbへドラッグドロップする
    - Rootが、SM_Pickup_Orbへ置き換えられます
- Collision PresetsをOverlapOnlyPawnに変更
- Edit -> Project Settings -> Input と選択
- Action Mappings に別のアクションを追加
    - "+"ボタンを押す
    - SpawnOrbと命名
    - キーをSpace Barに設定
    - 画面を閉じる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/74d87835-3132-cf57-39be-73d33925d549.png)

- Content Drawer -> Framework -> BP_PlayerController と選択
- 先ほど作成した、SpawnOrbのEventをサーチして、配置

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/55bde6b4-c1dc-6e84-76b5-1c22d66a96c1.png)

- Release側を引っ張って、Actionを定義
- createと検索し、Spawn Actor from Classを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/48ce92df-4013-bda7-7168-a1338bbb1b67.png)

- SpawnActor BP_Orbが作成される
- ClassにBP_Orbを設定
- Spawn Transform上で右クリックし、Split Struct Pinを選択
- Get Controlled PawnとGet Actor Locationをコピーして、InputAction SpawnOrbの近傍に配置
- Get　Actor LocationのReturn ValueをSpawn Transform Locationに接続

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/6bd50665-37cb-5d8c-4e5f-228d4f0a575b.png)

Valleyに戻って、プレーします。途中、space barを押すと、orbが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/f87bec8a-2e48-0017-981a-7d595f9ee321.png)

AI BotをOrbに向かって歩かせる修正を加えていきます。

- Content Drawer -> Framework -> BP_AIControllerを選択
- 関数を追加 (左側 My BlueprintにあるFUNCTIONSの"+"を押す)
- Find Orb関数用Blueprint画面になる
- Outputsに、以下を追加
    - Success(Boolean)
    - orbActor (Actor -> Object Reference)
- Get All Actors Of Classを追加し、Find Orbと接続
- Out Actorsをのばして、長さを確認
    - 0より大きければ、見つかったので、True処理へつないでいきます
    - 見つからなければ、False処理とします
- また、どのOrbということで、Getを利用して、最初のOrb情報をSuccess側のOrb Actorへ接続

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/ecd98e2c-77e0-1450-96e6-d0fa50c4b662.png)

- BP_AIController -> Event Graphへ戻る
- 左側 FindOrbを選択し、右側 Pure をチェックする
- FindOrbをドラッグドロップする
- Moveが、FindOrbがSuccessのときだけ動かしたいので、Branchを追加して、MoveとAI MoveToの間に挟む
- FindOrbのOrbActorをAI MoveToのTarget Actorに接続
- Moveを更新するために、AI MoveToの出口側Execと新たに追加したMove関数と接続
- 繰り返し処理にするため、Set Timer by EventのLoopにcheckを入れる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/4ee52392-b4b3-5e08-6467-9a70bef92380.png)

この状態で、Valleyでブレーすると、最初のOrbには反応しますが、その後のOrbには反応しません。そこで、次の処理をしていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/17a0a80c-1e20-e9a9-a09c-5e8d5376022b.png)

- BP_OrbのEvent Graphを選択
- 左側 SM_Pickup_Orbから、AddEventを選択し、Add OnComponentBeginOverlapを選択
- Other Actorをひっぱり、Cast To Pawnを検索して、追加、接続
- Cast To PawnのAs Pawnをひっぱり、Is Player Controlledと接続
- Is Player ControlledのRetrun ValueにIf Branchを接続し、Cast To Pawnのexecと接続
- False処理として、Destroy Actorと接続

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/eb801df8-738c-b6cc-1f0f-bac0fcf45ccc.png)

この状態でValleyに戻ってプレーすると、Orbを追跡して、到達したOrbを消しながら、進む様子が見られます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/6b107c76-4f68-5801-c8a1-fdd45f470fbe.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/502035ba-a643-9294-6c53-8ce4f6cd231b.png)


## Interaction Component (1:01:22近辺)
このあと、踏み台と、ドアを追加していきます。

- GameElementsにBlueprint -> Actorを追加
- BP_PressurePlateと命名
- BP_PressurePlateを開く
- PropsからSM_PressurePlate_FrameとSM_PressurePlate_Platformを選択し、BP_PressurePlateへドラッグドロップ
- SM_PressurePlate_Frameをrootに設置
- Box collision Componentを追加
- BoxをPressurePlate_Platformに大きさを合わせる
- Boxから、Add Eventを選択し、On Component Begin Overlapを選択する
- Boxから、Add Eventを選択し、On Component End Overlapを選択する
- それぞれに、Print Stringを接続
- Beginは、Helloのまま、EndはByeをstringに設定
- Valleyに戻り、BP_PressurePlateを放り込む

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/1964c158-6d0a-0843-fef5-7e2e6334cda6.png)

プレーしてみると、Botが乗るとHello、降りるとByeが表示されます。確認ができたところで、B_PressurePlateに戻り、Print文を削除します。

ここから、改造していきます。

- Timelineを追加
- PlateAnimationと命名
- ダブルクリックする
- Lengthを0.5に設定
- Trackを追加
- Add Float Trackを選択
- Add Key to CurveFloat_0を選択し、0.0, 0.0を設定
- Event Graphに戻る
- SM_PressurePlate_Platformをドラッグドロップ
- Set Relevant Locationを追加
- SM Pressure Plate PlatformとSet Relative LocationのTargetを接続
- PlateAnimationとSet Relative Locationを接続
- Set Relative LocationのNew Locationをsplit(Split struct pin)させる
- Plate Movementから引っ張り出して、掛け算を挿入。値を"-20”と設定し、New Location Zへ接続
- BeginのexecをPlayへ、EndのexecをReverseへ接続

この状態で、Valleyに戻り、プレーすると、踏めば下がり、離れると上がる、というアニメが見られます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/26c474c3-cb47-7e9c-73c2-c88a1b2096b6.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/f09b15da-2e26-25e7-c96a-06c2faa6b5df.png)

もし、凹み具合が気になるようでしたら、"-20"と設定した値や、プレートの位置など変更してください。

ここから、ドアを設定していきます。プレートと同じく、BP_Doorを作ります。
- BlueprintをGameElementsに追加
- ダブルクリックして開く
- Propsから、SM_Modular_WallDoorを選択し、BP_Doorのrootに配置
- WallDoorの下に、SM_Doorを2つ登録
    - 右用をSM_Door_Rと命名
    - 左用をSM_Door_Lと命名
- ドア基準となるAnchorをSM_Modular_WallDoorに追加
    - +Addから、Sceneを選択
    - Anchorと命名
    - 適切な位置に移動
    - これを左右両方のドアで行う

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/57ae9a44-f88d-3f84-edc8-95071d1126ee.png)

- Event Grapへ移動
- Custom Eventを追加
    - OpenDoor
    - CloseDoor
- Timelineを追加
- DoorAnimationと命名
- ダブルクリックして開く
- Lengthを0.5に設定
- Add Key to CurveFloat_0を追加
    - 0, 0
    - 0.5, 1
    - 2つのkeyを設定
- 両方のkeyを選択し、右クリック
- Breakを選択
- お好みのグラフ形状へ変化させる
- EventGraphへ戻る
- SM_Door_LとSM_Door_Rを追加
- Set Relative Locationを追加
- SM_Door_LとSM_Door_RをTargetに接続
- Door Movementの出力に”-70"をかけたものを、New LocationYに接続 (左右に動かす)
- OpenDoorをPlayに接続
- CloseDoorをReverseに接続

動作確認のために、以下を追加
- Event BeginPlay
- Delay 値を3(秒)に設定
- OpenDoor

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/0dded21d-5ea8-8f48-7383-52b36f156806.png)

これで、Valleyに戻り、プレーすると、開始から3秒後にドアが開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/278efd5f-81ac-5709-0840-96b11cfc8a7a.png)


このあと、プレートと連携させる改造に移ります。
- FrameworkにBlueprint Actor componentを追加
- ダブルクリックして、開く
- Custom Eventを追加
    - StartInteraction
    - StopInteraction
- EVENT DISPATCHERにOnInteractionを追加
- 右側DetailのInputsに、On (boolean)を追加
- OnInteractionをドラッグドロップしてグラフエリアに追加
- このとき、Callを選択
- StartInteractionと接続
- 同様に、Call On Interactionをコピーして、StopInteractionに接続
    - このとき、Onのcheck boxはOffにしておく

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/1b6af0a3-2627-c45b-3484-a5b691757d5f.png)

- BP_PressurePlateに移動
- 左上+Addから、BP_InteractionComponentを選択
- 追加後、ドラッグドロップして、グラフエリアに追加
- 引っ張ってStart InteractionのTargetと接続
- 再度引っ張って、Stop IneractionのTargetと接続
- Start InteractionとOn Component Begin Overlapを接続し、さらにPlate AnimationのPlayに接続
- 同様にStop Interactionも処理

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/de27b563-8ffd-ffdf-a106-1b8163dbd2e9.png)

- BP_Doorに移動
- デバッグ用に書き込んだ、DelayとOpenDoorを削除 (なければ無視)
- My BlueprintにVariableを追加
    - Triggerと命名
    - 型は、Actor (object reference)を指定
    - Instance Editable (お目々を開かせる)
- Triggerをグラフエリアに追加
- 右クリックで選択し、タイプをValidated Getに変更
- Triggerをひっぱって、Get Component by Classと接続
- Get Component by ClassのComponent Classにおいて、BP_InteractionComponentを選択
- ReturnValueと? Is Validを接続
- ? Is ValidとGetのIs Validを接続
- さらに、Get Component by ClassのReturn ValueをAssign On Interactionに接続
- OnInteraction_Eventが現れるので、Branchへ接続
- さらに、Trueであった場合、OpenDoorイベントへ接続
- さらに、Falseであった場合、CloseDoorイベントへ接続

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/f6e0e4b6-68c4-7ecb-4adb-d1d35e17f306.png)

- Valleyに戻って、BP_Doorを選択
- Defaultにある、TriggerにBP_PressurePlateを選択

この状態でプレーすると、プレートの上にものがあるとドアが開き、ものをどけるとドアが閉まるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/88dc09df-5627-8ff9-c657-4ffedd8134c2.png)

かばんがあるため、ドアが開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/213097/f034e8c5-d85d-8205-23e3-f5cf09b9e921.png)

かばんをどけると、ドアが閉まる

このような感じで動きます。



## Effects, Sounds & Camera Shake (1:13:22近辺)