为 Kiwi Defenders 构建轻量级在地化系统
我们如何为一款以浏览器为核心的游戏实现零依赖、即时的 i18n 架构。
突破英文的界线
随着《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 框架，使其能够根据文字的扩展动态自适应，同时保持可读性与视觉一致性。最终呈现出的是一种更加原生、自然的国际化体验，而非生硬的机器翻译感。