UnityのWebGLで日本語を表示する

  • 22
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

問題

UnityでWebGL向けにアプリを出力した場合、アプリの文字が表示されない事があります。

例えば下のようにUnityのUIに日本語の表記を設定します。特に何も設定せずuGUIのTextコンポーネントでUIを表示しています。
Screen Shot 2016-08-29 at 17.36.50.png

これをWebGL向けに出力すると、下のように日本語が表示されません
Screen Shot 2016-08-29 at 17.39.51.png

フォントのフォールバックはWebGLでは動作しない

問題は、Unityのフォントの初期設定がArialである事、
そしてUnityのTextを使用した際に標準設定で設定されるArialフォントに日本語が含まれていない事です。

demo_unity_-_Unity_WebGL_Japanese_Font_-_WebGL__OpenGL_4_1_.jpg

通常Unityは指定されたフォント(今回の場合Arial)に含まれない文字を使用する場合、他のフォントから文字を抽出します。しかしWebGLはこのフォールバックするようなフォントを内包していないため、日本語の文字を取得出来ず空白として表示している訳です。

解決方法

この解決方法は、日本語を含むフォントを設定する事です。
実際に、日本語が含れているフォントの、Notoを使用してみます。

  1. google notoのサイトよりNoto Sans CJK JPをダウンロードし解凍します。
  2. NotoSansCJKjp-LightをProjectブラウザへドラッグ&ドロップします。
    (Noto Sans CJK JPには日本語が含まれているので、NotoSansCJKjp-Light以外のフォントでもOKです)
  3. インポートしたフォントをTextのFontへドラッグ&ドロップします。
  4. これでWebGLへ出力した際にも、日本語が表示されます。

Screen_Shot_2016-08-29_at_17_42_05.jpg

NotoSansCJKjp-hinted_and_demo_unity_-_Unity_WebGL_Japanese_Font_-_WebGL__OpenGL_4_1_.jpg

demo_unity_-_Unity_WebGL_Japanese_Font_-_WebGL__OpenGL_4_1__and_NotoSansCJKjp-hinted.jpg

Screen Shot 2016-08-29 at 17.59.24.png
※フォントが違うので、表示する文字も変化しています

TextMesh(3DText)の場合も同様に、Fontを設定することで日本語表示が可能になります。

demo_unity_-_Unity_WebGL_Japanese_Font_-_WebGL__OpenGL_4_1_.jpg

フォントのライセンスに注意

Fontにフォントを設定する方法を使用すると、日本語フォントを使用できるようになります。しかし、ゲームにフォントが含まれます。つまりフォントの再配布扱いとなります。

日本語向けのフォントは、ダウンロードして個人的に使用するのは認めていても、ゲームに同梱して使用すること(再配布)は認めていない事が多いです。

実際にフォントを利用する際には、よくライセンスを確認して下さい
(Notoは再配布可能なフォントの一つです。但し再配布するにはLICENSE_OFLを同梱する必要があります)

参考

Unity5.3のWebGLで日本語が表示されない!?-フェレット倶楽部の備忘録
Unityで日本語フォントを使う-Unityゲーム開発所