從上一節(6-5a)了解,影響粒子外觀的主要參數包括圖案(particleImage)、尺寸(particleSize)以及顏色(particeColor),雖只用2D平面圖案,但透過其他參數的配合,整體粒子系統仍會形成3D效果。
另一組重要參數會影響粒子的產出與分佈,包括產出率(birthRate)、存活時間(particleLifeSpan)、噴射器外形(emitterShape)、噴射時間(emissionDuration)等,噴射器外形(emitterShape)決定粒子產出的位置,其他3個參數則影響粒子的數量。
其中產出數量 = 產出率 x 噴射時間,但這並非螢幕所看到的總數,噴射時間結束後,會再循環反覆(由於預設參數 loops = true),還得考慮每個粒子的存活時間(particleLifeSpan),才能決定螢幕顯示的粒子總數。
許多參數值還可加入變化(Variation),這裡的變化是指隨機變化的範圍。例如,假設存活時間(particleLifeSpan)設為1.0秒,存活時間變化(particleLifeSpanVariation)設為0.8秒,則代表粒子實際的存活時間會在 1.0 ± 0.4 秒之間隨機變動,也就是最短0.6秒~最長1.4秒(變動範圍0.8秒)。
整個SceneKit 粒子系統60多個參數,其中有16個可設定隨機變化(參數名稱都帶有”Variation”),因此粒子系統看似一個整體,但也允許個別有所差異,這是粒子系統能模擬不規則運動的火焰、雲霧、雨雪…等,做到活靈活現的主要原因。善用這些參數,還能做出令人驚嘆的數位藝術作品。
本節一共使用23個參數,其中4個會隨機變化,說明如下表(請特別注意最後3個參數):
# | 粒子系統參數 | 參數值 | 說明 |
---|---|---|---|
1 | particleImage | UIImage() | 粒子外觀(圖案) |
2 | imageSequenceRowCount | 10 (列) | 圖片檔包含10列圖案 |
3 | imageSequenceColumnCount | 10 (行) | 圖片檔包含10行圖案 |
4 | imageSequenceFrameRate | 3 (frame/sec) | 每秒變換3個圖案 |
5 | imageSequenceInitialFrame | 50 (索引) | 圖案陣列索引從50開始 |
6 | imageSequenceInitialFrameVariation | 98 (索引) | 索引變化上下49 |
7 | particleColor | UIColor.yellow | 主色:黃 |
8 | particleSize | 0.03 (米) | 粒子平均尺寸:寬、高3公分 |
9 | particleSizeVariation | 0.02 (米) | 尺寸變化範圍:±1公分 |
10 | birthRate | 300 (particle/sec) | 每秒噴射/產出300個粒子 |
11 | particleLifeSpan | 5.0 (秒) | 粒子存活時間5秒 |
12 | emitterShape | SCNPlane() | 指定噴射源,從平面隨機位置產出 |
13 | emissionDuration | 0.5 (秒) | 產出率 x 噴射時間 = 發出粒子數 |
若0.0則瞬間全部發射 | |||
14 | emissionDurationVariation | 0.5 (秒) | 上下變化±0.25秒 |
15 | loops | false | 噴射時間結束後不再循環 |
16 | emittingDirection | (0, 0, 1) | 向螢幕(+Z軸)噴射,採節點區域座標。 |
17 | spreadingAngle | 90.0 (度) | 隨機散佈角度範圍 |
18 | particleVelocity | 0.8 (m/sec) | 粒子移動速度0.8m/s |
19 | particleVelocityVariation | 1.0 (m/sec) | 上下變動範圍±0.5m/s |
20 | particleAngularVelocity | -60.0 (度/秒) | 粒子旋轉速度(每秒-60度) |
21 | colliderNodes | [大球節點] | 粒子系統開啟與其他節點的碰撞偵測 |
22 | particleDiesOnCollision | true | 碰撞發生後,粒子立刻消亡 |
23 | systemSpawnedOnCollision | 噴濺 | 碰撞發生後,啟動另一個粒子系統 |
本節要用這23個參數做出什麼效果呢?在電影「駭客任務」中,有個場景令筆者印象深刻,就是代表母體(The Matrix)的暗綠色文字雨,或稱代碼瀑布,在筆者準備第4單元課程時,曾看過有人用SwiftUI做出類似效果,由此啟發,本節就試試用粒子系統來做文字雨。
經過一番嘗試,最終得到的效果如下(左圖範例,右圖作業),雖然跟電影中的視覺效果有些不同,但也有表現更優之處,例如在3D場景中可覆蓋一片區域,能模擬雨滴碰撞屋頂後的飛濺效果(黃色粒子),而且從效能來看,粒子系統很顯然比SwiftUI (Canvas)更適合做這類效果。
場景中設計三個節點:天空、大球、地面,天空使用一個平面(SCNPlane),附加粒子系統,這樣文字雨(粒子)就能從天空均勻灑落;大球設計成棕色半透明,一部分露出地面當作(溫室)屋頂,並開啟物理模擬,讓文字雨可偵測碰撞;地面則加入格線(圖片取自上一課6-4c)。
三個節點的程式碼如下: