ETH官方钱包

前往
大廳
主題

【Godot Shader】衝擊波特效 Shockwave Effect

Czu 晞梓 | 2023-10-05 21:11:34 | 巴幣 3302 | 人氣 336

Godot4 Shader 做出衝擊波特效紀錄


先看一下效果 ~ ~




製作過程



因為這個特效是要對畫面上顯示的顏色做出變化
所以要先將套用 Shader 的 Sprite2D 或 ColorRect 等等
覆蓋住要產生作用的範圍


用 shader 採樣螢幕上的顏色,然後顯示 ( 會顯示出底下螢幕畫面的顏色 )


做出衝擊波的指環形狀或叫它甜甜圈形狀
這裡設定 3 個參數 center、size、width

center: 指環中心在螢幕 UV 上的座標
size:指環的半徑
width:指環寬度 ( 半徑往內和外,擴張的距離)

解釋一下 15 ~ 17 行
smoothstep(size-width, size, uv_length)
做出從指環半徑往內一個寬度的圓形

(1.0 - smoothstep(size, size+width, uv_length))
做出從指環半徑往外一個寬度的圓形,黑白反轉 (0、1 反轉)

將兩者相乘就可以得到一個環形

17 行,顯示算出來的數值,可以得到如上圖的結果
在自己做 shader 的時候
可以直接將過程中的數值顯示出來
邊做邊測試是不是自己要的結果

這時候可以調整一下那些參數
看看變化結果


在開發的場景裡看到的可能是一個橢圓形
這是因為我們使用的是 SCREEN_UV
也就是螢幕視窗的 UV 座標
由於 SCREEN_UV 座標的 x, y 軸都會縮放到 0~1 的範圍之內
所以在視窗的長寬比例不同的時候
一樣的距離所對應的像素數量也會不一樣


所以要計算視窗長寬比例
然後對 uv 做一下調整


到這裡就算完整的做出一個環形了
接著要產生衝擊波向外擴張的效果
需要扭曲環形內的區域,如下圖


因為想要的是往外擴的效果
所以要把白色的部分的螢幕顏色
改成上圖中箭頭方向的螢幕顏色
才會有裡面的東西向外擴的效果
同時我們也定義一個參數 intensity 調整扭曲偏移的大小


最後使用 AnimtionPlayer 節點調整 Shader 的參數做出動畫
就可以做出衝擊波的效果啦 ~



其他效果和應用



色散  (Chromatic Aberration) 效果

簡單說就是使 RGB 產生些許的偏移
在 shader 中對 RGB 的顏色採樣位置做一點點的位移
這個效果可以參考下面的例子
比較有和沒有的差異

爆炸特效

從前到後依序是 1. 普通的粒子爆炸  2. 加上衝擊波   3. 再加上色散效果


類似漣漪效果

1. 沒有色散   2. 有色散



總結 & 參考資料


以上就是製作衝擊波效果的過程
和一些我想到的應用
如果有其他有趣的應用或效果也歡迎留言和我分享 ~ ~


參考資料:

創作回應

更多創作