今回は一人称視点の探索ゲームが制作できるアセット First Person Exploration Kit のユーザーインターフェースを日本語化してみることにしました。
First Person Exploration Kit とは？
一人称視点のアドベンチャーゲーム開発キットで、アイテムのマウス操作、インベントリ管理、セーブシステムなどが用意されています。
UI プレハブを日本語化する
まずはUI表示の日本語化してみることにします。最初の手順はプレハブの複製です。
[Project]ウィンドウ > Assets > FirstPersonExplorationKit > Prefabs > UI フォルダ内にある下記のプレハブ選択。
複製（メニュー：Edit > Duplicate）して下記の通り名前を変更します。
FPEDefaultHUD → FPEDefaultHUD_JP
FPEGameMenu → FPEGameMenu_JP
FPEMainMenu → FPEMainMenu_JP
画面解像度の変更
プレハブを編集するために作業用の新規シーンを作成。先程複製したプレハブのうち、ゲームシーンで使用する FPEDefaultHUD_JP と、FPEGameMenu_JP をシーンに配置します。まずはウィンドウ解像度の設定を確認してみましょう。
[Game]ウィンドウ確認するとこのように表示されます。ディスプレイのサイズによって表示サイズが変化するため、相対的なサイズが分かるように右下部分を切り取って左上に貼り付けてみました。ウィンドウサイズをフルHD（1920ｘ1080）で表示するとボタンやテキストサイズはこのように丁度良いサイズです。
次に1/2HD（1280×720）の表示を確認すると、ややボタンとテキストのサイズが小さくなります。ちょっと字が小さくなりますがまだ大丈夫です。
最後に640×360 で表示してみます。さすがにボタンサイズやテキストが小さいです。
「本当に世の中の文字は小さすぎて読めない！」渡辺 兼さんも怒っています。
WebGLでビルドしたゲームをWebページに載せるには 640×360 の解像度で、ハズキルーペが無くてももう少し見やすくなるように基準となる解像度設定を変更します。
[Inspector]ウィンドウ > Canvas Scaler (Script) コンポーネントの Reference Resolution 設定を 1280 x 720 に変更します。
FPEGameMenu のUIテキストオブジェクトの日本語化
ゲーム実行中に表示されるHUD（ヘッドアップディスプレイ）のUIテキストオブジェクトのフォントを日本語フォントに変更します。
設定としてはフォントを日本語ホントに変更するだけで大丈夫ですが、ついでに初期テキスト内容も日本語文章に置き換えておきましょう。
まずは画面中央に表示されるインタラクトテキストの日本語対応です。
[Hierarchy]ウィンドウ > FPEDefaultHUD_JP > InteractionTextLabel を選択。[Inspector]ウィンドウ > Text (Script) コンポーネントのフォントを日本語対応フォントに変更、サイズを調整します。
日本語化に使用するフォントは商業利用可、複製、再配布可能な M+ FONTS を使用しています。
それぞれのUIオブジェクトの Text (Script) コンポーネントのフォントを日本語対応フォントに変更、サイズを調整。階層内にある HintText オブジェクト のText フィールドの文字を日本語に書き換えます。
すべてテキストを書き換え、ゲームコントローラー用のボタン表示を削除。ボタン表示位置の調整を行いました。
FPEDefaultHUD コンポーネントのテキストフィールドの日本語化
プレハブ FPEDefaultHUD を選択して[Inspector]ウィンドウ > FPE Default HUD (Script) コンポーネントを確認。ヒントテキストの表示内容を日本語に書き換えます。初期設定の状態はこのような英文になっています。
それをこのように日本語に書き換えました。
FPEMainMenuの日本語化
次にゲーム実行中に呼び出すメニュー画面（デフォルトではEscキーで呼び出し）を日本語化します。
こちらもハズキルーペが無くても見やすくなるように基準となる解像度設定を変更しました。
作業用のシーンに配置してある FPEGameMenu_JP を選択。
[Inspector]ウィンドウ > Canvas Scaler (Script) コンポーネントの Reference Resolution 設定を 1280 x 720 に変更します。
MenuCanvas は無効化されていているため、作業のために [Inspector]ウィンドウの名前の左側にあるチェックを入れて有効化しておきましょう。
それぞれのUIオブジェクトの Text (Script) コンポーネントのフォントを日本語対応フォントに変更、サイズを調整。階層内にある HintText オブジェクト のText フィールドの文字を日本語に書き換えます。
すべてテキストを書き換え、ゲームコントローラー用のボタン表示を削除。ボタン表示位置の調整を行いました。
アイテム表示タブ
オリジナルはこのようになっています。
改造してこのようになりました。
インベントリアイテの操作メニュー（ InventoryActionsPanel ）
オリジナルはこのようになっています
改造してこのようになりました。
音声記録表示タブ
オリジナルはこのようになっています。
改造してこのようになりました。
添付メモ表示タブ
オリジナルはこのようになっています。
改造してこのようになりました。
システム表示タブ
オリジナルはこのようになっています。
改造してこのようになりました。
操作ヒントのテクスチャ画像 ControlsHelpImage はゲームパッド操作の部分を削除してキーボードとマウス操作の部分を並べ変えました。
ゲーム終了ボタンをクリックして表示される確認画面 ExitConfirmationPanel のオリジナル。
改造してこのようになりました。
画面左下にあった追加の操作チップステキスト InstructionText は無くても問題なさそうだったので削除しました。
ゲームコントローラーのボタン表示オブジェクトを削除する際の注意点
アイテム一覧ページを切り替える PageControlsPanel については ゲームパッド操作のボタンアイコンオブジェクトを削除するとゲーム再生時に参照エラーが発生しました。
なので、オブジェクトはそのまま残して Image (Script) > Source Image フィールドをクリアして割り当てられているテクスチャだけ外しました。
オブジェクトは FPEGameMenu_JP > MenuCanvas > PageControlsPanel > RightStickHintLeft と RightStickHintRight になります。
ピックアップオブジェクトの日本語化
ゲームメニューに保存される添付メモを入手した際に表氏されるヒントテキストはスクリプトを直接修正する必要がありました。
オリジナルはこのように表示されます。
それをこのように日本語表示に置き換えます。
スクリプトファイルの場所は Assets > FirstPersonExplorationKit > Scripts > FPEInteractionManagerScript.cs になります。下記のマーカー部分を日本語に変更します。
private void retrieveNote(GameObject interactableObject)
{
if (interactableObject.gameObject.GetComponent<FPEAttachedNote>() &&
!interactableObject.gameObject.GetComponent<FPEAttachedNote>().Collected)
{
showNotification("新しいメモ「'" + interactableObject.gameObject.GetComponent<FPEAttachedNote>().NoteTitle + "」が追加された。");
genericSFXPlayer.GetComponent<AudioSource>().PlayOneShot(noteAdded);
inventoryManager.addNoteEntry(interactableObject.gameObject.GetComponent<FPEAttachedNote>().collectNote());
}
}
FPEMainMenuの日本語化
ゲームスタート時に読み込まれるメインメニューシーンのプレハブの日本語化です。最初に複製しておいたプレハブ FPEMainMenu_JP を作業用シーンに配置します。
オリジナルのメインメニューはこのような表示です。
それぞれテキストコンポーネントのフォントを日本語フォントに変更。そしてテキストフィールを日本語に変更。ついでにレイアウトも変更しました。
日本語化したUIプレハブを使用する手順
日本語化したUIプレハブ FPEDefaultHUD_JP と FPEGameMenu_JP を使用するには、ゲームで使用するシステムのプレハブ FPECore を選択します。
これで完成です。
ほとんどはコンポーネントに表示テキストフィールドが用意されているので、日本語化はそんなに難しくありませんでした。