Pixi’VN国际化
本文介绍如何借助i18next为你的Pixi'VN游戏添加多语言支持，涵盖界面与剧情文本的翻译策略。 视觉小说该如何做多语言适配？
在视觉小说及同类游戏中，让玩家自由选择母语是非常常见的需求。
对于Pixi'VN项目，我们建议使用外部库来管理翻译内容。 这样你就可以灵活选用最契合项目需求的实现方案。
Templates
所有模板均已预装并配置好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": {
"text_speed": "Velocidad del texto",
// ...
},
"narration": {
"Hello, my name is {{name}}": "Hola, mi nombre es {{name}}"
// ...
}
}