【Godot 4.0】スマホ３Dゲームを作るための勉強　その１５　Playerをデザインする。アニメーションも。

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

# 目的
　Playerをデザインします。
　砲台から人が飛び出すようにしたいです。
![フォト 2023_03_06 23_14_06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/d99180bb-0cf8-0abb-8aa5-80412b49452a.png)


# ベースプロジェクト
下記で作成したプロジェクトをベースに機能追加をします。
　【Godot 4.0】スマホ３Dゲームを作るための勉強　その１４　CSGMesh3Dで敵の砦をデザインする
　https://qiita.com/FootInGlow/items/6f06196980bdb8523648
　
　github(Godotのプロジェクトマネージャーからインポートして利用できます）
　https://github.com/footinglow/Godot4/tree/main/02_study/S14_CharacterDesign_Enemy

# Playerをデザインする
　シーンメニューから「新規シーン」を選択し、「３Dシーン」ボタンを押下します。
　ルートノードとしてNode3Dが生成されるので、「DesignCannon」に名称を変更します。
　Designフォルダに保存しましょう。「design_cannon.tscn」という名称です。

## 砲を乗せる台座を作成する
　「DesignCannon」を右クリックして、子ノードを追加からMeshInstance3Dを追加します。名称を「Chassis」に変更します。
　「Chassis」を選択した状態で、インスペクタのMeshInstace3D/Meshに「新規BoxMesh」を設定します。
　立方体のアイコンをクリックして、詳細設定を開きます。
　Sizeのxに1.5m、yに0.3m、zに2.0mを設定します。
![(_) design_cannon.tscn - S15_CharacterDesign_Player - Godot Engine 2023_03_06 23_31_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/56fc703f-e1d9-7dfd-e9af-fd47fa90df6d.png)

　色も設定します。
　Materialに新規StandardMaterial3Dを設定します。
　Materialの右に表示されたアイコンをクリックして詳細設定を表示します。
　Albedoを開いてColorの白い長方形をクリックして、カラーピッカーを表示します。
　明るい茶色を設定しました。（R,G,B=160,130,40)
　![(_) design_cannon.tscn - S15_CharacterDesign_Player - Godot Engine 2023_03_06 23_33_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/363d0365-b1fa-30c5-a176-9f04d0f28fc5.png)

##　車輪を追加する
　「Chassis」を右クリックして、子ノードを追加からMeshInstance3Dを追加します。名称を「Tire_Right」に変更します。
　「Tire_Right」を選択した状態で、インスペクタのMeshInstace3D/Meshに「新規CylinderMesh」を設定します。
　立方体のアイコンをクリックして、詳細設定を開きます。
　Heightを0.3mにしましょう。

　Node3D/Transform/position/xを1mに設定します。
　Node3D/Transform/rotation/zを90°に設定します。
![(_) design_cannon.tscn - S15_CharacterDesign_Player - Godot Engine 2023_03_06 23_38_52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/beb0cbb9-c623-4f18-a9f3-4975d82a5645.png)

　色も設定しまMaterialの右す。
　Materialに新規StandardMaterial3Dを設定します。
　Materialの右に表示されたアイコンをクリックして詳細設定を表示します。
　Albedoを開いてColorの白い長方形をクリックして、カラーピッカーを表示します。
　黒を設定しました。
![スクリーンショット (75).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/3b28b37b-deab-9f7c-5e6b-f7de0cd10e4e.png)

　反対側のタイヤを作ります。
　「Tire_Right」をコピーして、Chassisを右クリックして貼り付けしましょう。
　Tire_Right2という名前になるので「Tire_Left」に名称変更します。
　Node3D/Transform/position/xを-1mに設定します。
![C__Users_hathr_Videos_Captures [ main ↓0 ↑1 ] 2023_03_06 23_44_37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/58156384-2129-d66e-0d84-4f3fed9811e5.png)

## 砲をつくります。
　カプセルと円錐台を使って砲をつくります。
　
　まずカプセルを追加します。
　「Chassis」を右クリックして、子ノードを追加からMeshInstance3Dを追加します。名称を「GunBody」に変更します。
　「GunBody」を選択した状態で、インスペクタのMeshInstace3D/Meshに「新規capsuleMesh」を設定します。
　サイズはそのまま使います。

　Node3D/Transform/position/yを0.5mに設定します。
　Node3D/Transform/rotation/xを80°に設定します。
　![(_) design_cannon.tscn - S15_CharacterDesign_Player - Godot Engine 2023_03_06 23_54_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/47167c77-2c18-c1e2-e2f1-bcc4e58ba0bd.png)

　次に「GunBody」を右クリックして、子ノードを追加からMeshInstance3Dを追加します。名称を「GunTop」に変更します。
　「GunTop」を選択した状態で、インスペクタのMeshInstace3D/Meshに「新規CylinderMesh」を設定します。
　立方体のアイコンをクリックして、詳細設定を開きます。
　
　Top Radiusは1m、Bottom Radiusは0.5m、Heightは1.5mに設定します。
![(_) design_cannon.tscn - S15_CharacterDesign_Player - Godot Engine 2023_03_06 23_56_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/96b3b477-e324-f1c9-f495-a2c977cc5909.png)

