為 Kiwi Defenders 構建輕量級在地化系統

我們如何為一款以瀏覽器為核心的遊戲實現零依賴、即時的 i18n 架構。

作者：Grandevity Team •
#遊戲開發#在地化#i18n#Kiwi Defenders#HTML5

突破英文的界線

隨著《Kiwi Defenders》準備在全球各大瀏覽器遊戲平台上發布，在地化（Localization）迅速成為了核心要務。

我們面臨的挑戰是：既要支援多國語言，又要滿足輕量級 HTML5 遊戲嚴格的效能要求。大型的國際化（i18n）框架雖然功能豐富，但對於一個追求極致載入速度與響應靈敏度的瀏覽器遊戲來說，它們引入了不必要的效能開銷。

因此，我們沒有整合笨重的外部函式庫，而是完全使用原生 JavaScript (Vanilla JavaScript) 構建了整個在地化系統，實現了真正的零第三方依賴。

客製化的 i18n 架構

遊戲使用了一個集中的語言字典，包含了以下語言的 UI 翻譯字串：

  • 英文 (English)
  • 簡體中文 (Simplified Chinese)
  • 日文 (Japanese)
  • 西班牙文 (Spanish)

每個介面元素都透過輕量級的 data-i18n 屬性進行映射，允許系統動態替換整個使用者介面中的文字內容。這種方法不僅保持了程式碼的高度可維護性，還將執行時期的複雜性降到了最低。

即時語言切換

玩家可以直接在「戰役地圖」介面切換語言，無需重新整理頁面。

當發生語言切換時，遊戲會使用以下方法執行基於整個 DOM 的更新： document.querySelectorAll('[data-i18n]')

介面會瞬間刷新，在選單、升級面板、遊戲畫面與戰役進度系統中創造出無縫的多語言體驗。隨後，玩家的語言偏好會透過瀏覽器本機儲存系統 (Local Storage) 或相容的發行商 API 進行儲存，確保語言設定在不同的遊戲工作階段 (Session) 中保持一致。

為在地化設計 UI 系統

在地化遠不止是直接翻譯那麼簡單。不同語言在文字長度與結構上差異巨大，這對響應式介面設計提出了嚴峻的挑戰。最初圍繞簡短英文標籤設計的按鈕與面板，在翻譯成較長的歐洲語言或亞洲語言時很容易發生排版破裂。

為了解決這個問題，我們使用靈活的佈局系統重構了 UI 框架，使其能夠根據文字的擴展動態自適應，同時保持可讀性與視覺一致性。最終呈現出的是一種更加原生、自然的國際化體驗，而非生硬的機器翻譯感。