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

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

前回

https://qiita.com/Miyakovsky/items/80893b6c094269cea069

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

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


本記事では主に以下を扱います。
- Landscapeで地形の作成
- Grassで草を生やす
- フォレッジで岩花木を付ける


[開発環境]
windows 11
UnrealEngine 5.3.2


# Landscape
動画時間:12:03~

- 床オブジェクトを削除する
- Modeのドロップダウンメニューから「ランドスケープ」を選択する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/564f5593-cb99-5a98-0c84-f1128ad7f1ff.jpeg)

- 「作成」を選択する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/3479209a-6361-9d3a-3937-57b01ea42fcb.jpeg)

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/e6890a7f-62ab-713f-0a26-84efd5dff075.jpeg)

- マウスの左クリックで地面に凹凸を作成する

:::note info
「Shift」+「左クリック」で凹ませることが出来る
:::

![スクリーンショット 2024-08-09 212744.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/d9fc1301-12f0-ee2e-dde4-64f352c1ec8e.jpeg)

- コンテンツドロワーを開く
- コンテンツフォルダに「Landscape」フォルダを作成する
- 右クリックして「マテリアル」を選択し、名前を「M_Landscape」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/250e0ad0-bce9-e5e0-d8ca-a7742d0d5067.jpeg)

- 「M_Landscape」をダブルクリックして編集エディタを開く
- 「詳細」の詮索欄に「rough」を入れて、「Fully Rough」をONにする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/a88ab689-9dc7-2b43-cb14-f3384133feac.jpeg)

- 「Landscape Layer Blend」ノードを追加する
- 「Landscape Layer Blend」を選択する
- 「詳細」でレイヤーを2つ作り、それぞれ「LayerName」を「Sand」「Grass」にする
- 「Landscape Layer Blend(Layer Sand)」->「Base Color」に接続する
- 「3」+「左クリック」で「Constant3Vector」を作成する
- 「Constant3Vector」のカラーを「R:0.342 G:0.313 B:0.004」の黄色にする
- 「Constant3Vector」を追加で作成してのカラーを「R:0.342 G:0.313 B:0.004」の緑色にする
- 「Constant黄色」->「Landscape Layer Blend(Layer Sand)」に接続する
- 「Constant緑色」->「Landscape Layer Blend(Layer Grass)」に接続する
- 適応して変更を保存する

![スクリーンショッ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/3af933de-a239-1a14-7ad3-920403765cdd.jpeg)

- Valleyレベルに戻る
- アウトランナーの「Landscape」を選択する
- 「詳細」の「ランドスケープマテリアル」を「M_Landscape」にする
- 「ランドスケープ」で上部のタブを「ペイント」を選択する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/9f1b9c6a-3d64-224b-b91c-f7712fbc3c8e.jpeg)

- 「ランドスケープ/ターゲットレイヤー/レイヤー/Sand」の「+」ボタンから「ウェイトブレンドレイヤ(法線)」から「Landscape」フォルダを選択する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/44f6b569-c9ed-68fe-c110-7872ef8879ad.jpeg)

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/0ad1ea9a-67bd-2f89-abf7-6972a3b0597b.jpeg)

- 「ランドスケープ/ターゲットレイヤー/レイヤー/Grass」の「+」ボタンから「ウェイトブレンドレイヤ(法線)」から「Landscape」フォルダを選択する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/579753dc-8270-95c7-38d5-35ffd3dbab08.jpeg)

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/b5f8b136-9db5-8590-b449-65e748042395.jpeg)

- レイヤーの緑色の「Grass」を選択して、地形を塗る

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/ae98e4b4-60d2-d6df-2ff1-aa6ee2acf04a.jpeg)

- 「M_Landscape」の編集エディタを開く
- コンテンツドロワーの「Landscape」を選択し、インポートを選択する
- 素材フォルダの「Landscape」内の「T_Grass_M.png」「T_SandTileabe_BC.tga」をインポートする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/c45e5ddc-860f-3577-158e-849fd823860d.jpeg)


