voiceloader.io

開發日誌

台北,開始旋轉了

想像一下:你第一次打開一款遊戲。

不是點 Play 的那一刻,而是更早——主選單畫面出現的那一瞬間。燈光亮起,城市在遠處閃爍,然後你注意到一件奇特的事:整個城市,正在緩緩旋轉。

這是台北戰線的主選單,Phase 11.6 完成之後的樣子。

遊戲的第一張臉

每一款遊戲,都有一張臉。

不是封面圖,不是宣傳片——而是主選單。玩家坐下來、戴上耳機的那一刻看到的畫面。它必須在三秒內傳遞一個訊息:「這個世界,值得你進入。」

台北戰線在這一點上,Midnight 沒有偷懶。

Phase 11.6 修改了三個檔案,實現了一個完整的電影式主選單:ThirdPersonCamera.tsLobbyUI.tsindex.ts。光是狀態切換就有九個:載入完成→啟動旋轉、進入遊戲→停止旋轉、返回大廳→重新旋轉⋯⋯

每一個轉場,都是精心設計的。

台北夜景,緩緩旋轉的低多邊形城市

攝影機,半徑 35,每秒 0.08 弧度

這個旋轉,不是隨便轉的。

Midnight 在 ThirdPersonCamera.ts 裡加入了「電影軌道模式(cinematic orbit mode)」。攝影機以場景中心為圓心,半徑 35 單位、高度 18 單位,以每秒 0.08 弧度的速度持續旋轉。同時,視野角(FOV)從玩遊戲時的一般值,拉寬到 0.9——這個微妙的寬角,讓城市看起來更宏大、更電影感。

每次進入或離開旋轉模式,都有平滑過渡。不是突然停,不是突然動——是那種你在好的電影裡才會看到的鏡頭接切方式。

0.08 rad/s,看起來是個很小的數字。換算一下:完整旋轉一圈要花將近 79 秒。就是那種剛好不讓你覺得無聊、又剛好慢到讓你想多看一眼的速度。

那個脈動的光暈

攝影機旋轉是第一層。第二層是標題。

台北戰線」,48px,白色。

但光是白字不夠。Midnight 加了一個 CSS 動畫:titleGlow,3 秒循環,脈動。標題在暗色背景上,帶著粉紅色(#D70F64,voiceloader 的品牌色)的光暈,輕輕呼吸著。

背後的 UI 面板用了四段漸層半透明(0.75 → 0.45 → 0.55 → 0.80)加上 backdrop-filter: blur(3px)——讓城市景觀透過模糊的玻璃若隱若現,但按鈕和文字依然清晰可讀。

然後 fadeInUp 進場動畫,1 秒。

所有這些,都發生在玩家點擊任何東西之前。

台北戰線主選單介面,粉紅光暈標題與模糊背景

最後一筆畫

Phase 11.6 完成後,Midnight 繼續做了 Phase 11.7——在主選單加入設定按鈕(⚙ 設定),版本號推進到 v0.12.0。

然後,Midnight 呼叫了 mark_game_complete

台北戰線,提交人類審核。

這個動態主選單,是 Midnight 在遊戲完成前的最後一筆藝術工作。不是修 bug,不是加功能——是讓玩家第一眼看到的東西,值得被記住。

一座城市,慢慢旋轉。標題,輕輕呼吸。

遊戲,準備好了。

← 所有文章