【Godot 4.0】スマホ３Dゲームを作るための勉強　その１４　CSGMesh3Dで敵の砦をデザインする

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

# 目的
　敵の砦をデザインします。
　CSGMesh3Dが便利なので使ってみます。

:::note alert
　2023.3.13 CSGMeshを使用するとAndroidで動きませんでした。
　スマホの動作確認を怠っていました。すみません。
:::

:::note warn
　GODOT DOCによると「CSGMesh3D」はプロトタイピング用と説明されています。MeshInstance3Dと比べてかなりのCPUコストがかかるので、特にゲームには向かないようですが複雑なモデルを簡単に作成できるので、使ってみたくなります。
https://docs.godotengine.org/en/stable/classes/class_csgmesh3d.html
:::

# CSGMesh3Dのご紹介
　CSGMesh3Dを使用すると、基本図形を足し算、引き算して新しい図形を作成することができます。
　今回は砦の入り口と内部を空洞にしたいので使用しました。
![C__Users_hathr_Videos_Captures 2023_03_06 9_48_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/6498e3c2-980b-fec8-3dcc-85ebda6576cf.png)

　詳細はGODOT DOCにあります。最新英語版なら[こちら](https://docs.godotengine.org/en/stable/tutorials/3d/csg_tools.html)、日本語版３．５用なら[こちら](https://docs.godotengine.org/ja/stable/tutorials/3d/csg_tools.html?highlight=CSG)にあります。

#  敵の砦のデザインを作成する
　作る前にイメージが必要です。
　こんな感じの砦をつくります。
　砦には出入り口があって、敵戦士が出てきます。てっぺんには旗があります。
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3639313035302f39656239633362362d303063342d343537662d613661652d3038656162663431323164392e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/d2906038-aaa0-c812-af1b-0f2321f5b49b.png)