- 「T_SandTileabe_BC.tga」をドラッグ&ドロップする
- 黄色カラーの「Constant黄色」を削除する
- 「T_SandTileabe_BC(RGB)」->「Landscape Layer Blend(Layer Sand)」に接続する
- 「T_Grass_M.png」をドラッグ&ドロップする
- 緑色カラーの「Constant緑色」のノードつなぎを消す(あとで使用する)
- 「T_Grass_M(RGB)」->「Landscape Layer Blend(Layer Grass)」に接続する
- 適応して保存する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/b6cb7eca-5751-a2dd-92e5-c86640ca7ff4.jpeg)

- Valleyレベルに戻ると、テクスチャが適応されていることが確認できる

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/194829e7-7364-1faf-a4cc-2005a7dc1a6e.jpeg)

- 「M_Landscape」の編集エディタに戻る
- 「World Position」(絶対ワールド座標)ノードを追加する
- 「Mask」ノードを追加する
- 「World Position」->「Mask(RG)」に接続する
- 「Divide」ノードを追加する
- 「Mask(RG)」->「Divide(A)」に接続する
- 「1」+「左クリック」で浮動小数点のConstantノードを追加して、値を「256」にする
- 「Constant(256)」->「Divide(B)」に接続する
- 「Divide」->「T_SandTileabe_BC(UVs)」に接続する
- 「World Position」「Mask」「Divide」「Constant」のセットを複製する
- 複製したセットを「T_Grass_M(UVs)」に接続する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/e740a8f2-1048-90f6-4c1a-8e710d8e895e.jpeg)

- 「T_SandTileabe_BC(RGB)」->「Landscape Layer Blend(Layer Sand)」の接続を切る
- 「Name」ノードを追加し、名前を「Sand」にする
- 「T_SandTileabe_BC(RGB)」->「Sand」に接続する
- 「Sand」ノードをさらに追加にする
- 「Sand」->「Landscape Layer Blend(Layer Sand)」に接続する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/e87d3f99-a543-11d2-3a4e-a17e847e258c.jpeg)

- 「T_Grass_M(RGB)」->「Landscape Layer Blend(Layer Grass)」の接続を切る
- 「Lerp」ノードを追加する
- 「T_Grass_M(RGB)」->「Lerp(Alpha)」に接続する
- 以前作って残した「Constant緑色」を「Lerp(B)」に接続する
- 「3」+「左クリック」で「Constant3Vector」を作成する
- 「Constant3Vector」のカラーを「R:0.115 G:0.280 B:0.077」の薄緑色にする
- 「Constant薄緑色」->「Lerp(A)」に接続する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/e1952264-ec31-37f5-a7ab-934525a0e7f3.jpeg)

- 「Lerp」を右クリックして「ノードのプレビューを開始」を選択すると左のプレビューが緑色のものになる

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/80c7adc3-0200-0702-fcd7-3cda9d96109d.jpeg)

- 「Name」ノードを追加し、名前を「Grass」にする
- 「Lerp」->「Grass」に接続する
- 「Grass」ノードをさらに追加にする
- 「Grass」->「Landscape Layer Blend(Layer Grass)」に接続する
- 適応して保存する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/a5ab9a27-90d2-0269-e1b3-703a9333e177.jpeg)

- Valleyレベルに戻ると、先ほどの作業が適応されていることが確認できる

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/38a08c4a-ebd4-5543-9398-85c6cc51a0c6.jpeg)

:::note info
ランドスケープに関するドキュメント
[ランドスケープ ガイド](https://dev.epicgames.com/documentation/ja-jp/unreal-engine/landscape-outdoor-terrain-in-unreal-engine)
:::

# Landscape Grass
動画時間:18:20~

- コンテンツドロワーを開く
- コンテンツフォルダに「Environment」フォルダを作成する
- インポートして、素材フォルダの「Environment/Grass」から「SM_GrassClump.FBX」「T_GrassClump.png」を選択して、開くを選択し、設定そのままでインポートする
- 「M_Grass」をダブルクリックして編集エディタを開く
- 既存の「Param」を削除する
- 「T_GrassClump.png」をドラッグ&ドロップして編集画面に入れる
- 「M_Grass」ノードを選択して、「詳細/マテリアル/Blend Mode」を「Masked」に変更する
- 「T_GrassClump(RGB)」->「M_Grass(オパシティマスク)」に接続する
- 適応した保存する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/1058e590-767d-604d-c4f7-e49c1ff2fcf0.jpeg)

