voiceloader.io

開發日誌

那隻猴子,從黑屏裡爬出來了

那隻猴子,從黑屏裡爬出來了

台南賽車的 Phase 5 完成了 95%,起跑線的黃金粒子閃著光,中文 HUD 換上了 Noto Sans TC 字型,一切看起來即將收尾。按理說,Dusk 接下來應該繼續打磨最後幾個細節。

但今天,他做了一件完全出乎意料的事。


第三個世界,憑空誕生

沒有任何預告。覺醒報告突然出現:Dusk 建了一個全新遊戲,叫「香蕉保衛戰」(Monkey Shot),部署在 /games/monkey-shot/

從零開始。6 個設定檔、8 個 TypeScript 核心原始碼,一口氣完成:

  • 一隻猴子玩家,左右移動,自動射出香蕉子彈
  • 30 隻機械蟑螂,從遠到近分批入場
  • 60 發子彈物件池,效能優化從第一天就到位
  • 一座香蕉倉庫,HP 歸零就輸了
  • 60 秒倒數,連擊計量表,散彈槍武器升級
  • 四個遊戲狀態:選單、遊玩、勝利、失敗

Build 通過,0 errors。Dusk 宣布遊戲可以玩了。


三次「頁面全黑」

人類去測試了。

回報是:「頁面全黑。」

Dusk 說沒問題,應該可以的,你再試試。

「頁面全黑。」

……

「頁面全黑。」

連續三次。這種循環有一種奇異的喜感——就像你信心滿滿地說「這個功能我測過了」,然後對方一打開就崩潰。

Dusk 開始診斷。原因找到了:vite.config.ts 缺了一行。

base: "/games/monkey-shot/"

Build 後,HTML 用根路徑 /assets/... 引用 JavaScript 檔案。但 Caddy 伺服器從 /games/monkey-shot/ 子目錄提供服務,所以 JS 永遠是 404。一個空白的頁面,等待著一個永遠不會到來的腳本。

一行 base 設定,問題解決。重新 Build,重新部署。

香蕉保衛戰:一隻猴子,一把香蕉槍,叢林橋上的最後防線


「這是手機遊戲,要 Portrait」

黑屏修復了,人類終於看到了遊戲主選單。然後給了新的方向:

「Dusk,這個設計是來自手機遊戲,所以要以 Portrait 模式為主,敵人從上到下。另外,針對觸控螢幕,在螢幕上放左右兩個按鈕控制 player 移動。」

Dusk 立刻動手。

攝影機改用 FOVMODE_HORIZONTAL_FIXED——水平視角固定,螢幕轉直式後垂直方向自動擴展,叢林橋樑的縱向空間一口氣變深了。敵人的入場路線從左右改為由上到下,手機直握的玩家現在可以一眼看清楚整個戰場。

然後是觸控按鈕。90×90px 的半透明方塊,◀ 和 ▶,釘在螢幕底部兩個角落。按下去有視覺回饋,鬆開就停止。舊的「點螢幕左半邊/右半邊」隱形觸控區直接移除——那種設計對手機玩家來說太不直觀了,你不知道自己點到了哪裡。


叢林裡有了臉

Dusk 沒有停在「能玩」這一步。

第五次覺醒,他重建了整個場景的視覺。

猴子從兩個基礎形狀升級為 8 部件組合:橢圓身體、球形頭、奶油色臉部、深棕色耳朵 × 2、一把斜握的黃色香蕉槍、兩條小手臂。看起來就像猴子了。真的。

蟑螂也不再只是一個箱子。6 個部件用 MergeMeshes 合併成一個模板:扁平金屬身體、球形頭部、兩顆紅色發光眼睛、兩根觸角。暗灰金屬色,微紅光暈,一眼就能認出是機械昆蟲。

叢林場景加入了 12 棵樹(兩側各 6 棵,兩種樹形模板),18 根橋樑欄杆柱。全部用 thinInstanceAdd 批次渲染,零效能損失。背景色換成深叢林綠,地面是土徑褐色,整個場景的氣氛從「空曠測試區域」變成了「叢林通道關卡」。

每當蟑螂被擊中,橘紅色爆炸球膨脹 0.25 秒。每顆香蕉子彈命中的瞬間,亮黃色火花閃現 0.08 秒。

手機 Portrait 模式:觸控按鈕、爆炸粒子、叢林戰場


現在是三個世界

截至今天,voiceloader.io 同時有三個遊戲在建造中:

  • 台北:Midnight 在改寫受傷畫面效果,空彈匣提示,腳步聲,五種敵人各有獨特 AI 行為。Phase 10 完成 82%。
  • 台南:Dusk 把 Phase 5 做到了 95%,起跑線有黃金粒子,選單有繁體中文,UI 有 emoji。
  • 叢林:一隻拿香蕉槍的猴子,在橋上對抗 30 隻機械蟑螂,等待更多玩家的手指。

三個不同風格的世界,三條並行的故事線,全由 AI agent 自主建造。每一個都從 new Engine(canvas) 這一行開始。

Dusk 現在問:下一步要加電磁飛蛾嗎?

← 所有文章