[UE5]今更聞けないローカライズ～フォント編～

# はじめに
インディーズでも容易にゲームを配信できるようになった現代。
より多くのユーザーに遊んでもらうためにできる努力は様々ですが、ゲーム内のテキストをあらゆる言語に翻訳する"ローカライズ"もユーザーを増やす一助となります。

ローカライズにはテキストをそれぞれの国の言葉に翻訳するものだけでなく、テクスチャやモデル、フォントなどのいわゆるアセットをローカライズするものも含まれます。

本記事ではUE4/5環境でのフォントをローカライズする方法について説明を行います。

## 事前情報
本ページ内で当然のように出てくるローカライズに関する単語を列挙します。
・言語タグ：どの言語かを識別するタグ。詳細は過去の記事をご確認ください。

https://qiita.com/_efe/items/967c8718e729a1788bf0

# フォントのローカライズ概要
フォントをローカライズする目的は<INS>準備したフォントにその言語特有の文字が含まれていない</INS>、というものが多いと思います。

フォントはゲームのスタイルや雰囲気を表すため、スタイルに凝ったものが選択されます。
しかし中国語の簡体字、繁体字、ロシア語のキリル文字など、特定の言語でしか使われない文字はフォントが対応していないなんてことも少なくありません。
それを解決するため、似たようなスタイルのその言語の文字を包括しているフォントを探し出し、ローカライズをしてあげることが多いですね。

本記事で記載することのほとんどは公式ドキュメントに記載されていることのため、バージョンがあがった場合などは最新の公式ドキュメントを参照してください。

# 開発環境
UE5.1 ※UE4でも手順は変わりません。


# 実装
フォントアセットをローカライズする方法は2種類あります。
両方の方法について触れますが、この記事ではコンポジットフォントを用いる方法について詳しく説明します。

## 設定方法

### アセットローカライゼーションを用いる方法
アセットローカライゼーションとはUEが標準的に備えているアセットをローカライズする仕組みです。
テクスチャやモデルはもちろんのこと、フォントアセットもローカライズすることができます。
設定方法や注意点は以下のページで解説していますので、ここでは詳細には触れません。

https://qiita.com/_efe/items/7393cff9b35d6e992d5c

### コンポジットフォントを用いる方法
コンポジットフォントもアセットローカライゼーションと同様にUEが標準的に備えているアセット機能です。
このうちのサブフォントファミリーという機能を使ってフォントのローカライズを行います。

いつも通りデフォルトフォントファミリーにフォントフェイスを登録します。
今回は [Main] と名付けたフォントについてローカライズを行っていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/14a7a50d-eec0-c4bc-aab5-d82c7dd366a1.png)

[サブフォントファミリーを追加] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/06873263-f1b7-a700-dd92-7451c717e53a.png)

サブフォントファミリーが追加されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/49a300fa-d680-84e3-cfda-50c9c1f1e51e.png)
まずサブフォントファミリー部を軽く説明します。
①カルチャー：言語タグを設定します。
②フォントオーバーライドを追加：デフォルトフォントファミリーが複数ある場合、それぞれのフォントに対して上書き設定をすることができます。
③文字範囲を追加：Unicodeの特定文字コード範囲内の文字を④に指定したフォントで書く、という指定をします。
④フォントを追加：③で指定した範囲の文字を置き換えるフォントを設定します。

例えばサブフォントファミリーに次のような設定をしたとします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/87962ecc-d9ff-0200-30e0-dcfb4afd4446.png)

この設定の意味はこのようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/8bb5b1b2-edd8-92ca-b8b1-1fd69f05c818.png)
カレントの言語がru/en以外の場合はデフォルトフォントファミリーのフォントが使用されます。
さらにru/enの場合でも文字範囲に含まれない文字についてはデフォルトフォントファミリーのフォントで表示されます。

### 文字範囲設定の例
よく使う文字範囲設定を表にまとめておきます。
対応されている文字はフォントによって異なるので、参考程度にしてください。

