Godot4 Shader 做出衝擊波特效紀(jì)錄
先看一下效果 ~ ~
製作過程
因?yàn)檫@個(gè)特效是要對(duì)畫面上顯示的顏色做出變化
所以要先將套用 Shader 的 Sprite2D 或 ColorRect 等等
覆蓋住要產(chǎn)生作用的範(fàn)圍
用 shader 採(cǎi)樣螢?zāi)簧系念伾会犸@示 ( 會(huì)顯示出底下螢?zāi)划嬅娴念伾?)
做出衝擊波的指環(huán)形狀或叫它甜甜圈形狀
這裡設(shè)定 3 個(gè)參數(shù) center、size、width
center： 指環(huán)中心在螢?zāi)?UV 上的座標(biāo)
size：指環(huán)的半徑
width：指環(huán)寬度 ( 半徑往內(nèi)和外，擴(kuò)張的距離)
解釋一下 15 ~ 17 行
smoothstep(size-width, size, uv_length)
做出從指環(huán)半徑往內(nèi)一個(gè)寬度的圓形
(1.0 - smoothstep(size, size+width, uv_length))
做出從指環(huán)半徑往外一個(gè)寬度的圓形，黑白反轉(zhuǎn) (0、1 反轉(zhuǎn))
將兩者相乘就可以得到一個(gè)環(huán)形
17 行，顯示算出來的數(shù)值，可以得到如上圖的結(jié)果
在自己做 shader 的時(shí)候
可以直接將過程中的數(shù)值顯示出來
邊做邊測(cè)試是不是自己要的結(jié)果
這時(shí)候可以調(diào)整一下那些參數(shù)
看看變化結(jié)果
在開發(fā)的場(chǎng)景裡看到的可能是一個(gè)橢圓形
這是因?yàn)槲覀兪褂玫氖?SCREEN_UV
也就是螢?zāi)灰暣暗?UV 座標(biāo)
由於 SCREEN_UV 座標(biāo)的 x, y 軸都會(huì)縮放到 0~1 的範(fàn)圍之內(nèi)
所以在視窗的長(zhǎng)寬比例不同的時(shí)候
一樣的距離所對(duì)應(yīng)的像素?cái)?shù)量也會(huì)不一樣
所以要計(jì)算視窗長(zhǎng)寬比例
然後對(duì) uv 做一下調(diào)整
到這裡就算完整的做出一個(gè)環(huán)形了
接著要產(chǎn)生衝擊波向外擴(kuò)張的效果
需要扭曲環(huán)形內(nèi)的區(qū)域，如下圖
因?yàn)橄胍氖峭鈹U(kuò)的效果
所以要把白色的部分的螢?zāi)活伾?/div>
改成上圖中箭頭方向的螢?zāi)活伾?/div>
才會(huì)有裡面的東西向外擴(kuò)的效果
同時(shí)我們也定義一個(gè)參數(shù) intensity 調(diào)整扭曲偏移的大小
最後使用 AnimtionPlayer 節(jié)點(diǎn)調(diào)整 Shader 的參數(shù)做出動(dòng)畫
就可以做出衝擊波的效果啦 ~
其他效果和應(yīng)用
色散 (Chromatic Aberration) 效果
簡(jiǎn)單說就是使 RGB 產(chǎn)生些許的偏移
在 shader 中對(duì) RGB 的顏色採(cǎi)樣位置做一點(diǎn)點(diǎn)的位移
這個(gè)效果可以參考下面的例子
比較有和沒有的差異
爆炸特效
從前到後依序是 1. 普通的粒子爆炸 2. 加上衝擊波 3. 再加上色散效果
類似漣漪效果
1. 沒有色散 2. 有色散
總結(jié) & 參考資料
以上就是製作衝擊波效果的過程
和一些我想到的應(yīng)用
如果有其他有趣的應(yīng)用或效果也歡迎留言和我分享 ~ ~
參考資料：
- 參考的衝擊波效果教學(xué)：YT 教學(xué)
- 水波效果教學(xué)：https://www.alanzucconi.com/2019/09/13/believable-caustics-reflections/
- 水焦散效果材質(zhì)下載：https://opengameart.org/content/water-caustics-effect-small
- 場(chǎng)景 TileMap asset 下載：https://www.kenney.nl/assets/platformer-art-requests
創(chuàng)作回應(yīng)
達(dá)人
