この記事は、Unity Advent Carender 2021の17日目の投稿です！

概要

本記事では、UnityでWebGL書き出しを選択し、スマートフォン等のモバイル環境で動作させる際に、画面に対して最大化を行うためのポイントについてまとめています。
スマートフォン、特にiPhoneでは、タブバーやアドレスバーが邪魔になり、想定した画面サイズよりも小さい画面で動作させられることが頻発します。そのような際に自動的に画面サイズにフィットされないと、本来想定したものとは違った見え方をしてしまいます。このような現象の対処法についてまとめました。

かなり雑な実装をしていますし、自分の備忘録としての意味合いが強いですので、その点ご了承ください。

やり方

UnityでWebGL形式で書き出す際のテンプレートをカスタマイズすることで実現します。

まずUnityのインストールフォルダを開き、以下の階層まで潜ります。

Unity\バージョン名\Editor\Data\PlaybackEngines\WebGLSupport\BuildTools\WebGLTemplates

その中のDefaultフォルダを好きな場所にコピーします。
このフォルダの中に、デフォルトのWebGLテンプレートが入っているので、ここを改造していきます。

次に、TemplateData内のStyle.cssを好きなエディタで開きます。

Style.css内の先頭4行を削除して、以下のようにします。

Style.css

# unity-canvas { background: {{{ BACKGROUND_COLOR }}} }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
# unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
# unity-logo { width: 154px; height: 130px; background: url('unity-logo-{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}.png') no-repeat center }
# unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}.png') no-repeat center }
# unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-{{{ SPLASH_SCREEN_STYLE.toLowerCase() }}}.png') no-repeat center }
# unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
# unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
# unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
# unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
# unity-mobile-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

次に、必要な項目を追加します。
どこでもいいので以下のコードを追加します。（分からなければ、最後の行を改行してその下に追加してください。）

Style.css

html,body,div { margin: 0; padding: 0; width: 100%; height: 100%;}
canvas { margin: 0 0 0 0; position: absolute; z-index: 9; width: 100%; height: 100%;}

以上でStyle.cssの書き換えは終了です。

次に、Defaultフォルダとは別に新規フォルダを作り、名前をTemplateDataとします。その中にDefaultフォルダを入れて、Defaultフォルダの名前を好きな名前に変更します。ここではCustomに変更しました。

変更したら、フォルダごとUnityのProjectタブにドラッグアンドドロップします。

最後に、Unityでの操作です。
File>BuildSettings内の、左下PlayerSettingsを選びます。

Resolution and Presentation 内の、WebGLTemplateから、自分で決めた名前のテンプレート（ここではCustom）を選びます。

これにて設定は完了です！
PlayerSettingを閉じて、ビルドしてみてください！