【Godot 4.0】スマホ３Dゲームを作るための勉強　その３１ 複数のMeshで壁を作ってつなぎが見えないようにテクスチャを貼る

　ゲームエンジンGodot4.0で3Dスマホゲームを作りたいと思いますが、その前にお勉強しています。
　2023/3/1にstable版がリリースされました。
　Godot_v4.0-stable_win64.exe.zipを使用しています。

# 目的
　地面の両側に壁を作ります。またステージに壁からでっぱりも作ります。
　その際にテクスチャにつなぎ目が見えないように貼ります。

# ベースプロジェクト
　下記で作成したプロジェクトをベースに機能追加をします。
　【Godot 4.0】スマホ３Dゲームを作るための勉強　その３０　敵の砦を倒した時のアニメーション
　https://qiita.com/FootInGlow/items/9c13022f39eb7101eaac
　
　github(Godotのプロジェクトマネージャーからインポートして利用できます）
　https://github.com/footinglow/Godot4/tree/main/02_study/S30EnemyDefeatedAnimation
　※別途ダウンロードが必要です。
　　　res://assets/texture/godot-material-dpa-1.0.1/Readme.txt及び
　　　res://assets/texture/AllSkyFree1.0/Readme.txtを参照

# 左側の壁を作る
　地面ステージアイテムの左右に壁を作ります。
　res://StageItems/ground.tscnを開きます。

　ルートノードのGroundを右クリックして、子ノードを追加からStaticBody3Dを追加します。
　「WallLeft」に名称変更します。
　WallLeftを右クリックして、子ノードを追加からMeshInstance3DとCollisionShape3Dを追加します。
![スクリーンショット (451).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/ba0098f5-6954-a08b-994d-2e2496721c67.png)

　MeshInstance3D、CollisionShape3DとWallLeftをそれぞれ下記の表のように設定します。

MeshInstance3Dのインスペクタ
| 項目名 | 設定値 |
|:-:|:-:|
|MeshInstance3D/Mesh|新規BoxMesh3D|
|MeshInstance3D/Mesh/Size/x|0.5m|
|MeshInstance3D/Mesh/Size/y|1.5m|
|MeshInstance3D/Mesh/Size/z|15m|

CollisionShape3Dのインスペクタ
| 項目名 | 設定値 |
|:-:|:-:|
|CollisionShape3D/Shape|新規BoxShape3D|
|CollisionShape3D/Shape/Size/x|0.5m|
|CollisionShape3D/Shape/Size/y|3m※|
|CollisionShape3D/Shape/Size/z|15m|

　※間違って乗り越えないような高さを設定します。

WallLeftのインスペクタ
| 項目名 | 設定値 |
|:-:|:-:|
|Node3D/Transform/Position/x|-2.75m|
|Node3D/Transform/Position/y|0.25m|
|Node3D/Transform/Position/z|0m|

![スクリーンショット (452).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/0b5b8a02-b19a-11b8-e903-f594382f6540.png)

# テクスチャを設定する
　テクスチャを設定します。

## テクスチャをダウンロードする
　「3D TEXTURES」のCC0ライセンスのテクスチャを利用させていただいています。
　Googleで「3d textures wall stone 022」を検索します。
　下の方にスクロールして、「DOWNLOAD ALL THE MAPS」ボタンを押下するとGoogle Driveに飛んでダウンロードできます。
　「Wall_Stone_022_basecolor.jpg」というファイル名です。

## Godotプロジェクトに配置する
　ファイルシステムのassets/textureを右クリックして「ファイルマネージャーで開く」を実行します。
　![スクリーンショット (454).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/2aa6bcd0-41de-d02b-de6e-e3984c52c8b9.png)
　Windowsエクスプローラが開くので「Wall_Stone_022_basecolor.jpg」を配置します。
![スクリーンショット (455).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/5fd2dc55-a09d-1b32-8bc1-e542b48f9533.png)
　Godotのウィンドウに切り替えると自動でインポートされます。
![スクリーンショット (456).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/dc8cdc92-df0d-0ba2-24ea-20ec09e9d117.png)

## 壁にテクスチャを設定する
　res://StageItems/ground.tscnに戻って、WallLeft/MeshInstance3Dを選択します。
　インスペクタのMeshInstance3D/Meshの右のアイコンをクリックして詳細設定を開きます。
　Materialの右の＜空＞をクリックして新規StandardMaterial3Dを選択します。
　Materialの右の球をクリックしてMaterialの詳細設定を開き、下記の表のように設定します。

 Materialの詳細設定
| 設定項目|設定値 |
|:-:|:-:|
|Albedo/Texture|res://assets/texture/Wall_Stone_022_basecolor.jpg|
|Metallic/Metallic|0.65|
|UV1/Scale/x|0.5|
|UV1/Scale/y|0.5|
|UV1/Scale/z|0.5|
|UV1/Triplanar|オン|
|UV1/World Triplanar|オン※|

　※複数のMeshを組み合わせたときにテクスチャの継ぎ目を見えなくする効果があります

![スクリーンショット (457).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/c41a7a91-9394-4d8d-5d31-e50b94712e8a.png)

　テクスチャを保存します。
　Materialの右の球の右の「ｖ」をクリックして「保存」を実行します。
![スクリーンショット (458).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/d81dc897-c68b-bdb1-e055-f4c74f7cbf77.png)

　「Design」フォルダを選択して、「Wall.tres」という名称で保存します。
![スクリーンショット (459).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/e3605198-0e6d-d126-c8b5-066267f3d94a.png)

# 右側の壁を作る
　左側の壁をコピーして右側の壁を作ります。
　
　WallLeftをコピーしてルートノードのGroundを右クリックして、貼り付けます。
　名称を「WallRight」に変更します。

　WallRightを選択して、インスペクタのNode3D/Transform/Positionのxを2.75に変更します。

![スクリーンショット (460).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/d11d307f-8b61-17ef-0846-61082f38fb95.png)

# ステージ１に壁の障害物を追加する
　ステージ１に壁の障害物を追加します。
　障害物を三角柱にします。MeshInstance3DにはPrismMesh3Dを使用して三角柱を作成できますが、CollisionShape3Dには三角柱がないので、**CollisionPolygon3D**を使用します。

　res://Stages/stage001.tscnを開きます。
　ルートノードのStageを右クリックして、子ノードを追加からStaticBody3Dを追加します。
　名称を「WallLeftMiddle」に変更します。
　WallLeftMiddleを右クリックして子ノードを追加からMeshInstance3Dと**CollisionPolygon3D**を追加します。
![スクリーンショット (477).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/19562671-70f6-9a0e-a3c2-f86878ebdfaf.png)

　MeshInstance3Dを下記の表のように設定します。

MeshInstance3Dのインスペクタ
| 項目名 | 設定値 |
|:-:|:-:|
|MeshInstance3D/Mesh|新規PrismMesh3D|
|MeshInstance3D/Mesh/Size/x|2m|
|MeshInstance3D/Mesh/Size/y|1.5m|
|MeshInstance3D/Mesh/Size/z|1.5m|
|MeshInstance3D/Mesh/Material|res://Design/Wall.tres|

　MeshInstance3Dの形を見ながらCollisionPolygon3Dを設定したいので、いったんWallLeftMiddleを横の方に移動します。

WallLeftMiddleのインスペクタ
| 項目名 | 設定値 |
|:-:|:-:|
|Node3D/Transform/Position/x|10m|
|Node3D/Transform/Position/y|0m|
|Node3D/Transform/Position/z|0m|

　シーンのWallLeftMiddleを選択した状態で、下図の赤枠（ビューの左上のあたり）をクリックして、「選択対象にフォーカス」を実行します。
![スクリーンショット (478).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/283d01e5-0443-2045-0aac-3ca5f8cab297.png)
![スクリーンショット (466).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/6d8a4290-22a9-2684-ae7a-93b79a925b1e.png)
同じところをクリックして「後面図」を実行します。
![スクリーンショット (467).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/ac70259e-3822-720f-f1f0-1b381981c1c7.png)

　次に、CollisionPolygon3Dを選択して、インスペクタのCollisionPolygon3D/Polygonの右の「PackedVector2Array(サイズ0)をクリックして詳細設定を開きます。
![スクリーンショット (468).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/65fcf48a-f6d9-58a8-c4e8-5148617fc24a.png)

　サイズの右の上矢印をクリックして３にします。
　下図のようにx,yを3組入力します。
　またDepthを1.5mにします。
![スクリーンショット (471).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/0f9a2613-481d-f8e8-acb4-5ae26b34da20.png)

　確認します。MeshInstance3Dを表示した場合。
![スクリーンショット (473).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/4f5010fe-81cf-d13b-329d-ada0b92bb909.png)
　MeshInstance3Dを非表示にした場合。大丈夫そうです。
![スクリーンショット (474).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/6e9464c3-55b4-be77-dc3c-256b8e2f28e8.png)

　WallLeftMiddleを正しい位置に配置します。
　WallLeftMiddleのインスペクタ
| 項目名 | 設定値 |
|:-:|:-:|
|Node3D/Transform/Position/x|-2m|
|Node3D/Transform/Position/y|-0.25m|
|Node3D/Transform/Position/z|-5m|
|Node3D/Transform/Rotation/x|-90°|
|Node3D/Transform/Rotation/y|-90°|
|Node3D/Transform/Rotation/z|-0°|

![スクリーンショット (479).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/9c20082e-1d12-3c7a-37d9-9a79dea2c0fb.png)

# 実行
　実行して継ぎ目を確認します。
　UV1/World Triplanarをオンにしたので継ぎ目がなくなりました。

![スクリーンショット (480).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/8343e5c4-d29a-af02-1916-fc228c98aff9.png)
![スクリーンショット (480).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/2e428b0a-878b-8c0c-f29f-d210b7dd03b7.png)

　以上。