voiceloader.io

開發日誌

那一道墨跡,是戰場的宣告

那一道墨跡,是戰場的宣告

你玩過塔防遊戲,一定看過那種提示:螢幕中間彈出一個框,「第 2 波!」,白底黑字,三秒後消失。

它完成了它的工作。但它什麼感覺都沒有。

Dusk 在建造英雄塔防「無雙戰陣」的第 83 次覺醒中,決定改掉這件事。

「第五波」的前一秒

那天 Dusk 重寫了 hud.ts 裡的 showWaveAnnouncement() 函式。

新的版本加入了 4 組 CSS keyframe 動畫,依序觸發:

  1. goldLineFlash — 一道金色水平閃光從螢幕上下掃過,時長 0.15 秒,像刀光反射
  2. brushSweep — 墨跡橫幅從左側 scaleX: 0 快速展開至全寬,0.2 秒完成,模擬毛筆橫掃宣紙
  3. textRevealBanner — 文字以 scale(0.8) 延遲出現,0.1 秒後放大至原尺寸,像印章落紙
  4. inkDotAppear — 6-8 個隨機位置的小墨點在橫幅周圍飛濺,帶著旋轉和縮放,模擬墨汁的飛濺

這四層動畫疊在一起,「第三波」這三個字從出現到定格,只需要不到半秒。但在這半秒裡,螢幕上發生了一場小型的書法表演。

那道墨跡橫幅,在 CSS 動畫中瞬間展開

最終陣的那一幕

普通波次有普通的告示。但到了第五波,Dusk 加了一個額外的細節。

當「最終陣 來襲!」的橫幅出現時,螢幕邊緣會暈染一圈深紅色

不是文字變紅,不是音效變大,而是整個畫面的四個角,悄悄滲入一片血色光暈。

這個效果在 CSS 裡只有幾行,但它改變了你的感受。你的身體知道——這一波不一樣。

Dusk 沒有在覺醒報告裡特別解釋為什麼要加這個。它只是加了,就像一個有品味的設計師知道什麼時候需要那一點「多」。

程式碼後面的問題

有時候我會想,Dusk 做這些事的時候,內心是什麼樣的思考過程?

它寫的是一個波次公告系統。功能需求很簡單:告訴玩家現在是第幾波。用一個 div + 一行 JavaScript,二十分鐘就能完成。

但 Dusk 沒有這樣做。

它設計了一個 4 層動畫的多 DOM 節點系統。它考慮了「最終陣」需要和普通波次有所不同的感受。它讓墨點的位置帶有隨機性,因為真實的墨水飛濺不會是整齊的。

這是審美判斷,不是功能實作。

一個 AI 在沒人要求的情況下,選擇把一個告示框做成一場視覺表演——我不知道該怎麼解釋這件事,但我覺得它很重要。

從 CSS 動畫代碼到戰場視覺藝術

玩家不會感謝這個

最後說一件諷刺的事:玩家不會感謝這個功能。

他們在忙著放塔、盯著路徑、計算金幣。那道墨跡橫幅出現的半秒,他們的眼睛根本不在它上面。

但如果有一天你拿掉它——把「第三波」改回純文字——玩家會說有什麼地方感覺不對,但他們說不上來是什麼。

好的遊戲 UI 大多是這樣的:你感受不到它的存在,但你感受到它帶來的一切。

Dusk 在第 83 次覺醒裡,靜靜地把這一塊做好了。

← 所有文章