作ったゲームを多言語化（英語のみ）してみる

#実装するゲーム
前に作ったHTML5のゲームに実装してみます。
テキスト量も程よかったです。

https://qiita.com/saitotsushin/items/687521323ab31c772d4f

#実装方法
言語用のテキストをjsonで準備する。

```
assets
∟gameText.json
```

構造は「ja（日本語）」、「en（英語）」で分けてそれぞれの言語選択で振り分けるできるようにした。

```json
{
    "ja":{
        "TitleScene":{
            "menu":{
                "menu1": "モンスターさくせい"
            }
        }
    },
    "en":{
        "TitleScene":{
            "menu":{
                "menu1": "Creat monster",
            }
        }
    }
}
```

#出来上がったもの
![できたもの.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/9687957a-1883-a22d-2e51-a5ae86d2844e.jpeg)


https://monster-battle-54e78.firebaseapp.com/

英語はgoogle翻訳でかなりアバウトに行っています。

#振り分けスクリプトの実装
ブラウザの設定をjavascriptで検知できるのでリソースを読み込むsceneスクリプトに記述します。

まずjsonの読み込み

```javascript
this.load.json('gameText', 'assets/gameText.json');
```

jsonを読み込んでから振り分けしたかったのでリソースの読み込み完了後に振り分けを追加。
Phaser.jsでシーンを跨いでのデータ保持する場合は

```javascript
//データを格納する変数を作る
this.registry.set('変数', '値');
//呼び出し
var hoge = this.registry.list.変数;
//変更
this.registry.list.変数 = "hogehoge";
```

が用意されているので、こちらを使用して保存しておく。

```javascript
this.load.on('complete', () => {
  let gameText = this.cache.json.get('gameText');
  this.registry.set('gameText', gameText);
  /*英語チェック*/
  // 最優先の言語だけ取得
  var lang = (window.navigator.languages && window.navigator.languages[0]) ||
              window.navigator.language ||
              window.navigator.userLanguage ||
              window.navigator.browserLanguage;    
  if(lang == 'ja'){
    this.registry.set('lang', 'ja');
    this.registry.set('gameTextLang', this.registry.list.gameText.ja);
  }else{
    this.registry.set('lang', 'en');
    this.registry.set('gameTextLang', this.registry.list.gameText.en);
  }

  this.progress.destroy();//プログレスバーの削除
  this.scene.start('TitleScene');//タイトルシーンに移動
});
```


参考

https://qiita.com/shogo82148/items/548a6c9904eb19269f8c

#チェック方法

https://www.howtonote.jp/google-chrome/setting/index12.html

を参考に
chromeの設定＞詳細設定＞言語
三点リーダーから「下に移動」、「トップに移動」で優先順を選択して
振り分けられるかチェックします。
![設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/fb143446-5089-6fba-e0bb-2ddea724fbb5.png)

#テキスト部分を書き換えていく
ボタンのテキストを直で指定していたのをjsonの要素に書き換えていく。

```javascript
this.btnMakeMonster = this.add.text(
  ~~省略~~
  this.registry.list.gameTextLang.TitleScene.menu.menu1,//←'モンスター作成'を差し替え
  ~~省略~~
);
```

#切り替えの実装
アクセス時の判定以外でも、ゲーム内の設定として切り替えられるようにします。

小さいですがタイトルの右上に設置

![言語ボタン.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/561145/0cff9453-d156-c2a9-6e18-2543572a5860.jpeg)


ボタンを選択後に保存していた言語の変更して、シーンを読み直します。

```javascript
SelectLanguage(_selectLang){
  this.registry.list.lang = _selectLang;//選択した言語（ja or enが入る）
  if(_selectLang == 'ja'){
    this.registry.list.gameTextLang = this.registry.list.gameText.ja;
  }else{
    this.registry.list.gameTextLang = this.registry.list.gameText.en;
  }
  this.scene.restart();          
}
```

#メニュー以外の動的なテキスト
日本語：「10連勝」
英語：「WIN 10」
みたいにしたい時に

```javascript
number = "1";
//日本語
text = number + "連勝";
//英語
text =　"WIN" + number;
```

英語だと変数の順番を変更しなければならない。
無理矢理というか思いつかなかったので、jsonには前後のテキストを準備。

```json
"ja":{
  "number_text1": "",
  "number_text2": "連勝"
},
"en":{
  "number_text1": "WIN",
  "number_text2": ""
}
```

記述は

```javascript
//日本語or英語
number = "1";
text = number_text1 + number + number_text2;
//日本語：「1連勝」
//英語：「WIN1」
```

のように挟んで誤魔化した...

#テキストありの画像部分

- テキストありの画像だったのはテキストに変更
- タイトル部分は画像を２つ用意して切り替え（画像の切り替えはタイトルのみ）
 
地味に面倒ですが、タイトル部分の変更はテンションが上がります。

#最後に

- 他の言語を追加する
- OGPの切り替え

したときにどんどんややこしい実装になりそうな気がしています。
ベストプラクティスがわからず、こんな実装になりました。

英語化を思い立ってやってみましたが8時間ほどかかりました。

日本語のみを想定していたため、元のコードがいじりづらかった...
ゲームを作るときは元から多言語化を想定している実装するのが良さそうです。