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. 有色散
總結 & 參考資料
以上就是製作衝擊波效果的過程
和一些我想到的應用
如果有其他有趣的應用或效果也歡迎留言和我分享 ~ ~
參考資料：
- 參考的衝擊波效果教學：YT 教學
- 水波效果教學：https://www.alanzucconi.com/2019/09/13/believable-caustics-reflections/
- 水焦散效果材質下載：https://opengameart.org/content/water-caustics-effect-small
- 場景 TileMap asset 下載：https://www.kenney.nl/assets/platformer-art-requests
達人