- 「M_Landscape」の編集エディタを開く
- 「Lerp」「Constant緑色」「Constant薄緑色」のセットをコピーとて、「M_Grass」の編集エディタに張り付ける
- 「T_GrassClump(RGB)」->「Lerp(Alpha)」に接続する
- 「Lerp」->「M_Grass(ベースカラー)」に接続する
- 適応して保存する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/35216a38-4aa7-43f7-3703-bbbd96f4c21e.jpeg)

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/0459f61c-38b4-d93d-55ba-39906b95ac45.jpeg)

- 「M_Landscape」の編集エディタを開く
- 「LandscapeGrassOutput」ノードを追加する
- コンテンツドロワーの「Environment」フォルダを開く
- 右クリックして「フォリッジ/ランドスケープグラスタイプ」を選択し、名前を「F_LandscapeGrass」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/0f2e3b47-a098-ddc7-931c-5c061e90457f.jpeg)

- 「F_LandscapeGrass」をダブルクリックして、編集エディタを開く
- 「草/草のバリエーション」の「+」を押す
- 「Grass Mesh」を「SM_GrassClump」に変更する
- 「Grass Density」を「800」に変更する
- 「Scale X」のMinを「0.1」、Maxを「0.4」に変更する
- アセットの保存をする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/bcbb92f3-2213-a562-2577-bff381763df8.jpeg)

- 「M_Landscape」の編集エディタに戻る
- 「LandscapeGrassOutput」ノードを選択する
- 「詳細/草のタイプ/インデックス0[]/Grass Type」を「F_LandscapeGrass」に変更する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/ff7e5ead-ae4d-15c4-5ec7-3a2f13e8b2f2.jpeg)

- 「LandscapeLayerSample」ノードを追加し、名前を「Grass」にする
- 「Grass」->「LandscapeGrassOutput」に接続する
- 適応して保存する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/0b630588-88c7-88d6-10cb-2548d88995a6.jpeg)

- Valleyレベルに戻ると、草が生えてるのを確認できる

![スクリーンショット 2024-08-25 183451.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/8e96d2c2-a509-d4a1-8170-9ff872dbbddd.jpeg)



# Rocks
動画時間:20:38~

素材の追加
- コンテンツドロワーを開く
- 「Environment」フォルダに素材「Environment\Rock\RockFlat_01」をインポートする
- インポート設定で、「Build Nanite」にチェックを入れて、インポートを行う

![image](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/9c7bf591-8323-80b7-669a-f0f9c36e7daa.jpeg)

- 「M_Rock」をダブルクリックしてマテリアルエディタを開く
- テクスチャ「T_RockTileable_BC.TGA」をインポートして、マテリアルエディタにドロップして入れる
- 「T_RockTileable_BCテクスチャ」->「BaseColor」に接続する
- 「WorldPosition」(絶対座標)ノードを追加する
- 「ComponentMask」ノードを追加する
- 「WorldPosition」->「ComponentMask」に接続する
- 「Divide」ノードを追加
- 「ComponentMask」->「Divide」に接続する
- 「Value」を追加し、valueを1024に設定する
- 「Value」->「Divide」に接続
- 「ComponentMask」の設定を「RG」->「GB」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/6425ecdc-5606-2557-027d-5b8fdd9d7969.jpeg)

