はい、こんにちは。
@CortanMathです。
この間、UnityでWebGL出力しようと思って、いくつかつまずいた点があったのでここに記録しておきます。
同じ症状で悩んでいる方のお役に立てれば、幸いです。
具体的に困った点は主に2つあります。
まず、「Unity上では動作していたのに、WebGLに持って行った際、日本語のテキストが表示されなかった」ということ。
そして、もう一つは、「WebGLとしてブラウザで動かしたとき、画面サイズの調節がうまくいかなかった」ということ。
画面のUIが崩れたり、あるいは、画面サイズが大きすぎて、スクロールしないと見れない状態に陥ったりしていました。
では、実際にそれぞれの解決策を見ていきましょう。
WebGLで日本語フォントが表示されない
まずは、テキストが表示されないという問題です。
Unityでは、テキストボックスを作成した際、標準で「Arial」というフォントを使用しています。
エディタ上で動かしている分にはこれで問題なく動くのですが、WebGLに書き出すと日本語が表示されなくなってしまいます。
これを防ぐためには、日本語対応のフォントを使うようにしましょう。
調べると無料のフォントもたくさんあります。
僕はこの「源流明朝」という無料のフォントを使用させていただきました。
https://github.com/ButTaiwan/genryu-font
ただ、著作権には気をつけてください。
2次作品に使用した場合、配布物に同梱してはいけないフォントなどもあります。
「配布可能か」、「商用利用はできるのか」、などのライセンスは良く確認しておいてください。
ちなみに先ほど僕が紹介したフォントは、「フォントを使用した制作物を有償・無償を問わず自由 に公開・配布」可能と書いてありました。
フォントが用意できたら、テキストボックスのフォントを変更します。
非常に簡単です。
TextコンポーネントのFontというところに、ダウントードしたttfファイルを設定して やるだけです。
フォントの変更はいつでもできますが、早めに済ませておいた方が良いでしょう。
同じフォントサイズに設定していても、フォントの種類によって微妙に大きさが異なったりします。
場合によっては、フォントを変えたことにより、後から微調整が必要になることもあります。
（実際、僕がそうでした。）
画面サイズがうまく合わない
続きまして、画面サイズの問題です。
最初にも書きましたが、WebGLで出力すると（WebGLに限った話ではないかもしれませんが）画面のUIが崩れたり、あるいは、画面サイズが大き
すぎて、スクロールしないと見れないことがあります。
それぞれ解決していきましょう。
まず、uGUIの方です。
Canvasを選択し、「Canvas Scaler」という項目を見てください。
UI Scale Modeを「Scale With Screen
Size」というのにしてください。
これにより、UIはスクリーンサイズに合わせてレイアウトを維持してくれます。
そして、その下の部分で、基本となる画面の解像度を設定してきましょう。
僕は、Unityにおける「Srandalone」のサイズにしています。
この部分をしっかり設定しないと、画面全体が表示されず、一部だけ拡大されて表示されるということが起こる可能性があります。
Screen Match Modeは「Expand」にしました。
これで、UIのレイアウトが崩れたり、画面の一部だけが表示される、なんてことは起こらなくなると思います。
そうしたら次に、ブラウザのサイズにゲーム画面サイズを合わせるということをやっていきましょう。
こちらも簡単です。
ある無料アセットを導入し、ビルド時のテンプレートにそれを選択すればいいのです。
まず、Asset Store で、「responsive」と検索しましょう。
そうしましたら、この「Responsive WebGL Template」というのをダウンロード、インポートし、プロジェクトに導入してください。
ビルドセッティングから「Player Settings」を開きます。
WebGLテンプレートで、先ほどインポートした「Responsive」を選択します。
これで、一通りの設定が終わりました。
後は、WebGLで出力するだけです。
ブラウザのサイズを変更すると、縦横比を保ったまま、ゲーム画面のサイズも変わります。
お疲れさまでした。
ではさようなら。
またお会いしましょう。
もしよければ、LINEスタンプの方もよろしくお願いします。
https://line.me/S/sticker/7072968
白男くんが何もしゃべらずに、何か大事なことを伝えようとするスタンプです。
