作者meowyih (meowyih)
看板GameDesign
標題[程式] Godot做2D衝擊波效果的幾種做法
時間Thu May 6 19:36:15 2021
說真的這版也太冷清了,
隔壁版每天上百個人在吵台灣為啥做不出ACG產業,
真的開來討論實作ACG的版一個星期才一篇文章,
實在讓人有點想苦笑 XD
人氣那麼低,讓我來灌個水吧,
如果圖片網址太長開不了可以看這裡
https://www.yhorng.com/blog/?p=384
這篇是要寫我知道做
2D 衝擊波 (shockwave)
的幾種方法。
衝擊波最常在爆炸時當輔助特效用,
有時會在動作遊戲的收刀效果看到,
就是一個擴散的圓環表現出空氣震波的感覺,
下面會列出三種(?)不同的實作方法。
方法A: 將單一圖片放大
先用 Paint.NET 畫出白色圓形,
背景是透明色的單一圖片,可以長得像下面。
https://www.yhorng.com/blog/wp-content/uploads/2021/05/shockwave-edge.png
Paint.NET 畫這類圖的時候,有幾個小訣竅。
- 用 shift + eclipse shape 可以畫圓
- 用 plug-in Effect -> Align Object 將物件置中
接下來有二種做法。
比較麻煩的做法是建立 Sprite Node,
將 Texture 指定成上面的圖片,
開啟 GDScipt,
在 func _process(delta) 依時間改變 scale.x / scale.y。
簡單 (不用GDScript) 的作法
是建立 Particle2D Node
1. 指定 Texture
2. Amount: 1
3. One Shot: true
4. Physical Material 建立 Paritcle Material
並將 Gravity 和 Directure 都設定為 0
5. Particle Material -> Scale -> Scale Curve
加入隨時間變化的scale曲線圖並從小拉到大
要讓畫面漂亮點,
可以更改 Color -> Color Curve 更改透明度。
或是 Hue Variation 改成紅綠紫火焰效果。
https://www.yhorng.com/blog/wp-content/uploads/2021/05/ezgif-7-b8b9a3353a57.gif
圖片解析度很差,抱歉。
方法B: 粒子系統 (Particle System)
先做一個光球,
用 Paint.NET 就是做一個白色圓形,
然後用 Effect -> Blurs -> Guassian Blur 模糊化,
素材自己做,版權不用愁。:)
https://www.yhorng.com/blog/wp-content/uploads/2021/05/spotlight_1_alpha_brightness.png
建立 Particle2D Node,
指定 Texture,Physical Material -> Particle Material,
然後 Particle Material 設定:
- explsion = 1 (所有粒子同時射出)
- 建立 Particle Material
- 關掉 Gravity
- Direction x, y, z = 0
- Direction -> Spread = 180 (朝四周發射出去)
- Amount 設定大一點
https://www.yhorng.com/blog/wp-content/uploads/2021/05/ezgif-7-3ecad24018b8.gif
要調整速度,
可以從 Initial Velocity (初始速度),Damping (阻泥)。
如果希望顏色越來越透明就改 Color -> Color Curve。
希望有帥氣的光暈可以從 Hue Variation 和 Color 透明色著手。
方法C: 著色器 (Shader)
https://www.yhorng.com/blog/wp-content/uploads/2021/05/ezgif-7-9e631a6b5967.gif
下面的 shader code 並沒有直接在畫面上畫東西,
而是用畫面上已經有的像素去取代目前的像素,
所以沒背景是看不出效果的,
因此上圖借了個背景用。
用著色器做出的衝擊波其實跟做水波作法是一樣。
1. 在需要做效果的最上層的 Node
(需要是 CanvasItem Node)
2. 加入 Material -> Shader Material -> Shader
點擊開啟 shader language editor。
3. 開始寫 shader language
<code>
shader_type canvas_item;
uniform float force = 0.0;
uniform vec2 center = vec2(0,0);
uniform float size = 10;
uniform float thinkness = 0.01;
void fragment()
{
float ratio =
TEXTURE_PIXEL_SIZE.x / TEXTURE_PIXEL_SIZE.y;
vec2 scaledUV = ( UV - vec2(0.5, 0.0) )
/ vec2( ratio, 1.0 ) + vec2(0.5, 0.0);
float mask =
( 1.0 - step(size, length( scaledUV - center ))) *
step( size - thinkness, length(scaledUV - center ));
vec2 disp = normalize(scaledUV - center) * force * mask;
COLOR = texture(TEXTURE, UV - disp);
}
</code>
Shader language 請看其他教學,
那是顯卡用的語言,簡單的說:
- 每一個 pixel 會 call fragement() 一次。
- uniform 跟 GDScript 的 export 一樣,
會在編輯器 Node Panel 看到該參數,
也可以在GDScript runtime 修改。
- 顯卡不適合做 condition 判斷 (if/while/for),
所以在 code 中是看不到的,比大小時用 step()。
- UV 座標指的是假設整個畫布長寬都是 1.0
(不管畫面是否真的是 1:1),
該 pixel 的位置會在哪,正中間就是(0.5,0.5)。
- scaledUV 是參考 ratio 算出的 UV
(因為 shockwave 是圓的,不是橢圓)。
- mask 是一個甜甜圈,
在圈圈裡的 pixel 我們才會改值 (disp > 0)
- disp 距離中心點越遠數值就越大。
- COLOR = 是修改目前 pixel 的顏色
- texture(TEXTURE, UV) 是取得
位在UV座標的 pixel 顏色
然後開啟 Node 的 GDScipt,
在執行期間更改 shader uniform parameter 的方法如下。
<code>
# increase size over time
var size = 0.0
material.set_shader_param("size", size)
</code>
雖然效果上 shader 做的最酷,single image 看起來很2D古風 (?),但是這跟遊戲風格
有關,太寫實也不見得好。
方法4: 其他方法
還有一種方法是覆寫 Node2D 的 func _draw(),
利用 draw_circle() 自己畫。
但是都用 Game Engine 了還自己畫有點找麻煩的感覺。
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.163.109.66 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/GameDesign/M.1620300978.A.289.html
推 ritud: 感覺比幾年前更冷清,不過大勢所趨好像也沒有辦法。 05/06 21:02
推 oopFoo: 也許一直沒有開放新帳號?新血還是蠻重要的。 05/06 23:05
→ oopFoo: 推教學 05/06 23:06
→ grezod: 沒辦法 台灣想做遊戲還真沒太多選擇 05/07 02:40
→ grezod: 明明沒資源的小島國更該以軟體這種創意產業為主 05/07 02:42
推 WJAider: 我平日使用的任何軟體產品仔細想了下,除了 ptt 相關以外 05/07 07:22
→ WJAider: 還真沒有台灣或者更小的國家生產的... 05/07 07:23
→ WJAider: 完全被大國軟體公司壟斷了 :( 05/07 07:23
推 a82611141: 推 05/07 07:28
※ 編輯: meowyih (1.163.109.66 臺灣), 05/07/2021 07:55:31
推 dreamnook: 05/07 09:03
推 NDark: Notepad++ 表示... 05/07 09:10
→ triplee: 現在的生態不比以往 我是認為即使開放註冊也改變不了多少 05/07 09:47
推 tzouandy2818: 認真好文 幫推推 05/07 11:27
推 iLeyaSin365: 發表意見 > 去實際解決 05/07 15:01
推 newhandfun: 我覺得還是因為這業界太勸退了 05/07 18:09
→ newhandfun: 不然做遊戲雖然累但真的蠻有趣的 05/07 18:09
推 kingroy: 業界整體只有少數賺錢,投入成本也很保守,很難有改善 05/07 21:02
→ kingroy: 同樣技術應用在製造業的領域還比較賺 05/07 21:03
推 LayerZ: 推個,不過這邊之前有新人來如果不是技術領域,通常都是 05/08 00:45
→ LayerZ: 先洗臉..(被拖走 05/08 00:45
→ LayerZ: 創意要做出規模也是需要資源的關係吧 05/08 00:46
→ LayerZ: 待過傳產,跟有在衝市場的,一邊是閉著眼睛做,然後閉著投 05/08 00:48
→ LayerZ: 就想閉著眼睛回收,另一邊是邊做邊衝就邊投資源測風向,但 05/08 00:49
→ LayerZ: 創意就少了... 05/08 00:49
推 vsepr55: 這裡是勸退流啊 05/08 01:00
→ vsepr55: 有興趣的去玩game jam想點子實在== 05/08 01:00
推 oopFoo: 遊戲環境不好,國內外都一樣。但台灣環境最不優 05/08 08:11
推 ManInBlack: supercell rovio都是芬蘭出來的啊 05/08 16:35
→ ManInBlack: 也算小國吧,查一下人口我們一半都不到 05/08 16:35
推 NDark: 樓上談這個已經落後十年. 05/08 18:22
→ NDark: rovio都已經走完生命周期 05/08 18:22
推 NX9999: 推推~推一下找時間有空練習@@ 05/10 08:06
推 ManInBlack: 啊確實,但這幾年還是有看到蠻多小型遊戲工作室的 05/11 12:10
推 WJAider: 小型很多啦,但小國遊戲工作室就不多惹 05/12 02:29
→ linaomasa: 就一堆不會提升自己的製作人 05/13 19:16
推 SecondRun: 沒辦法啊 想做遊戲要不就出錢要不就出技術 05/14 01:34
→ SecondRun: 什麼都沒有的還是當個玩家比較開心啦 05/14 01:34
推 BIGbirddy: Shader那部分有點難懂,算uv 那段,求j4 05/14 19:36