# ベースプロジェクト
　下記で作成したプロジェクトをベースに機能追加をします。
　【Godot 4.0】スマホ３Dゲームを作るための勉強　その１３　キャラクターの色を設定します
　https://qiita.com/FootInGlow/items/121ccdfdb156100117f2
　
　github(Godotのプロジェクトマネージャーからインポートして利用できます）
　https://github.com/footinglow/Godot4/tree/main/02_study/S13_CharacterDesignAnimation_002

# 新規シーンを作成する
　敵の砦（Enemyシーン）のデザインをするために新規シーンを作成します。

　シーンメニューから「新規シーン」を実行しましょう。「3Dシーン」ボタンを押下してNode3Dを追加します。名称を「DesignEnemyFort」(Fort:砦）にします。
　「res://Design/design_enemy_fort.tscn」のパスになるようにDesignフォルダの下に保存しましょう。
![design_enemy_fort.tscn - S14_CharacterDesign_Enemy - Godot Engine 2023_03_06 9_02_20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/6eb80112-845f-66db-c0b5-5071d7957030.png)

## ベースの円柱を作成
　CSGMesh3Dノードを組み合わせて作りましょう。
　CSGMesh3D以外にもいくつか種類がありますが、今回はCSGMesh3Dを使用します。
　![新規 ビットマップ イメージ.bmp - ペイント 2023_03_06 9_13_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/bbb2333e-487d-ee72-deab-b21bd6e26db4.png)

　DesignEnemyFortを右クリックして、子ノードを追加からCSGMesh3Dを追加します。
　名称をOuterWall（外壁）に変更します。
　OuterWallを選択した状態で、インスペクタのCSGMesh/Meshに新規CylinderMeshを設定します。
　円柱のアイコンをクリックして詳細設定を表示して、Heightを1mにします。
![(_) design_enemy_fort.tscn - S14_CharacterDesign_Enemy - Godot Engine 2023_03_06 9_56_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/b6318f8b-5e3b-d906-595d-1dc907058727.png)

##　天井を作成
　CSGMeshは親子にすることで演算するので、OuterWallノードの子ノードとして追加していきます。
　OuterWallを右クリックして、子ノードを追加からCSGMesh3Dを追加します。
　名称をCeilingに変更します。
　Ceilingを選択した状態で、インスペクタのCSGMesh/Meshに新規CapsuleMeshを設定します。
　カプセルアイコンをクリックして詳細設定を表示して、Heightを1.5mに設定します。
　またNode3/Transform/position/yを0.4mにします。
![(_) design_enemy_fort.tscn - S14_CharacterDesign_Enemy - Godot Engine 2023_03_06 11_32_30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/81a379c4-3468-f12c-db2c-8789d4eb0c28.png)

:::note
 2023/3/1の4.0stable版を使用していますが、インスペクタに値を設定しても表示が更新されないことがあります。シーンからノードを選択しなおすときちんと表示されるようです。
　またバグは残っているので、理解しながら使っていきましょう。
:::

##　出入り口を作成
　次にカプセル型を「引き算」で追加して出入り口をつくりましょう。
　OuterWallを右クリックして、子ノードを追加からCSGMesh3Dを追加します。
　名称をDoorwayに変更します。
　Doorwayを選択した状態で、インスペクタのCSGMesh/Meshに新規CapsuleMeshを設定します。
　カプセルアイコンをクリックして詳細設定を表示して、Radiusを0.2m、Heightを1.0mに設定します。
　またNode3/Transform/position/yを-0.4m、zを0.5mにします。

　**CSGPrimitive3D/Operationを「Subtraction」を選択します。**
![(_) design_enemy_fort.tscn - S14_CharacterDesign_Enemy - Godot Engine 2023_03_06 11_40_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/4702d2ec-da3a-37fb-ff35-b24da212bc00.png)
引き算指定すると黄色っぽく表示されます。
![design_enemy_fort.tscn - S13_CharacterDesignAnimation_002 - Godot Engine 2023_03_06 20_59_31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/afd56e77-3f4b-3efe-3a2e-53f4034a3b47.png)


　保存しましょう。

## 一度Enemyとして表示します。
　入り口の感じを見たいので、Enemyとして表示します。
　
　enemy.tscnを開いて、Enemyノードにdesign_enemy_fort.tscnをドラッグアンドドロップして、子ノードとして追加します。
　もともとあったMeshInstance3Dは削除します。

　design_enemy_fort.tscnのEnemyのNode3D/Transpose/y=0にしたときに地面に設置しているように見せたいので、各ノードの位置を調整します。
　
* Enemyノード
　Node3D/Transposeの x=y=z=0にする。
　（中央のビューポートから消えたら、「O」キーを押下しましょう。）
* Enemy/CollisionShape3Dノード
　Node3D/Transposeの y=1.0mに設定して、x=z=0にする。
* DesignEnemyFortシーンインスタンス
　Node3D/Transposeの y=0.5mに設定する

　右側面図などにして、各ノードが地面に接地していることを確認しましょう。
　それぞれクリックすると位置が確認できると思います。
　・CollisionShape3D
　・BulletSensor
　・Marker3D
　・DesignEnemyFort
![C__Users_hathr_Videos_Captures [ main ↓0 ↑0 ] 2023_03_06 21_04_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/fab9fcb4-9d87-13b0-67b6-6fdef68d86b1.png)


　またglobal.tscnを開きなおすとEnemyとEnemy2が宙に浮いていると思います。
　Node3D/Transform/yを０に設定して地面につけましょう。

:::note
　2023/3/1リリースのGodot4.0stable版を使用していますがEnemyノードのx=y=z=0にしてからglobal.tscnシーンを開きなおすと、global.tscnの中のEnemyの位置もx=y=z=0になりました。
　enemy.tscnシーンの位置と、enemy.tscnをインスタンス化したglobal.tscn内のEnemyの位置はリンクしないと思うのでバグでしょうか？
　あらためて、global.tscnを開きなおしてEnemyの位置を設定しなおしましょう。

　enemy.tscnはもともとglobal.tscnのEnemyブランチをシーンファイル化したものなので、何かの関連が残っていたのかもしれないですね。
[【Godot 4.0】スマホ３Dゲームを作るための勉強　その１０　敵を増やしました。またBullet vs Enemyの処理を実装しました。](https://qiita.com/FootInGlow/items/195236f04bba83cad129)
:::

　実行します。
　敵の砦があり、出入り口も確認できます。
![C__Users_hathr_Videos_Captures [ main ↓0 ↑0 ] 2023_03_06 21_07_40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/d65dae0e-d57e-b140-e359-e4c7dbc7671d.png)


# 敵の砦のデザインを完成させる
　砦のデザインを完成させましょう。

## 内部を空洞にする
　res://Design/design_enemy_fort.tscnを開きます。
　OuterWallを右クリックして、子ノードを追加からCSGMesh3Dを追加します。
　名称をRoomに変更します。
　Roomを選択した状態で、インスペクタのCSGMesh/Meshに新規CapsuleMeshを設定します。
　カプセルアイコンをクリックして詳細設定を表示して、Radiusを0.4m、Heightを1.5mに設定します。

　Roomのカプセル型を引き算して空間をつくりたいので、CSGPrimitive3D/Operationを「Subtraction」を選択します。

　※確認用のCamera3DとDirectLight3Dを追加してカメラプレビューした場合の画面です。
　　DirectLight3Dは追加したまま、Camera3Dは下記の位置に移動しました。
![came.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/a20301e3-903a-9ee6-799c-c907c566a1ef.png)


## 旗をつける
　MeshInstance3Dの円柱で旗竿を作成し、立方体を薄くして旗をつくります。

　DesignEnemyFortを右クリックして子ノードを追加から「MeshInstance3D」を追加します。名称は「FlagPole」（旗竿）にします。
　FlagPoleを選択した状態で、インスペクタのMeshInstance3D/Meshに新規CylinderMeshを設定します。
　円柱のアイコンをクリックして詳細設定の中のTop RadiusおよびBottom Radius両方0.02mに設定します。
　またHeightを1mにします。
　Node3D/Transform/position/yを1.5mを設定します。

　次にFlagPoleを右クリックして子ノードを追加から「MeshInstance3D」を追加します。名称は「Flag」にします。
　Flagを選択した状態で、インスペクタのMeshInstance3D/Meshに新規BoxMeshを設定します。
　立方体のアイコンをクリックして詳細設定の中のSizeのx、yを0.5m、ｚは0.01mにします。
　Node3D/Transform/position/xを0.25m、yも0.25mに設定します。
![C__Users_hathr_Videos_Captures [ main ↓0 ↑0 ] 2023_03_06 22_14_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/c8793b3b-269a-c63f-c268-93b14fe59f3e.png)

## 旗に色を設定する
　色をつけましょう。
　旗は敵のSoldierと同じ色にします。

　Flagを選択した状態で、インスペクタ内のMeshInstance3D/Meshのアイコンをクリックして詳細設定を表示します。
　Material　<空>をクリックして「クイックロード」を実行します。
　Design/design_enemy_soldier.tresを選択しましょう。
![スクリーンショット (62).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/55bf4c64-1246-629c-ba2b-e6ce3c25080d.png)
旗に色がつきました。
![C__Users_hathr_Videos_Captures [ main ↓0 ↑0 ] 2023_03_06 22_16_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/f4950290-16cf-b811-b8a4-1fb7b4eb7584.png)

## 砦の外壁に色を設定する
　砦に色を設定しましょう。
　
　OuterWallを選択した状態で、インスペクタ内のMeshInstance3D/Meshのアイコンをクリックして詳細設定を表示します。
　Material　<空>をクリックして「新規StandardMaterial3D」を選択、実行します。
![スクリーンショット (63).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/48dd34e8-4793-40cd-0cca-4f7fc16bd5d5.png)

　Materialの横に表示された球のアイコンをクリックして詳細設定を表示します。
　Albedoで表面色を設定することができるので、Albedoを開いて、Colorの横の白い長方形をクリックするとカラーピッカーが表示されます。
![スクリーンショット (64).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/7af45584-f05d-8ae0-3d81-af964bb8dd45.png)
色を設定しましょう。焦げ茶色にしました。
![スクリーンショット (73).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/a69cb49f-0aae-5154-e8f8-887c1a41c176.png)

　設定したMaterialをファイル出力します。
　Materialの横のアイコンの右の「ｖ」アイコンをクリックして「保存」を実行します。
![スクリーンショット (74).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/fe30d47b-bd54-af2e-5b4f-8624d14cec5f.png)
Designフォルダに移動して、「design_enemy_fort.tres」という名前で保存します。
![スクリーンショット (68).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/f61a24d3-bf4e-bdc2-b9e1-064a50c97ad7.png)
保存されました。
![C__Users_hathr_Videos_Captures 2023_03_06 17_20_44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/ecab543d-d807-2126-bf4f-7803b1926646.png)

## 砦の天井に色を設定する
　砦の屋根の部分にも色を設定しましょう。

　Ceilingを選択した状態で、インスペクタ内のMeshInstance3D/Meshのアイコンをクリックして詳細設定を表示します。
　Material　<空>をクリックして「クイックロード」を実行します。
　「design_enemy_fort.tres」を選択しましょう。
![スクリーンショット (69).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/26677366-76c1-6aef-fe0f-bef8c3e42843.png)
屋根にも色が付きました。
![C__Users_hathr_Videos_Captures [ main ↓0 ↑0 ] 2023_03_06 22_24_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/2292253d-335f-baff-609f-5c77b6af7ec9.png)

# 実行する
　実行する前に確認用にdesign_enemy_fort.tscnに追加したDirectLight3DとCamera3Dを削除します。
　特にDirectLight3Dをそのままにするとライトが３つになるので明るすぎて色がつぶれます。

　実行しましょう。
![C__Users_hathr_Videos_Captures [ main ↓0 ↑0 ] 2023_03_06 22_27_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/590eb3f6-4e5f-637c-7b3c-18fd5f739e3a.png)

　以上です。