Pixi’VNInternalization
This page explains how to add multi-language support to your Pixi’VN game using i18next, including UI and narration translation strategies. How to translate the visual novel?
In visual novels and similar games, it is common to allow players to select their native language.
For your Pixi’VN project, you should use an external library to handle translations. This gives you the flexibility to choose the implementation that best fits your needs.
Templates
In all templates, i18next is already included and configured. You can start translating your game right away.
The most popular and widely compatible library is i18next.
i18next
What is i18next? i18next is an internationalization framework for JavaScript. To use it, you need to install and initialize it. Learn more on the i18next website.
Translations are stored in multiple JSON files (one per language), using key-value pairs. The key is a unique identifier for the text, and the value is the translated string.
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
}
});
}
}Create
ink
If you use ink, you can automatically extract strings from ink text for translation. See more here.
Translation JSON files must be created manually. It is recommended to split translations into two sections (see 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}}"
// ...
}
}