【Unity】WebGLでゲームを公開するときにUIが変になったときの対処法

概要

Unityで作成したゲームをブラウザ上に公開するとき、WebGLは非常に簡単で便利な方法になります。しかし、通常の設定のまま公開してしまうと、UIや画面サイズが崩れてしまい、せっかくのゲームが台無しになってしまいます。

本記事は、Unityで作成したゲームをWebGLで公開するときに重要な設定をまとめたものになります。

①Canvasの設定

• Canvasのインスペクターを開き、CanvasScaler を次のように設定する。
  • UI Scale Mode を Scale With Screen Sizeに変更
  • Reference Resolution の値をゲームシーンの画面サイズの値に変更
    （画面サイズが大きすぎるとブラウザ上で見づらくなるので注意）
  • Screen Match Mode を Expand に変更
    
    
    

②フォントの設定

• Unityのデフォルトのフォント (Arial) の場合、ブラウザ上では表記が乱れてしまうことがあります。これを避けるために、配布フォントを使用する必要があります。おすすめのサイトを載せましたので、参考にしていただければと思います。
  https://rwiiug.hatenablog.com/entry/font_matome
  ※フォントの利用規約には十分注意してください！

③ビルドの設定

• WebGLでビルドする時に、Player Settings を開き、Player > Resolution and Presentation > Resolution の値をゲームシーンの画面サイズの値に変更する。
  
  

（おまけ）UnityRoomでゲームを公開する場合

• WebGLでビルドする時に、Player Settings を開き、Player > Publishing Settings > Compression Format を GZip に変更する。
  

まとめ

以上の設定をすることで、ブラウザ上でもUIが崩れずに正常にプレイすることができるかと思います。上記の設定をしてもUIが崩れることがあれば、コメントで教えていただければと思います。