2021年3月7日

ブラウザゲームの多言語対応をやってみる

ブラウザゲームなら公開した時点で世界中の人が見ることができるようになっています。

ならば日本語だけでなく、少なくとも英語には対応して世界にアピールしようではないか！！(ﾟДﾟ)ﾉ

ということで自己流でどうにか多言語対応をしてみたいと思います。

オブジェクトに言語別にテキストを入れる

ゲーム内で日本語・英語を切り替えられるようにしたいのでテキストをテキスト表示関数に直接書き込むのではなく、テキスト用のオブジェクトを用意してそこに言語別に書いておくのがとりあえず一番簡単そうなので作ります。

const TextMessage = {
  TitleScene: {
    Title: {
      Ja: "コスモレスキュー",
      En: "COSMO RESCUE"
    Start: {
      Ja: "スタート",
      En: "START"
    },
    Ranking: {
      Ja: "ランキング",
      En: "RANKING"
    },
    Menu: {
      Ja: "メニュー",
      En: "MENU"
    }
  }
}

で、このオブジェクトを作るときに困ったんですが、上のように小さい要素内で各言語を書いていくか、それともまず先に言語で分けてから各言語ごとに作るべきか、どっちの方が良いんだろうかと迷いました。

まぁ自分の場合はミニゲームでテキストが少ないのでどっちでも問題ないんですが、テキストが多い場合だと言語ごとに分けて作った方が後から新しい言語を追加することがあったりする場合には楽なような気がします。まぁその辺はお好みで(^^;)

で、テキスト表示関数(例はpixi.js)で

PIXI.Text(TextMessage.TitleScene.TItle[Config.Language], style);

みたいな感じでやれば選ばれている言語で表示されるはずです。

あ、Config.Languageが選択してる言語です。

ゲーム起動時にブラウザの設定言語を取得

Config.Languageに選択言語を入れるわけですが、ゲーム起動時にブラウザの設定言語を取得して最初から切り替えてあげるとすごい親切ですよね？

if(window.navigator.languages[0]){
  if(window.navigator.languages[0] == 'ja' || window.navigator.languages[0] == 'ja-JP'){
    Config.Language = 'Ja';
  }else{
    Config.Language = 'En';
  }
}else{
  if(window.navigator.language == 'ja'){
    Config.Language = 'Ja';
  }else{
    Config.Language = 'En';
  }
}

こんな感じでゲーム起動時のどこかに書いておけばブラウザの設定言語を取得してくれます。

ブラウザによって違いがあるようなので全部書いておくと安心です(^^;)

上の例では日本語以外の場合は英語になるようにしています。