UnityのWebGLでのUIについて

Question

UnityでWebGL吐き出しのUI画面を作成しています。
１６：９の画面設定で作成し、そのままビルドしていますが、
ビルドした後、FireFoxなどで見ると、画面とUIの間のマージンが予想以上に
空いてしまいます。
Unityの作成画面で見たままのレイアウトで、WebGL画面で同様に表現できるようになるには、どのような箇所に気をつければ良いでしょうか。

Answer 1

Canvasにデフォルトでアタッチされている「Canvas Scaler」の設定を確認してみてください。
デフォルトでは「UI Scale Mode」が「Constant Pixel Size」になっておりますが、これを「Scale With Screen Size」にすれば、画面の大きさに応じて自動でCanvasの大きさが変わるようになります。
設定方法については、こちらを確認してみてください。

ただ、これを設定しても、画面の縦横比などによって意図した位置や大きさにならない場合もあります。
この場合は、各コンポーネント（ボタンなど）の「Rect Transform」の左上にあるアイコンで、基準となる位置を指定すればよいでしょう。

他には、画面のサイズを環境によって変えるつもりがないのであれば、画面サイズを固定してしまうという手もあります。

Comments

[zarakima]

「Constant Pixel Size」にしてみたらうまくいきました。
次回作るときは、画面サイズの固定も検討します。
ありがとうございます。