More than 1 year has passed since last update.

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

Posted at 2023-03-29

　ゲームエンジン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を追加します。

　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

テクスチャを設定する

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

テクスチャをダウンロードする

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

Godotプロジェクトに配置する

　ファイルシステムのassets/textureを右クリックして「ファイルマネージャーで開く」を実行します。
　
　Windowsエクスプローラが開くので「Wall_Stone_022_basecolor.jpg」を配置します。

　Godotのウィンドウに切り替えると自動でインポートされます。

壁にテクスチャを設定する

　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を組み合わせたときにテクスチャの継ぎ目を見えなくする効果があります

　テクスチャを保存します。
　Materialの右の球の右の「ｖ」をクリックして「保存」を実行します。

　「Design」フォルダを選択して、「Wall.tres」という名称で保存します。

右側の壁を作る

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

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

ステージ１に壁の障害物を追加する

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

　res://Stages/stage001.tscnを開きます。
　ルートノードのStageを右クリックして、子ノードを追加からStaticBody3Dを追加します。
　名称を「WallLeftMiddle」に変更します。
　WallLeftMiddleを右クリックして子ノードを追加からMeshInstance3DとCollisionPolygon3Dを追加します。

　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を選択した状態で、下図の赤枠（ビューの左上のあたり）をクリックして、「選択対象にフォーカス」を実行します。

同じところをクリックして「後面図」を実行します。

　次に、CollisionPolygon3Dを選択して、インスペクタのCollisionPolygon3D/Polygonの右の「PackedVector2Array(サイズ0)をクリックして詳細設定を開きます。

　サイズの右の上矢印をクリックして３にします。
　下図のようにx,yを3組入力します。
　またDepthを1.5mにします。

　確認します。MeshInstance3Dを表示した場合。

　MeshInstance3Dを非表示にした場合。大丈夫そうです。

　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°