Skip to content
dill pixel

Copy and Content

Dill pixel provides robust internationalization (i18n) support through its i18n plugin, allowing you to manage text content in multiple languages.

Configuration

Section titled “Configuration”

Configure i18n in your dill-pixel.config.ts:

export default defineConfig({
  // ... other config options
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'fr', 'es'],
    loadAll: false,
    files: [
      { id: 'en', json: '/locales/en.json' },
      { id: 'fr', json: '/locales/fr.json' },
      { id: 'es', json: '/locales/es.json' },
    ],
  },
  ...
});

Translation Files

Section titled “Translation Files”

Create JSON files for each supported language:

locales/en.json
{
  "welcome": "Welcome to my game!",
  "score": "Score: {points}",
  "greeting": "[Hello|Hi|Hey] {name}!",
  "level": "Level {number}"
}

Using Translations

Section titled “Using Translations”

Simple Translation

Section titled “Simple Translation”
// Translation key: "welcome": "Welcome to my game!"
const message = this.app.i18n.t('welcome');
// Output: "Welcome to my game!"


// Translation key: "score": "Score: {points}"
const score = this.app.i18n.t('score', { points: 100 });
// Output: "Score: 100"


// Translation key: "greeting": "[Hello|Hi|Hey] {name}!"
const greeting = this.app.i18n.t('greeting', {
  name: 'Player',
  variant: 'random',
});
// Output: Randomly selects one of:
// "Hello Player!" or "Hi Player!" or "Hey Player!"


// Translation key: "greeting": "[Hello|Hi|Hey] {name}!"
const specificGreeting = this.app.i18n.t('greeting', {
  name: 'Player',
  variant: 1,
});
// Output: "Hi Player!" (selects second variant)

Switching Languages

Section titled “Switching Languages”
// Change the current locale
await this.app.i18n.setLocale('fr');
// Get current locale
const currentLocale = this.app.i18n.locale;
// Get available locales
const availableLocales = this.app.i18n.locales;

Listening for Language Changes

Section titled “Listening for Language Changes”
this.app.i18n.onLocaleChanged.connect((newLocale) => {
console.log(Language changed to: ${newLocale});
// Update UI elements, etc.
});

Parsing Text with Keys

Section titled “Parsing Text with Keys”

The parse method allows you to embed translation keys within text:

const text = this.app.i18n.parse('Current {level}');
// If level="Level 5" in dictionary, outputs: "Current Level 5"

Loading Additional Translations

Section titled “Loading Additional Translations”

You can load additional translation files after initialization:

await this.app.i18n.loadLocale('fr');

Best Practices

Section titled “Best Practices”
  1. Use meaningful translation keys that describe the content
  2. Keep translations organized by feature or section
  3. Use parameters instead of concatenating strings
  4. Consider using variants for natural language variation
  5. Always provide fallback text for missing translations