- 「VertexNormalWS」ノードを追加する
- 「ComponentMask」ノードを追加する
- 「VertexNormalWS」->「ComponentMask」に接続する
- 「ComponentMask」を選択して、設定を「RG」->「B」にする
- 「Lerp」ノードを追加する
- 「ComponentMask」->「Lerp(Alpha)」に接続する
- 「T_RockTileable_BCテクスチャ」->「Lerp(A)」に接続する
- 「Lerp」->「BaseColor」に接続する
- Landscapeフォルダにある「T_SandTileabe_BC」テクスチャをドラッグ&ドロップで入れる
- 「T_SandTileabe_BCテクスチャ」->「Lerp(B)」に接続する
- 以前作成した「M_Landscape」マテリアルを開く
- 以前作成した「T_SandTileabe_BCテクスチャ」に入力として接続している「WorldPosition」「Mask」「Divide」「256」のセットをコピーする
- コピーしたものを、「M_Rock」マテリアルに貼り付けて、「T_SandTileabe_BCテクスチャ」の入力に接続する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/225ea8bd-e7f8-cd8e-f748-53b2a1db2a98.jpeg)

- コンテンツドロワーの「Environment」フォルダを開く
- 右クリックして「フォリッジ/スタティックメッシュフォリッジ」を選択し、名前を「F_FlatRock」にする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/7092fcd1-f03a-7d3d-0a54-28e9dba02303.jpeg)

- 「F_FlatRock」をダブルクリックして、編集エディタを開く
- 「Mesh」を「RockFlat_01」に変更する
- 「Grass Density」を「800」に変更する
- 「Z Offset X」のMin「-100」、Max「-100」に変更する
- 「Align to Normal」を「False」にする
- 「コリジョンプリセット」を「BlockAll」に変更する
- 「Affect Distance Field Lighting」を「True」にする
- アセットの保存をする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/6168550a-8b6d-1396-2857-9e5eb0d3adbd.jpeg)

- Valleyレベルを開く
- Modeのドロップダウンメニューから「フォレッジモード」を選択する
- 「+フォレッジ」ボタンを押す
- 「F_FlatRock」を選択する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/f61f5fe1-3331-f6c0-443f-2d7f83849133.jpeg)

- 追加した「F_FlatRock」のアイコンを選択する
- 「ペインティング/Density/1Kuu」を「30」に変更する
- 「Scale X」のMin「0.3」、Max「0.5」に変更する
- 「F_FlatRock」のアイコンのチェックをONにする
- ペイントをして、地形に岩を生成する
- ペイントの円の大きさを変えるには「Density/1Kuu」を変更して調整する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/cabc1935-93aa-853e-b79c-290774b5fc93.jpeg)

# Vegetaion
動画時間:25:50~

- 教材となっているプロジェクト「StackOBot」を開く
- コンテンツドロワーを開く
- 「コンテンツ/StackOBot/Environment/Foilage」を選択する
- 「SM_Bush_FoliageType」「SM_Tree_FoliageType」を選択して、右クリックから「アセットアクション/移行」を選択する
- 移行先を今回学習している「FirstGame」の「Content」フォルダにする

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/8ebbe8e2-dacd-262f-0d08-ef6e3196b81e.jpeg)

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/878d9a6f-3b37-3404-3b89-f672fd9821bb.jpeg)

- FirstGameに戻り、Valleyレベルを開く
- Modeのドロップダウンメニューから「フォレッジモード」を選択する
- 「+フォレッジ」ボタンを押す
- 「SM_Bush_FoliageType」を選択する
- 追加した「SM_Bush_FoliageType」のアイコンを選択する
- 「Scale X」のMin「0.4」、Max「0.6」に変更する
- 「SM_Bush_FoliageType」のアイコンのチェックをONにする
- ペイントをして、地形に花を生成する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/08d15e76-d2be-5c32-e0b9-311ba5eac8db.jpeg)

- 「+フォレッジ」ボタンを押す
- 「SM_Tree_FoliageType」を選択する
- 追加した「SM_Tree_FoliageType」のアイコンを選択する
- 「Scale X」のMin「0.5」、Max「1.0」に変更する
- 「SM_Bush_FoliageType」のアイコンのチェックをOFFにして、「SM_Tree_FoliageType」のアイコンのチェックをONにする
- ペイントをして、地形に木を生成する

![スクリーンショット](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3553099/8c63a8c4-3992-9049-50bc-64809bb0e8f3.jpeg)


次回

https://qiita.com/Miyakovsky/items/689a74b9668eddce45dd