ゲームエンジンGodot4.0で3Dスマホゲームを作りたいと思いますが、その前にお勉強しています。
2023/3/1にstable版がリリースされました。
Godot_v4.0-stable_win64.exe.zipを使用しています。
目的
敵の砦を倒した時に倒壊するアニメーションを追加しましたが、煙を表示を追加したいと思います。
煙の表示にはGPUParticles3Dノードを追加して、Godotのパーティクル機能を使用します。
ベースプロジェクト
下記で作成したプロジェクトをベースに機能追加をします。
【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を配置します。
Godotのウィンドウに切り替えると自動でインポートされます。
GPUParticles3Dノードを追加する。
敵の砦が倒れるときのアニメーションノードに煙パーティクルを追加します。
res://Decorations/enemy_defeated_animation.tscnを開きます。
ルートノードEnemyDefeatedAnimationを右クリックして、子ノードを追加から「GPUParticles3D」を追加します。
「SmokeParticles」に名称を変更します。
GPUParticles3Dを設定していきます。
GPUParticles3DのProcess MaterialでParticleの発生の仕方や動きを設定します。
GeometryInstance3D/GeometryのStandardMaterial3Dでテクスチャ、透明設定、ビルボード設定など描画に関する設定をしていきます。
設定項目が多くて迷子になるので、よく確認しながら設定しましょう。
Process Materialを設定する
GPUParticles3D/Process Materialを開き、Process Materialの右の＜空＞をクリックして、「新規ParticleProcessMaterial」を選択します。
Draw Passedを設定する
GPUParticles3D/Draw Passesを開いて、Pass 1の右の＜空＞をクリックして、新規QuadMeshを選択します。
QuadMeshは2次元平面なので、今回使用する2次元のテクスチャを貼り付けるのによさそうです。
新規StandardMaterial3Dを設定する
GeometryInstance3D/Geometryを開いて、Material Overrideの右の＜空＞をクリックして、「新規StandardMaterial3D」を設定します。
確認
このような形になりました。
この後はGeometryInstance3D/GeometryのStandardMaterial3Dにテクスチャなど設定して、そのあとに、GPUParticles3DのProcess MaterialでParticleの発生の仕方や動きを設定します。
今の時点でビューを見ると、敵の砦から四角ものが下に落ちているように見えると思います。
Particleの動きが見えるようにしたいので、GPUParticles3D/Amountを1にします。
1秒に1枚四角いものが落ちる様子が見えるようになりました。
テクスチャの設定
Particleのテクスチャを設定します。
GeometryInstance3D/Geometry/Material Overrideの右の球をクリックして詳細設定を開きます。
Albedoを開き、textureの右の＜空＞をクリックして、クイックロードを実行します。
最初に配置した、「assets/particles/kenney_particle-pack/smoke_08.png」を選択します。
こんな感じになります。
次に透明処理を有効にします。
Material Override詳細設定のTransparencyを開いてTransparencyを「Alpha」に設定します。
また影の処理は不要なので、Shadingを開いてShading Modeを「Unshaded」に設定します。
きれいな？煙が表示されるようになりました。
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変化が有効になります。
GPUParticles3DのProcess Materialを設定する
GPUParticles3DのProcess Materialを設定して、Particleの動きを設定します。
GPUParticles3D/Process Material/Process Materialの右の「ParticleProcessMaterial」をクリックして詳細設定を開いて、下記を設定していきます。
Gravityを0にする
Particleが下に落ちるのはGravityが設定されているためです。
x=y=z=0にします。
煙が中央にとどまって落ちなくなりました。
Emission Shape
Particleの発生場所をある程度散らばるようにします。
Emission Shapeを「Sphere」にします。Sphere Radiusが0.5なので、半径0.5mの球の中にランダムに煙が発生するようになります。
GPUParticles3D/Amountを10くらいします。
煙っぽくなってきました。
Initial VelocityとDirectionを設定
発生した煙はいろいろな方向に移動するようにしたいです。
Initial VelocityのVelocity Maxを１にします。Minは0なので、おそらく0～1m/sの速度がランダムに与えられるのだと思います。
またDirectionのSpreadを180にします。±180度の範囲でランダムに方向が設定されます。
煙が広がるようになりました。
Scaleを設定する
煙は発生してから時間が経過すると広がると思うので、時間経過とともに大きくしたいです。
Scaleの「Scale Curve」の右の＜空＞をクリックして、「新規CurveTexture」を設定します。
Scale Curveの右に設定した「CurveTexture」をクリックして詳細設定を開きます。
さらに、Curveの右の黒い長方形をクリックすると、Curveのエディット画面が開きます。
赤枠の部分です。
左から右に向かって時間経過を表してます。上下はScaleで０が一番小さくて、１が一番大きいサイズを表していると思います。
白い線の上で右クリックするとポイント（ドラッグできる白い四角）を追加することができます。
このような感じで、時間経過とともに大きくなるようにしました。
またScale Maxを２に変更しています。
このような感じです。
Colorを設定する
煙が時間経過とともに薄くなるようにします。Colorのアルファを操作して透明になっていくようにします。
Colorの「Color Ramp」の右の＜空＞をクリックして、新規GradientTexture1Dを設定します。
設定された、Color Rampの右のグラデーションをクリックして詳細設定を表示します。
さらにGradientの右のグラデーションをクリックすると大きなグラデーションが表示されます。
時間経過ともに変化する色を表していると思います。左から右に時間が経過します。
グラデーションの真ん中位をクリックするとポイントが増えます。
一番右のポイントをクリックします。
選択されているポイントは２重の線になります。
グラデーションの一番右には選択されているポイントの色が表示されます。クリックするとカラーピッカーが表示されます。
A(アルファ）を0にして、透明にしましょう。
左から右に時間が経過するので、最後は透明になって消えたように見える予定です。
一番左もクリックして色を設定します。黒にしました。
結構煙っぽくなったのではないでしょうか。
アニメーション時間を伸ばす
敵の砦は2秒で倒れるアニメーションです。アニメーションが終了するとシーンインスタンスを消すようにしていますが、少し煙を残したいので、アニメーションの時間を4秒に拡張します。
シーンのAnimationPlayerノードを選択します。
下部のアニメーション設定画面の右側の「アニメーションの長さ（秒）」を４にします。
Particleの表示を確認して調整する
実行して確認します。思ったより地味です。
原因は、表示上の小さくなったこと、下半分が地面に隠れていること、後は敵の砦が倒れた直後からParticleを生成し始めるので最初は少ないなどが影響していそうです。
全体的に量を増やす
全体的に量を増やしましょう。発生（Emit）範囲を半径0.5mから1.0mに広げます。また量も10倍に増やします。
発生範囲を広げる
GPUParticles3D/Process Material/Process Materialの右の「ParticleProcessMaterial」をクリックして詳細設定を開きます。
Emission ShapeのSphere Radiusを1に変更します（変更前は0.5)
インスペクタの上の方に戻って、GPUParticles3DのAmountを100に変更して単位時間あたりに生成するParticleの量を増やします。
GPUParticles3D/Timeを開いて、Preprocessを1秒にしましょう。
スタート時点でParticleを1秒間生成した状態から開始する効果があります。
実行確認
実行して敵の砦を倒して見た目を確認します。
少し派手ですがゲーム中の演出であればこのくらいがよいでしょうか。
以上