推 wangm4a1: 推 07/15 12:40
靜態的閃電 (Jagged Line) 作法很單純，
做一條直線，
亂數在中間取幾個點，
在取得的點上加上亂數的振幅，
重複上面步驟就可以做出各種效果。
而流動感的閃電效果相對麻煩了些，
下面是我在 Godot 做的 demo
https://youtu.be/0VCCu7wXVA0
如何做的?
Step 1: Base Loop Jagged Line
影片中左邊數來第一條線就是 Jagged Line
我們不只是要做單純的 Jagged Line
我們要讓它可以無限循環 (loop)
換句話說就是頭尾要相連。
第一種寫法是用亂數完成，
亂數雖然簡單方便，
不過有時候產生的效果不如己意。
第二種做法是手繪，
寫一個小工具，
紀錄自己手繪線條跟參考線的震幅，
然後輸出成文字檔。
我使用的是第二種方法。
在儲存 Jagged Line 時，
不需要真的用座標方法儲存，
只要跟 WAV 檔一樣紀錄震幅就好，
像是
(0,0) (1,2), (2,-1), (3,-2)
只要記錄 [0,2,-1,-2]
這樣不管是要放大縮小或取內插中間值都很夠用。
更重要的，
只要做一條就可以產生很多條不同的 Jagged Line，
可以將開頭設為中間某個點，
可以倒敘取震幅值，
可以正負相反做鏡像線，
或是混合上面三種參數等等。
我的例子是手繪了單一一條六千多個震幅的線，
其他就任意取值選自己喜歡的。
Step 2: Tranform from One Jagged Line to Another
影片中的第二條線是在二條不同的 Jagged Line 變換的示範，
純粹是向量和比例的計算。
像是我如果是要畫一條從 pt1(0, 0) 到 pt2(300, 300) 的流動閃電，
首先要知道 normalized vector 和長度，
用來知道每個參考點 (也就 pt1 - pt2 的直線點) 的座標
我知道 normalized vector 中文叫 "正規化向量"
但說真的這名字看了也沒人懂是甚麼東西
叫 "單位向量" 還比較好懂一點。
下面是在 Jagged Line 上取點的 Pseudo-code
我覺得很直覺所以就不解釋了，
關於向量，單位向量，向量轉 90 度等等數學問題，
應該分另一篇寫 (或是有人在這版寫過了我不確定)
float total_length = (pt2 - pt1).length()
float unit_vec = (pt2 - pt1).normalized()
for idx in range(0, total_length)
vec2 ref_pt = pt1 + unit_vec * idx
vec2 jagged_pt = jagged_line.get_pt( ref_pt, ratio_in_line )
Step 3: Combine S1 and S2 with many Jagged Line
影片的第三條是結合了第一條 (會動的線)
和第二條 (會變形的線)
然後變形的線增加到六條的效果。
當然為了看起來像閃電 (或雷射) 需要有發光效果，
發光效果請看我前一篇文章。
Step 4: Stick start point and end point
最後在遊戲中使用時，
一般我們都要固定閃電的起點和終點，
像是當飛行武器或是魔法效果時，
總要從自己的座標打到對方的座標。
第四條就是修改第三條，
在越靠近頭尾時，
震幅照比例縮小，
到頭尾時震幅變成零。
大概就這樣 :)
TODO:
可以後續加強的地方有
1. 漂亮的閃電寬度最好是有時寬有時窄
2. 發光效果太匠氣，最好是有些段發光比較亮，有些比較暗
如果這是補習班，
上面二個就是學生作業 (笑)
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.231.99.224 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/GameDesign/M.1626321909.A.29A.html
※ 編輯: meowyih (36.231.99.224 臺灣), 07/15/2021 12:07:44
※ 編輯: meowyih (36.231.99.224 臺灣), 07/15/2021 12:12:26