　GunTopのNode3D/Transform/position/yを1.25mに設定します。
![(_) design_cannon.tscn - S15_CharacterDesign_Player - Godot Engine 2023_03_06 23_58_22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/f751a149-def6-e889-cfc4-6f54ac014347.png)
　砲台に見えるでしょうか。
![(_) design_cannon.tscn - S15_CharacterDesign_Player - Godot Engine 2023_03_06 23_59_09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/0b966a22-ac3f-b8b7-3bdc-ef09b9e9b892.png)

## 色を変更します。
　色を変更します。濃いグレーにしたいです。

　「GunBody」を選択した状態で、インスペクタ内のMeshInstance3D/Meshのアイコンをクリックして詳細設定を表示します。
　Material　<空>をクリックして「新規StandardMaterial3D」を選択、実行します。
![スクリーンショット (77).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/4d044d4c-d61c-84f7-d7c2-f033cf65201b.png)
　Materialの横に表示された球のアイコンをクリックして詳細設定を表示します。
　Albedoで表面色を設定することができるので、Albedoを開いて、Colorの横の白い長方形をクリックするとカラーピッカーが表示されます。濃いグレーを設定しました。
![スクリーンショット (79).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/0928dbfa-fadf-f8bf-1cd2-1d2962efb5f3.png)

　Material情報をファイルに出力します。
　Materialの右の球のアイコンのさらに右に「ｖ」アイコンをクリックして、保存を実行します。
![スクリーンショット (80).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/146d302f-c24c-e2b6-84a0-1f9d73af228e.png)
「design_cannon.tres」という名称にして、Designフォルダの下に保存します。
![スクリーンショット (81).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/9255acb8-ecc5-4e1c-9f18-dfa10edeb6f7.png)
保存されました。
![C__Users_hathr_Videos_Captures 2023_03_07 8_34_44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/70f82aa7-04f9-45e6-7a41-3b6f8476932e.png)

　保存したMaterialファイルを砲身の先端に適用しましょう。

　「GunTop」を選択した状態で、インスペクタ内のMeshInstance3D/Meshのアイコンをクリックして詳細設定を表示します。
　Material　<空>をクリックして「クイックロード」を選択、実行します。
![スクリーンショット (82).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/e5b3de44-6ef1-c7af-efd1-0cda2fb174ff.png)
Design/design_cannon.tresを選択します。
![スクリーンショット (83).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/39518624-0d1b-3911-4675-fa8ea92528d5.png)
　完成しました。
![(_) design_cannon.tscn - S15_CharacterDesign_Player - Godot Engine 2023_03_07 8_41_29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/a16f93b4-22a2-6e46-2864-c509b2115355.png)

## 位置を調整しましょう。
　y=0の時に接地するようにします。
　右側面図を表示します。埋まっていると思います。
![(_) design_cannon.tscn - S15_CharacterDesign_Player - Godot Engine 2023_03_07 8_56_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/6b203599-79de-b540-f317-2400d7d7ac6c.png)
　Chassisを選択して、インスペクタのNode3/Transform/position/yに0.5mを設定します。
　地面に接地するようになりました。
![C__Users_hathr_Videos_Captures 2023_03_07 8_58_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/33b3fb21-2128-349f-3008-902d9e0bf641.png)

　保存しましょう。

# Player.tscnに適用しましょう。
　global.tscnを開きます。
　res://Design/design_cannon.tscnをシーン内のPlayerノードにドラッグアンドドロップします。
　Player/MeshInstance3Dは不要になりますので削除します。　
![スクリーンショット (84).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/3b67a785-ef21-0747-38e8-d4ae7e3fca6e.png)
　大きいので縮小します。
![(_) global.tscn - S15_CharacterDesign_Player - Godot Engine 2023_03_07 9_02_48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/1282b336-e691-acc4-47f1-9ee3b4f62700.png)
　DesignCannonシーンインスタンスを選択して、
　Player/DesignCannonを選択した状態で、インスペクタのNode3D/Transform/Scale/xを0.3にします。
　y,zも連動しているので、0.3に代わります。
![(_) global.tscn - S15_CharacterDesign_Player - Godot Engine 2023_03_07 9_04_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/9ba45db1-9664-f5b6-01f2-0d15245aa9f5.png)

　位置の調整をしましょう。
　右側面図にすると浮いています。
![ペイント 2023_03_07 9_05_45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/a266ca2f-d91b-5308-0440-13c8db841529.png)

* Playerノード
 Playerを選択してインスペクタのNode3/Transform/position/yを0mにします。

* CollisionShape3D
　衝突形状が球では形が合わないので、BoxMeshに変更します。

　　Player/CollisionShape3Dを選択した状態でインスペクタのMeshInstace3D/Shapeの「SphereShape3D」の右の「ｖ」をクリックして、「新規BoxShape3D」を選択します。
![スクリーンショット (86).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/626bfecd-f047-e64a-fdf6-37f3ae721a35.png)

