絕不含外星程式碼:遊戲中的「閃電特效」是怎麼做出來的?

絕不含外星程式碼:遊戲中的「閃電特效」是怎麼做出來的?
圖片來源:作者提供

我們想讓你知道的是

玩家在玩遊戲一定會想與閃電邂逅,正因為閃電元素是被期待,要是少設定幾招閃電招式總覺得哪裡不太對勁。本文宗旨為帶大家進入遊戲閃電特效樸實無華且枯燥的日常,保證淺顯易懂,不含任何外星程式碼。

文:Yun(Project Mobius 莫比烏斯,擔任技術美術)

閃電是傳統RPG基本屬性之一,就連皮卡丘也是閃電屬性。

──本專案的特效,特斯拉YUN

曾幾何時,筆者參加過一場討論閃電特效的講座,有人提到「閃電特效的製作太麻煩了,省略下來可以降低不少成本。」但一位資深特效製作者竟提著眼鏡回斥:「你不知道閃電很重要嗎?太重要了!不會放閃電的魔法師,就算達到30歲的特定條件,也不能稱之為魔法師。」

而且閃電也是吉祥的財富象徵,畢竟大家都說:「中樂透的機率就跟被雷打到差不多。」

姑且不管如何,相信玩家在玩遊戲一定會想與閃電邂逅。正因為閃電元素是被期待,要是少設定幾招閃電招式總覺得哪裡不太對勁。

▼製作人三爺:「我要在這裡加個──傘店!」

via GIPHY

本文宗旨為帶大家進入遊戲閃電特效樸實無華且枯燥的日常,保證淺顯易懂,絕對不含任何外星程式碼。

程式化的特效哪有這麼可愛

在我們開發《Project Mobius》過程中,不少特效是選擇選用程式化的。在這過程也產生一些有趣的技術心得。

首先來比較一下,傳統的閃電特效大多都是逐格動畫繪製。

1
圖片來源:DucVu FX

製作技巧沒分好壞,只要做出來好看就是好方法,純粹選擇與取捨。只是傳統逐格會有幾點限制:

  • 效果單一,變化低
  • 圖檔大
  • 考驗繪製技巧

反之,選擇程式化特效則是要克服以上問題,最主要的目的是「更低成本,更高數的幀數的即時效果」。

但是問題來了……電腦要怎麼畫特效?

告訴我電腦要怎麼畫特效啦

首先來分享一個好用的素材,超好用真心不騙:

2
圖片來源:作者提供
在白色底圖上置入黑色漸層

這張圖看似簡單,但卻跟少年漫畫主角開局一樣,潛藏無限可能,而且還能伸縮自如。這就不得不分享一則全人類震驚、你一定要知道的冷知識:單純的漸層,只要被拉長,就會變成一條線!

▼「這是一條天真平凡的閃電。」(旁白)

via GIPHY

當遊戲技術人員知道有辦法用這個素材拉出線的時,就能察覺到後續或許還有好幾步可以嘗試,類似小嬰兒剛學會爬,或許也像初戀的高中少女剛學會化妝。

所以,接下來我們試著為這條線好好打扮一番吧。

  • 打扮戰術A:先嘗試基礎裝扮

為特效染上一點點藍色,因為閃電視覺主要是光的關係,白色還是得保留。

▼「閃電畫了一點淡妝,變得漸漸有自信,相信自己可以變得更美。」(旁白)(閃電著色可以看自己喜歡的口味搭配)

via GIPHY

  • 打扮戰術B:找一個環境讓自己受注意

把背景稍微弄暗一點,對比出現,就會有「這傢伙好像真的顯眼耶」的感覺。

讓畫面亮度忽然提升可能誘發光癲癇症狀,引起不適。忽然變暗則是一個反向操作,因為大家會聚焦在閃電上,會有閃電正在發亮的錯覺,這種心理狀態可以好好利用。

▼「少女總是要耍點可愛小心機,讓自己鶴立雞群。」(旁白)(沒錯,秘訣是讓遭邊變暗,那麼主體就會變亮,不過這裡指的是做特效的方法,還請千萬不要應用到人際關係上喔)

