0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2023-03-06

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

目的

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

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

 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

 詳細はGODOT DOCにあります。最新英語版ならこちら、日本語版3.5用ならこちらにあります。

敵の砦のデザインを作成する

 作る前にイメージが必要です。
 こんな感じの砦をつくります。
 砦には出入り口があって、敵戦士が出てきます。てっぺんには旗があります。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3639313035302f39656239633362362d303063342d343537662d613661652d3038656162663431323164392e706e67.png

ベースプロジェクト

 下記で作成したプロジェクトをベースに機能追加をします。
 【Godot 4.0】スマホ3Dゲームを作るための勉強 その13 キャラクターの色を設定します
 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

ベースの円柱を作成

 CSGMesh3Dノードを組み合わせて作りましょう。
 CSGMesh3D以外にもいくつか種類がありますが、今回はCSGMesh3Dを使用します。
 新規 ビットマップ イメージ.bmp - ペイント 2023_03_06 9_13_24.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

## 天井を作成
 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

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
引き算指定すると黄色っぽく表示されます。
design_enemy_fort.tscn - S13_CharacterDesignAnimation_002 - Godot Engine 2023_03_06 20_59_31.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

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

 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】スマホ3Dゲームを作るための勉強 その10 敵を増やしました。またBullet vs Enemyの処理を実装しました。

 実行します。
 敵の砦があり、出入り口も確認できます。
C__Users_hathr_Videos_Captures [ main ↓0 ↑0 ] 2023_03_06 21_07_40.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

旗をつける

 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、zは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

旗に色を設定する

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

 Flagを選択した状態で、インスペクタ内のMeshInstance3D/Meshのアイコンをクリックして詳細設定を表示します。
 Material <空>をクリックして「クイックロード」を実行します。
 Design/design_enemy_soldier.tresを選択しましょう。
スクリーンショット (62).png
旗に色がつきました。
C__Users_hathr_Videos_Captures [ main ↓0 ↑0 ] 2023_03_06 22_16_24.png

砦の外壁に色を設定する

 砦に色を設定しましょう。
 
 OuterWallを選択した状態で、インスペクタ内のMeshInstance3D/Meshのアイコンをクリックして詳細設定を表示します。
 Material <空>をクリックして「新規StandardMaterial3D」を選択、実行します。
スクリーンショット (63).png

 Materialの横に表示された球のアイコンをクリックして詳細設定を表示します。
 Albedoで表面色を設定することができるので、Albedoを開いて、Colorの横の白い長方形をクリックするとカラーピッカーが表示されます。
スクリーンショット (64).png
色を設定しましょう。焦げ茶色にしました。
スクリーンショット (73).png

 設定したMaterialをファイル出力します。
 Materialの横のアイコンの右の「v」アイコンをクリックして「保存」を実行します。
スクリーンショット (74).png
Designフォルダに移動して、「design_enemy_fort.tres」という名前で保存します。
スクリーンショット (68).png
保存されました。
C__Users_hathr_Videos_Captures 2023_03_06 17_20_44.png

砦の天井に色を設定する

 砦の屋根の部分にも色を設定しましょう。

 Ceilingを選択した状態で、インスペクタ内のMeshInstance3D/Meshのアイコンをクリックして詳細設定を表示します。
 Material <空>をクリックして「クイックロード」を実行します。
 「design_enemy_fort.tres」を選択しましょう。
スクリーンショット (69).png
屋根にも色が付きました。
C__Users_hathr_Videos_Captures [ main ↓0 ↑0 ] 2023_03_06 22_24_59.png

実行する

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

 実行しましょう。
C__Users_hathr_Videos_Captures [ main ↓0 ↑0 ] 2023_03_06 22_27_09.png

 以上です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?