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

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

export const config = 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

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

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

// 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

this.app.i18n.onLocaleChanged.connect((newLocale) => {
console.log(Language changed to: ${newLocale});
// Update UI elements, etc.
});

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

You can load additional translation files after initialization:

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

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