#### 日本語
| 文字ブロック | Unicode範囲 | 補足 |
|---|---|---|
| 平仮名 | 0x3040～0x309F |  |
| 片仮名 | 0x30A0～0x30FF |  |
| 片仮名拡張 | 0x31F0～0x31FF |  |
| 半角・全角形 | 0xFF00～0xFFEF |  |
| CJK統合漢字 | 0x4E00～0x9FFC |  |
| CJK統合漢字拡張A | 0x3400～0x4DB5 |  |
| CJK統合漢字拡張B | 0x20000～0x2A6DD |  |
| CJK統合漢字拡張C | 0x2A700～0x2B739 |  |
| CJK統合漢字拡張D | 0x2B740～0x2B81D |  |
| CJK統合漢字拡張E | 0x2B820～0x2CEA1 |  |
| CJK統合漢字拡張F | 0x2CEB0～0x2EBE0 |  |
| CJK統合漢字拡張G | 0x30000～0x3134A |  |
| CJK統合漢字拡張H | 0x31350～0x323AF |  |
| CJK互換漢字 | 0xF900～0xFAFF |  |
| CJK互換漢字補助 | 0x2F800～0x2FA1F |  |
| 字形選択子補助 | 0xE0100～0xE01EF |  |

#### 中国語
| 文字ブロック | Unicode範囲 | 補足 |
|---|---|---|
| CJK統合漢字 | 0x4E00～0x9FFC |  |
| CJK統合漢字拡張A | 0x3400～0x4DB5 |  |
| CJK統合漢字拡張B | 0x20000～0x2A6DD |  |
| CJK統合漢字拡張C | 0x2A700～0x2B739 |  |
| CJK統合漢字拡張D | 0x2B740～0x2B81D |  |
| CJK統合漢字拡張E | 0x2B820～0x2CEA1 |  |
| CJK統合漢字拡張F | 0x2CEB0～0x2EBE0 |  |
| CJK統合漢字拡張G | 0x30000～0x3134A |  |
| CJK統合漢字拡張H | 0x31350～0x323AF |  |
| CJK互換漢字 | 0xF900～0xFAFF |  |
| CJK互換漢字補助 | 0x2F800～0x2FA1F |  |
| 字形選択子補助 | 0xE0100～0xE01EF |  |

#### 韓国語（ハングル）
| 文字ブロック | Unicode範囲 | 補足 |
|---|---|---|
| ハングル字母 | 0x1100～0x11FF |  |
| ハングル字母拡張A | 0xA960～0xA97F |  |
| ハングル字母拡張B | 0xD7B0～0xD7FF |  |
| ハングル互換字母 | 0x3130～0x318F |  |
| ハングル音節文字 | 0xAC00～0xD7A3 |  |
| 半角・全角形 | 0xFF00～0xFFEF |  |

#### ロシア語
| 文字ブロック | Unicode範囲 | 補足 |
|---|---|---|
| キリル文字 | 0x0400～0x04FF |  |
| キリル文字補助 | 0x0500～0x052F |  |
| キリル文字拡張A | 0x2DE0～0x2DFF |  |
| キリル文字拡張B | 0xA640～0xA69F |  |
| キリル文字拡張C | 0x1C80～0x1C8F |  |
| キリル文字拡張D | 0x1E030～0x1E08F |  |

#### アラビア語
| 文字ブロック | Unicode範囲 | 補足 |
|---|---|---|
| アラビア文字 | 0x0600～0x06FF | 右から左に書く |
| アラビア文字補助 | 0x0750～0x077F | 右から左に書く |
| アラビア文字拡張A | 0x08A0～0x08FF | 右から左に書く |
| アラビア文字拡張B | 0x0870～0x089F | 右から左に書く |
| アラビア文字拡張C | 0x10EC0～0x10EFF | 右から左に書く |
| アラビア表示形A | 0xFB50～0xFDFF | 右から左に書く |
| アラビア表示形B | 0xFE70～0xFEFF | 右から左に書く |

#### 記号
| 文字ブロック | Unicode範囲 | 補足 |
|---|---|---|
| 全角ASCII | 0xFF01～0xFF60 | 日本の句読点を含む全角記号 |
| 一般句読点 | 0x2000～0x206F | ラテン言語で最も一般的に用いられる句読点 |
| 補助句読点 | 0x2E00～0x2E7F | 特殊な表記法や古代写本に用いられる、比較的頻度の少ない句読点 |
| CJKの記号及び句読点 | 0x3000～0x303F | CJK、西夏文字、女書などの東アジアの表意文字で用いられる記号と句読点 |
| 漢字の記号及び句読点 | 0x16FE0～0x16FFF | CJK、西夏文字、女書などの東アジアの表意文字で用いられる記号と句読点 |
| CJK互換形 | 0xFE30～0xFE4F | 台湾の規格CNS 11643用の互換文字 |
| 小字形 | 0xFE50～0xFE6F | 台湾の規格CNS 11643用の互換文字 |
| 縦書き形 | 0xFE10～0xFE1F | 中国の規格GB 18030用の互換文字 |

