教學(xué)
展示一下怎麼使用 GPUParticle + Shader 做到下面這兩個效果
從上到下消失
先在 Sprite2D 上套用一個 Shader
讓 Sprite 可以由上往下消失
當(dāng) UV.y 小於參數(shù) dissolve_below 就是透明的 vec4(0.0)
反之就是 原本 texture 的顏色 tex_color
調(diào)整 dissolve_below 的變化
建立一個新的 Node2D 場景
然後新增一個 GPUParticles2D 子節(jié)點
GPUParticles2D 節(jié)點裡新增 ParticleProcessMaterial
在 ParticleProcessMaterial 裡面調(diào)整粒子效果
可以調(diào)整顏色、大小等等
然後把 Gravity 重力調(diào)成 0
重點是要將 Emission Shape 改成 Box
Box Extents的 xy 改成 Sprite 高寬的一半
調(diào)整完後點選 ProcessMaterial 最右側(cè)的勾勾
打開選單選擇 轉(zhuǎn)換為 ShaderMaterial
剛剛調(diào)整的粒子參數(shù)
會自動轉(zhuǎn)換成 particles shader code
（但是 texture 不會保留，比如 GradientTexure 或是 CurveTexture
只會生成對應(yīng)的 shader 程式碼 和 uniform 參數(shù)
所以要再重新設(shè)定）
下圖有調(diào)整粒子數(shù)量、顏色、大小等等
只要畫面是在一個方形內(nèi)生成粒子
粒子固定不動就可以了
接著我們要開始控制粒子生成的位置
先把 GPUParticles2D > Drawing > Local Coords 設(shè)成開啟
讓粒子的座標位置是相對於父節(jié)點的位置
打開剛轉(zhuǎn)換的 particles shader
在 uniform 參數(shù)的最後加上 3 個參數(shù)
sprite：限制粒子只能生成在 sprite 不是透明的位置
down_border、top_border：限制粒子只能生成在 down_border ~ top_border 的範(fàn)圍內(nèi)
找到 shader 裡的 start() function [註解1]
在 function 最後加上這段 code
這裡做的事情是把粒子的位置
轉(zhuǎn)換成 sprite texure 的 uv
然後用 uv 計算出遮罩
把起始位置在遮罩外的粒子的 ACTIVE 屬性設(shè)為 false
這個粒子就不會產(chǎn)生了
粒子的位置資訊是儲存在 TRANSFORM [ 3 ] 裡
所以把位置除上 sprite 大小 + 0.5 就是 uv
然後再以 sprite 的透明度 和 兩個參數(shù) top_border 和 down_border 所夾的區(qū)間當(dāng)成遮罩
用 if 判斷把不在範(fàn)圍內(nèi)的粒子 ACTIVE 設(shè)成 false 就好
設(shè)定一下剛剛 3 個參數(shù)
看一下效果
調(diào)整 down_border 和 top_border 的變化
到這邊基本上就完成了
現(xiàn)在要加入一點變黑加深的效果
重複利用一下剛剛的 particle shader 來做
先將剛才的 particle shader 存檔
在同一個場景裡加入一個新的 GPUParticle2D
新增 ShaderMaterial 載入剛剛存檔的 particles shader
調(diào)整 texture 如下圖
然後在 CanvasItem 裡新增 CanvasItemMaterial
Blend Mode 改成 Subtract
就可以得到類似這個的結(jié)果
最後使用 AnimationPlayer 去調(diào)整這些 shader 的參數(shù)
使用 NoiseTexture 消失
在這裡主要講一下跟前面例子不同的部分
套用在 sprite 的 shader 如下
跟前面的差異是使用 noise texture 判斷哪個部份是要消失的
設(shè)定 shader 的 noise 參數(shù)
FastNoiseLite 的參數(shù)可以自由調(diào)整
設(shè)定好 noise 後看一下效果
調(diào)整 dissolve_below 的變化
直接跳到 particles shader 的部分
多一個 noise 參數(shù)
以 noise 值計算遮罩範(fàn)圍
noise 參數(shù)記得要跟 sprite 套用一樣的 noise texture 才可以
看一下效果
加上一樣的變黑效果
一樣使用 AnimationPlayer 製作動畫
註解 1：particle shader 裡面有 start() 和 process() 兩個 function
一個是在粒子生成的時候執(zhí)行，另一個是生成後會重複執(zhí)行
類似 Node 裡的 _ready() 和 _process()
目前在學(xué)習(xí) shader 製作不同的效果
順便分享一些做出的效果並製作教學(xué)
歡迎給予意見和指教 OAO 掰掰~
相關(guān)學(xué)習(xí)資源：Sprite Explosion Effect Using a Particle Shader - Godot Tutorial
達人
