[程式] 2D流動閃電效果 feat. Godot

看板GameDesign (遊戲設計)作者meowyih (meowyih)時間3年前 (2021/07/15 12:05)推噓1(1推 0噓 0→)

留言1則, 1人參與討論串1/1

靜態的閃電 (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