　サイズを調整しましょう。
　インスペクタのCollisionShape3D/ShapeのBoxShape3Dをクリックして詳細設定を表示します。
　Sizeのｘおよびｙは0.5m、zは0.8mに設定します。
　Node3D/Transform/position/yに0.25m、zに-0.1mを設定します。
![(_) global.tscn - S15_CharacterDesign_Player - Godot Engine 2023_03_07 9_18_27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/245a3be5-6d2b-d974-83ec-38ba77acc20a.png)

　実行しましょう。

# アニメーションを設定する
　Cannonに躍動感が欲しいのでアニメーションをつけましょう。
　
　砲台をぶるぶる動かして、砲身が脈打つようにしましょう。

　res://Design/design_cannon.tscnを開いて、「DesignCannon」を右クリックして子ノードを追加から「AnimationPlayer」を追加します。

　下のほうにアニメーション用ウインドウが表示されるので、「アニメーション」メニューから新規を選択します。
![スクリーンショット (88).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/10cc287d-b9c9-ca35-27dc-54ba9b4a058b.png)
「Live」と入力してOKボタンを押下します。
　下図の黄色い囲みの中を設定します。
　・読み込み後自動再生をON（クリックして青にする）
　・アニメーションループを有効（クリックして青にする）
　・アニメーションの長さを0.5秒にする。
![design_cannon.tscn - S15_CharacterDesign_Player - Godot Engine 2023_03_07 9_31_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/98ef5088-8dbb-69f9-1ca5-d00d4522f01d.png)

　プロパティトラックとして、Chassis/GunBodyのScale、Chassisのpositionを追加します。

　「＋トラックを追加」メニューから「プロパティトラック」を実行します。
![スクリーンショット (89).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/7fd1fa82-a7c7-9506-a039-f8ac97eddba0.png)
Chassis/GunBodyを選択します。
![スクリーンショット (90).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/a0b91858-a4fe-6f6b-e2bb-ae0e02e2e9be.png)
Node3D/Scaleを選択します。
![スクリーンショット (92).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/af2be688-96ff-42eb-462a-dd57b5aec16b.png)

　トラックが追加されました。

　同様に手順で、Chassisのpositionのトラックも追加しました。

　キーポイントも追加します。
　GunBodyのscaleの右側の0秒、0.1秒,0.5秒のあたりを右クリックして、キーポイントを合計3点挿入します。
　Chassisのpositionの右側の0秒、0.25秒のあたりを右クリックして、キーポイントを合計2点挿入します。
![(_) design_cannon.tscn - S15_CharacterDesign_Player - Godot Engine 2023_03_07 9_40_56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/5e359656-fad8-3d6e-15eb-27e182e62722.png)

　キーポイントをクリックするとインスペクタに設定可能情報が表示されるので、下記の表のように設定します。

* Chassis/GunBodyのscaleのx,y,z
　最初1.1倍の大きさから0.1秒かけて1.0倍に戻って、その後0.4秒間は変化なし、というアニメーションです。

| 0秒 | 0.1秒 | 0.5秒 |
|:----|:---|:--|
|1.1|1.0|1.0|

* Chassisのposition(xとzは0°です）
　左右に±1°ぶるぶる震えるようなアニメーションです。

|0秒|0.5秒|
|:-|:-|
|y=1°|y=-1°|

　再生ボタンを押下して動かしてみましょう。
　![design_cannon.tscn - S15_CharacterDesign_Player - Godot Engine 2023_03_07 9_31_04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/5bac3c13-06c9-09af-1ebc-1d38c20a6c99.png)
![(_) design_cannon.tscn - S15_CharacterDesign_Player - Godot Engine 2023_03_07 9_59_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/446426dc-427f-c267-3c38-1397b4d23c36.png)

# 背景を設定します。
　地面がグレーでは味気ないので、草原をイメージして緑にしましょう。

　res://global.tscnを開きます。
　StaticBody3D/MeshInstance3D（地面ってわかりにくいですね）を選択して、インスペクタのMeshInstace3D/Meshの右の長方形アイコンをクリックして詳細設定を表示します。
　Materialに新規StandardMaterial3Dを設定します。
　Materialの右に表示された球のアイコンをクリックして詳細設定を表示します。
　Albedoを開いてColorの白い長方形をクリックして、カラーピッカーを表示します。
　緑を設定しました。
　![スクリーンショット (93).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/def15f54-737c-70bf-d8a7-c4ae9df9a8da.png)

# カメラの角度を調整します。
　奥の敵の砦の旗が見えないので、カメラの角度を調整します。

　global.tscnを開いて、Camera3Dを選択します。
　インスペクタのNode3/Transform/rotation/xを-55°に変更します。
![C__Users_hathr_Videos_Captures 2023_03_07 10_27_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/708460e0-ce3a-7219-1094-d27dc0e521a9.png)

　実行します。
![Screenshot 2023_03_07 10_26_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/a26b95c1-3fb2-6ff6-8466-c890a3ca2d4f.png)

　以上です。