【Godot 4.0】スマホ３Dゲームを作るための勉強　その３４　敵の砦を倒したときにGPUParticles3Dで煙を表示する

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

# 目的
　敵の砦を倒した時に倒壊するアニメーションを追加しましたが、煙を表示を追加したいと思います。
　煙の表示にはGPUParticles3Dノードを追加して、Godotのパーティクル機能を使用します。
![スクリーンショット (599) - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/8117f0c9-8b8d-47b0-13da-135f71f20f4c.png)
# ベースプロジェクト
　下記で作成したプロジェクトをベースに機能追加をします。
　【Godot 4.0】スマホ３Dゲームを作るための勉強　その３３　デバッグ
　https://qiita.com/FootInGlow/items/0b49328748973bd0db00
　
　github(Godotのプロジェクトマネージャーからインポートして利用できます）
　https://github.com/footinglow/Godot4/tree/main/02_study/S33Debug
　※別途ダウンロードが必要です。
　　　res://assets/texture/godot-material-dpa-1.0.1/Readme.txt及び
　　　res://assets/texture/AllSkyFree1.0/Readme.txtを参照

# GPUParticles3Dで使用する画像をダウンロードする
　下記のWebサイトのparticle-packをダウンロードしました。
　ライセンスはCreative Commons CC0です。

　Particle Pack · Kenney
　https://www.kenney.nl/assets/particle-pack

　解凍して、kenney_particle-pack/PNG (Transparent)/smoke_08.pngを使用します。

# プロジェクトに配置する
　assets/particles/kenney_particle-packフォルダを作成して、smoke_08.pngを配置します。
![スクリーンショット (535).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/9a69f482-7781-32ff-acf8-eb94041d0175.png)
　Godotのウィンドウに切り替えると自動でインポートされます。
![スクリーンショット (536).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/278804ca-168e-d79d-198c-fb274fc1fd4b.png)

# GPUParticles3Dノードを追加する。
　敵の砦が倒れるときのアニメーションノードに煙パーティクルを追加します。
　res://Decorations/enemy_defeated_animation.tscnを開きます。
　
　ルートノードEnemyDefeatedAnimationを右クリックして、子ノードを追加から「GPUParticles3D」を追加します。
　「SmokeParticles」に名称を変更します。
![スクリーンショット (537).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/56544056-2f81-3514-c36b-a8db31c82d93.png)

# GPUParticles3Dを設定していきます。

:::note
　GPUParticles3DのProcess MaterialでParticleの発生の仕方や動きを設定します。
　GeometryInstance3D/GeometryのStandardMaterial3Dでテクスチャ、透明設定、ビルボード設定など描画に関する設定をしていきます。
　設定項目が多くて迷子になるので、よく確認しながら設定しましょう。
:::

## Process Materialを設定する
　GPUParticles3D/Process Materialを開き、Process Materialの右の＜空＞をクリックして、「新規ParticleProcessMaterial」を選択します。
![スクリーンショット (538).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/1e2c2c71-b693-8ebf-e660-cd4ec01c6aa2.png)
## Draw Passedを設定する
　GPUParticles3D/Draw Passesを開いて、Pass 1の右の＜空＞をクリックして、新規QuadMeshを選択します。
　QuadMeshは2次元平面なので、今回使用する2次元のテクスチャを貼り付けるのによさそうです。
![スクリーンショット (539).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/06682ca6-3672-8a59-780e-fc33eb43da14.png)
## 新規StandardMaterial3Dを設定する
　GeometryInstance3D/Geometryを開いて、Material Overrideの右の＜空＞をクリックして、「新規StandardMaterial3D」を設定します。
![スクリーンショット (541).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/b583773f-dd46-7aea-8019-98df3cb01a98.png)

## 確認
　このような形になりました。
　この後はGeometryInstance3D/GeometryのStandardMaterial3Dにテクスチャなど設定して、そのあとに、GPUParticles3DのProcess MaterialでParticleの発生の仕方や動きを設定します。　
　![スクリーンショット (542).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/9e558923-735d-97ca-8fc3-663ed691f303.png)

　今の時点でビューを見ると、敵の砦から四角ものが下に落ちているように見えると思います。
　Particleの動きが見えるようにしたいので、GPUParticles3D/Amountを1にします。
　1秒に1枚四角いものが落ちる様子が見えるようになりました。
![スクリーンショット (549).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/b2d821d1-a0f8-aa1f-c456-db52d3c73021.png)
　
## テクスチャの設定
　Particleのテクスチャを設定します。
　GeometryInstance3D/Geometry/Material Overrideの右の球をクリックして詳細設定を開きます。
　Albedoを開き、textureの右の＜空＞をクリックして、クイックロードを実行します。
![スクリーンショット (550).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/795bfd7e-2131-d800-f1fa-f2496a6f5391.png)
　最初に配置した、「assets/particles/kenney_particle-pack/smoke_08.png」を選択します。
![スクリーンショット (551).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/a07dc1b4-7dd7-c986-6397-af99ae31f861.png)

　こんな感じになります。
![スクリーンショット (552).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/7ea786c4-c2b0-e9f8-fa80-dffeb0f7357a.png)
　
　次に透明処理を有効にします。
　Material Override詳細設定のTransparencyを開いてTransparencyを「Alpha」に設定します。
　また影の処理は不要なので、Shadingを開いてShading Modeを「Unshaded」に設定します。
![スクリーンショット (553).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/6f204593-12c3-d082-b938-a1534183818e.png)
　きれいな？煙が表示されるようになりました。
![スクリーンショット (555).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/1b225c34-a191-ecd4-8cbc-20135a0c0c01.png)

# GPUParticles3DのProcess Materialのための設定
　続いて、GPUParticles3DのProcess Materialの処理に関係のある項目をいくつか設定します。
　GeometryInstance3D/Geometry/Material Override詳細設定の続きです。

## Vertex Color
　Vertex Colorを開いて、「Use as Albedo」をオンにします。
　ParticleのColor変化が有効になります。
## Billboard/Mode
　BillBoardを開いてModeを「Particle Billboard」にします。
　Particleのテクスチャが常に正面を向くようになります。ビューの角度を変えても煙が常に正面に見えるようになります。
## Billboard/Keep Scale
　BillBoardを開いてKeep Scaleを「オン」にします。
　ParticleのScale変化が有効になります。
![スクリーンショット (559).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/dc16c4d9-6484-195d-9113-7844eddc7194.png)

# GPUParticles3DのProcess Materialを設定する
　GPUParticles3DのProcess Materialを設定して、Particleの動きを設定します。 

　GPUParticles3D/Process Material/Process Materialの右の「ParticleProcessMaterial」をクリックして詳細設定を開いて、下記を設定していきます。
 
## Gravityを0にする
　Particleが下に落ちるのはGravityが設定されているためです。
　x=y=z=0にします。
![スクリーンショット (561).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/2307a237-ad5a-47d1-86b6-78b3ba066ea4.png)
　煙が中央にとどまって落ちなくなりました。
![スクリーンショット (560).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/0d5dd7fa-a031-d34f-e8c7-f026dfb1a94b.png)

# Emission Shape
　Particleの発生場所をある程度散らばるようにします。
　Emission Shapeを「Sphere」にします。Sphere Radiusが0.5なので、半径0.5mの球の中にランダムに煙が発生するようになります。
![スクリーンショット (569).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/16cbea22-27a1-c5d2-ce0f-d2fb2ebf6110.png)
　GPUParticles3D/Amountを10くらいします。
　煙っぽくなってきました。
![スクリーンショット (568).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/f54e8b69-f4a1-f6da-6f66-c743d4619adf.png)

# Initial VelocityとDirectionを設定
　発生した煙はいろいろな方向に移動するようにしたいです。
　Initial VelocityのVelocity Maxを１にします。Minは0なので、おそらく0～1m/sの速度がランダムに与えられるのだと思います。
　またDirectionのSpreadを180にします。±180度の範囲でランダムに方向が設定されます。
![スクリーンショット (575).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/4253816f-221c-2068-220c-99ae416dfea3.png)
　煙が広がるようになりました。
![スクリーンショット (574).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/22581b91-c39c-0a95-0cf5-727eed8b6139.png)

## Scaleを設定する
　煙は発生してから時間が経過すると広がると思うので、時間経過とともに大きくしたいです。
　Scaleの「Scale Curve」の右の＜空＞をクリックして、「新規CurveTexture」を設定します。
![スクリーンショット (576).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/c91ad67d-dd41-50fd-6cdd-7b76b539252e.png)
　Scale Curveの右に設定した「CurveTexture」をクリックして詳細設定を開きます。
　さらに、Curveの右の黒い長方形をクリックすると、Curveのエディット画面が開きます。
　赤枠の部分です。

　左から右に向かって時間経過を表してます。上下はScaleで０が一番小さくて、１が一番大きいサイズを表していると思います。
![スクリーンショット (577).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/3ba07fe6-f192-4ed3-0233-1e1ad7d072d1.png)
白い線の上で右クリックするとポイント（ドラッグできる白い四角）を追加することができます。
![スクリーンショット (579).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/b8f47f47-0050-c51c-008e-69894744dcd5.png)
　このような感じで、時間経過とともに大きくなるようにしました。
　またScale Maxを２に変更しています。
![スクリーンショット (581).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/8c7d978a-3f70-6aa9-934f-f1e8fa59fb40.png)
　
　このような感じです。
![スクリーンショット (582).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/01eff2f5-f6df-bca8-c959-bd1d967bf0fb.png)

## Colorを設定する
　煙が時間経過とともに薄くなるようにします。Colorのアルファを操作して透明になっていくようにします。
　Colorの「Color Ramp」の右の＜空＞をクリックして、新規GradientTexture1Dを設定します。
![スクリーンショット (583).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/40c662d6-e235-3be4-3d71-91f9014cc38c.png)
　設定された、Color Rampの右のグラデーションをクリックして詳細設定を表示します。
　さらにGradientの右のグラデーションをクリックすると大きなグラデーションが表示されます。
　時間経過ともに変化する色を表していると思います。左から右に時間が経過します。
![スクリーンショット (584).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/2f80440b-41a5-b17f-f1e6-69d451ce078c.png)
　グラデーションの真ん中位をクリックするとポイントが増えます。
![スクリーンショット (585).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/b4713aeb-0437-c7ca-e9d4-085f264e68b5.png)
　一番右のポイントをクリックします。
　選択されているポイントは２重の線になります。
![スクリーンショット (587).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/1358cec0-1c73-0bd7-9dea-deeac62e16a2.png)
　グラデーションの一番右には選択されているポイントの色が表示されます。クリックするとカラーピッカーが表示されます。
![スクリーンショット (588).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/8b75a7fc-d28c-2e99-df90-46f5c86b039d.png)
　A(アルファ）を0にして、透明にしましょう。
　左から右に時間が経過するので、最後は透明になって消えたように見える予定です。
![スクリーンショット (586).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/1a9a80a5-fd9d-1b4b-d8ad-47cbdcf83e18.png)
　一番左もクリックして色を設定します。黒にしました。

　結構煙っぽくなったのではないでしょうか。
![スクリーンショット (589).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/dffcb983-d1e5-1074-4fe5-3c3835b9163f.png)

# アニメーション時間を伸ばす
　敵の砦は2秒で倒れるアニメーションです。アニメーションが終了するとシーンインスタンスを消すようにしていますが、少し煙を残したいので、アニメーションの時間を4秒に拡張します。
　シーンのAnimationPlayerノードを選択します。
　下部のアニメーション設定画面の右側の「アニメーションの長さ（秒）」を４にします。
![スクリーンショット (590).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/74e921bf-d8bf-51f9-d369-b2219c100cfd.png)

# Particleの表示を確認して調整する
　実行して確認します。思ったより地味です。
　原因は、表示上の小さくなったこと、下半分が地面に隠れていること、後は敵の砦が倒れた直後からParticleを生成し始めるので最初は少ないなどが影響していそうです。
![スクリーンショット (591).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/3c7d46da-a0c4-2585-121e-17acc17e29cf.png)

# 全体的に量を増やす
　全体的に量を増やしましょう。発生（Emit）範囲を半径0.5mから1.0mに広げます。また量も10倍に増やします。

## 発生範囲を広げる
　GPUParticles3D/Process Material/Process Materialの右の「ParticleProcessMaterial」をクリックして詳細設定を開きます。
　Emission ShapeのSphere Radiusを1に変更します（変更前は0.5)
![スクリーンショット (595).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/5b9b6f80-5a2a-3392-e218-573a344908cc.png)
　インスペクタの上の方に戻って、GPUParticles3DのAmountを100に変更して単位時間あたりに生成するParticleの量を増やします。
　GPUParticles3D/Timeを開いて、Preprocessを1秒にしましょう。
　スタート時点でParticleを1秒間生成した状態から開始する効果があります。
![スクリーンショット (597).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/2c220c71-609d-a8e3-9fe9-14de80c8254f.png)
![スクリーンショット (598).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/8951e3f6-83d1-bfa5-c894-eb86a0afd313.png)

## 実行確認
　実行して敵の砦を倒して見た目を確認します。
　少し派手ですがゲーム中の演出であればこのくらいがよいでしょうか。
![スクリーンショット (599) - コピー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/691050/8117f0c9-8b8d-47b0-13da-135f71f20f4c.png)

以上