[程式] 2D流动闪电效果 feat. Godot

楼主: meowyih (meowyih)   2021-07-15 12:05:07
静态的闪电 (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. 发光效果太匠气,最好是有些段发光比较亮,有些比较暗
如果这是补习班,
上面二个就是学生作业 (笑)
作者: wangm4a1 (水兵)   2021-07-15 12:40:00

Links booklink

Contact Us: admin [ a t ] ucptt.com