Pixi’VN国际化
本文介绍如何借助i18next为你的Pixi'VN游戏添加多语言支持，涵盖界面与剧情文本的翻译策略。 视觉小说该如何做多语言适配？
在视觉小说及同类游戏中，让玩家自由选择母语是非常常见的需求。
对于Pixi'VN项目，我们建议使用外部库来管理翻译内容。 这样你就可以灵活选用最契合项目需求的实现方案。
模板
所有模板均已预装并配置好i18next。 你可以直接开始翻译游戏内容。
目前生态中最流行、兼容性最好的方案就是i18next。
i18next
什么是 i18next？i18next是一个面向JavaScript的国际化框架。 使用前，需要先安装并初始化它。 具体可查阅i18next官网。
翻译内容以多个JSON文件存储（每种语言一个），采用键 - 值对形式。 键是文本的唯一标识符，值是对应语言的翻译结果。
import i18n from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { initReactI18next } from "react-i18next";
import strings_en from "../src/values/translations/strings_en.json";
import strings_es from "../src/values/translations/strings_es.json";
const getUserLang = (): string => {
let userLang: string = navigator.language || "en";
return userLang?.toLocaleLowerCase()?.split("-")[0];
};
export const useI18n = () => {
if (!i18n.isInitialized) {
i18n.use(LanguageDetector)
.use(initReactI18next)
.init({
debug: false,
fallbackLng: "en",
lng: getUserLang(),
interpolation: {
escapeValue: false,
},
resources: {
en: strings_en,
es: strings_es,
// Add more languages here
},
});
}
};创建存档
ink
如果你采用 Ink 编写剧情，可以自动提取文本用于翻译。 具体方法见此。
翻译用的JSON文件需手动创建。 推荐将内容分为两大区块（参考strings_es.json）：
- UI texts: for screens, settings, quick buttons, etc.—everything not part of the narration.
- Narration texts: for dialogues, choice menus, etc.
{
"ui": {
"text_speed": "Velocidad del texto"
// ...
},
"narration": {
"Hello, my name is {{name}}": "Hola, mi nombre es {{name}}"
// ...
}
}