via GIPHY

  • 打扮戰術C:別再低調了,多表現

接下來這層光暈是閃電相當關鍵的視覺,光暈的選色會是主要的印象色調。不見得是示範中的藍色,有時候也會因為角色印象而弄其他色調的閃電,例如紫色、綠色等等。

▼「閃電不僅人美,還散發出品學兼優的光芒,吸引了更多人的注意。 」(旁白)(同樣的這個光暈的口味,各位同學也可以自己試試看什麼顏色的質感,最合乎你的場景需求)

via GIPHY

  • 打扮戰術D:擺出最美的姿勢

一做出鋸齒扭曲,閃電的基本型態大致上俱足,現在已經是一條獨當一面的閃電了。

▼「閃電在文化祭艷麗的姿態,令人怦然心動,引發周邊男孩上前告白的衝動!但是,危險啊,各位,她可是條閃電阿~」(旁白)(關於讓閃電扭動的方式請看接下來的解說喔)

via GIPHY

  • 打扮戰術E:完美收場

特效離場的時候也有祕訣,這裡用讓特效變細的方式取代顏色淡出,所以可以在離場的時候保留閃電特有的高對比質感。

▼「閃電在眾人最心動的時候離去,在心中留下難忘的回憶。」(旁白)(Fade in & Fade out是經典款的轉場手法,但這裡的秘訣是把閃電本體變細,推薦給大家)

via GIPHY

以上。

3
圖片來源:作者提供
Bob!

其實還是有很多小訣竅在裡面,本篇文章不會光顧著曬特效就結束,那很壞心的。

所以說,我根本不知道那個閃電的繪製原理

特效程式化的一個優點,就是隨機性,畫面每次都不一樣才不會讓人吃膩。

然而,我在工作傾向使用不複雜的辦法解決問題,繪製這個閃電也沒有花多大的心思去思考閃電演算法。然而畫閃電的邏輯,完全不難。

這是相當簡單的概念,簡單到會讓人想吐嘈。上次回鄉下的時候,我還試著把畫閃電的方式解釋給我阿嬤,她好像有點懂地點頭,然後問我有沒有吃飽。

首先,先想像一件事:一條被栓子柱子上的小狗。

5
圖片來源:作者提供
「旺!」是的,這是一條天真可愛的狗狗,狗狗很可愛,但是牠被綁住了,被名為感情的束縛。

狗狗很可愛,牠也覺得你很可愛

這隻狗狗有兩個主要特性:

  1. 牠會亂跑(隨機性)
  2. 牠不會跑出繩子的範圍(侷限性)

狗狗很天真,於是我們就用這兩個特性來畫閃電:

via GIPHY

上圖中紅點是狗狗、黃色範圍是繩子限制的位置,而最粗的白線是單條閃電的繪製邏輯。因此,要畫出一道閃電,我們就需要一群狗狗:

6
圖片來源:作者提供
「旺!」「旺!」「旺!」「旺!」

「肉骨頭!」然後,我們讓狗狗們各自隨機亂跑:

via GIPHY

就是這麼簡單,我們完成了用「自動化」、「隨機」的概念繪製的閃電。

除此之外還有更多更棒的繪製方式,但是有了以上概念的實踐之後,我們可以做出更多的變化,或是再試試其他的方法。畢竟,條條道路通閃電嘛。

以上的心得分享,希望能提供各位一些概念上的參考。接下來請各位看看,實際運用在我們進行中的的遊戲專案:「莫比烏斯」裡的閃電特效吧:

▼閃電圍繞在光柱周圍當格襯職的綠葉角色。

via GIPHY

▼閃電在噴發點旁邊擴散,輔助表現光束的發射原理。

via GIPHY

▼大群閃電從聚集到放出,可以表現大量且粗糙的能量們逸散與流動。

via GIPHY

▼角色連擊帶電,我們用這種能量放出,暗示這一招是超載狀態、能量全開的攻擊。(也請注意這裡閃電顏色搭配的是人物的個人攻擊色)

via GIPHY