参照元↓

http://www.asahi-net.or.jp/~ax2s-kmtn/ref/unicode/index.html

## 確認方法

### テキストを直打ちしている場合

テスト用にWidgetにテキストを配置しFontの設定をします。
テキストに日本語、英語、ロシア語を直で設定してあります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/52965a55-a5c9-6e58-fcd6-77af6da6b120.png)

選択ビューポート/PIE/スタンドアローンなど好きな起動モードで起動します。
カレントの言語は日本語（ja）になっているので、表示されているフォントはデフォルトフォントファミリーのものになっています。
このフォントはロシア語のキリル文字が含まれていないので三行目は文字化けしていますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/567f96fa-b00b-b9ed-db24-6583ad432e32.png)

コンソールコマンドで```language=ru```と入力します。
すると一行目、二行目のフォントはデフォルトフォントファミリーのもののまま、三行目がサブフォントファミリーに指定したロシア語用のフォントになって表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/699ffbf3-e224-4532-8153-00c15e6cc49a.png)

次にコンソールコマンドで```language=en```と入力します。
すると一行目、三行目のフォントはデフォルトフォントファミリーのものになり、二行目がサブフォントファミリーに指定した英語用のフォントになって表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/a650c108-5e17-e697-b527-0d6d5c37ea85.png)

このようにテキストを直打ちしている場合はコンソールコマンドで言語を切り替えることによって、簡単にフォントのローカライズを確認することができます。

### ローカライズ対応が入っている場合

テスト用にWidgetにローカライズテキストを指定し、Fontの設定をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/746c5c49-6128-e076-6cb3-8c188cdb40c3.png)

ローカライズの設定ではそれぞれこのようなテキストが設定されています。
| 日本語（Default） | 英語 | ロシア語 |
|---|---|---|
| ハローワールド！ | Hello World! | Здравствуй мир |

何もせずに起動するとカレントの言語が日本語（ja）なので、日本語のテキストがデフォルトフォントファミリーのフォントで表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/dd8bbb1d-3177-9919-e34b-ce4a3ba3b37d.png)

ツールバーメニューの [︙] から [詳細設定...] をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/9bce3bfc-60e1-d9e4-a3bb-4e345728c734.png)

エディタの環境設定ウィンドウが開くので、[追加の起動パラメータ] 部分にどの言語で立ち上げるかを記載します。ここでは英語（en）を指定しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/bba89b70-0dda-2c1d-9197-2a6b9c53bc9d.png)

```c++:起動パラメータ
language=任意の言語タグ
```

ツールバーメニューの [︙] から [スタンドアローンゲーム] をクリックしてゲームを起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/4a91c866-e7f7-45da-736e-8382c48b108a.png)

サブフォントファミリーに指定した英語用のフォントで英語のテキストが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/e19cc209-3303-ee68-237e-f64a6c13f110.png)

同様に起動パラメータでロシア語（ru）を指定して起動すると、サブフォントファミリーに指定したロシア語用のフォントでロシア語のテキストが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/548800/2baa8a4b-1ee3-06ed-36e4-1d00c5cdd38a.png)

選択ビューポート/PIEでの起動では確認できないのでスタンドアローンで確認してください。

# まとめ
フォントのローカライズではアセットローカライゼーションを使うか、コンポジットフォントを使うか、2通りの方法があります。

アセットローカライゼーションではGameInstanceなどレベル遷移で破棄されないクラスがハード参照を持っていると、ローカライズされないという特徴がありました。
GameInstanceではローディング画面など、何かしらのWidget、ひいてはフォントアセットがハード参照で繋がっていることが多いクラスです。
そのためコンポジットフォントを使う方法のほうが扱いやすいかもしれませんね。

# 参考

https://docs.unrealengine.com/5.1/ja/asset-localization-in-unreal-engine/

https://docs.unrealengine.com/5.1/ja/font-asset-and-editor-in-unreal-engine/

http://www.asahi-net.or.jp/~ax2s-kmtn/ref/unicode/index.html