Menu

WebGL版をリリースする際の設定に関して

WebGLの環境の構築も行い、動作確認の方法もわかったところで、

WebGL版でリリースする際に設定しておくべき箇所をまとめるよ😉👍

 

PlayerSettingsの設定

メニューからEdit -> Project Settings -> Player または

メニューのFile -> Build Settings で開かれるウィンドウ下部の Player Settings… から

Player Settings を Inspector 上で開く😧👆

 

既にアプリケーションのリリース作業を行っている場合は見慣れた画面だ。

←のアイコンがWebGL版のサポートアイコンになる

正確にはWebGLではなくHTML5の「5」のアイコンだけれども・・・😨

 

Resolution and Presentation

解像度設定と、リリース時のテンプレート形式の設定を行う項目だ。

Resolution

Resolutionはデフォルトで設定する画面解像度と考えておくとよい。

しかしこれは後からウィンドウサイズを可変にする仕込みを行うことも可能なので
あくまでデフォルトサイズという認識で問題ないぞ😔✋

Run In Background

Run In Background はゲーム画面が非アクティブになった場合も動作させ続けるかの設定だ。

チェックを入れていた方が利便性があるように思えるが、設定する場合に気を付けたい点がある。

ブラウザで起動する都合上、ブラウザの仕様でバックグラウンド時の更新が1秒置きとなってしまうことだ。

これによりゲーム中で時間計測を行う仕組みを実装している場合、
正しい時間を取得することができなくなってしまう😟💦

長時間放置スタイルのゲームであれば問題はないが、そうでない場合はしかるべき対応をしておきたい。
(例えばバックグラウンドに回ったらメニュー画面を起動させて一時停止させるなど)

WebGL Template

WebGL Templateは、ビルドした際にHTML5スタイルとして出力される
実際にプレイする環境の画面設定だ。初期状態では2つの選択ができる🐶🐱

DefaultではWebGLを示すロゴとゲームタイトル、
フルスクリーン化ボタンを備えた基本的なスタイル。

Minimalはゲーム画面のみを表示するようにした最小限なスタイル。

用途に応じて使い分けたいところだ。

ちなみにDefaultに置かれているフルスクリーンボタンはデフォルト解像度など無視して
画面サイズでフルスクリーン化されるので、デスクトップ環境で縦画面のUIを想定する場合は
殆どのディスプレイ環境で横長になってしまうので、何かしらの対策が必要である🚧✊😠

フルスクリーン化ボタンが不要だったり、専用の追加機能をHTML5内に追加したい場合は、
ここで独自のWebGL Templeteを追加することが可能だ。
この点に関しては別記事でまとめようとおもう。

 

Icon

WebGL環境はブラウザリンクで飛ぶので、アイコンは存在しない。
Faviconを設定したいという話であればWebGL Template側で設定が可能なのでそちらで行おう😁👆

Splash Image

特に他のプラットフォームとの違いはないので割愛する😎

 

Other Settings

ここでは大体他の環境と変わらない設定が多いが、一応ピックアップしておくのは以下。

Optimization -> Strip Engine Code

コードのストリッピングを有効にするオプションだ。
オンにしておけばUnity Engineで使用されないモジュールやクラスは削除される。

容量に特に厳しい縛りがあるWebGL環境では必ずオンにしたい💪😤

Logging

デバッグ出力の設定。当然だがリリース時はすべてNoneにしておこう。

 

Publishing Settings

こちらではWebGL出力する際の設定が出来る。

WebGL Memory Size

コンテンツがヒープに対して割り当てるメモリーの大きさを指定出来る📏

この値が小さすぎるとデータ読み込み等のタイミングでメモリ不足エラーが起きやすくなり、
逆に大きすぎるとこのサイズをブラウザやマシン側で割り当てられない場合起動が出来なくなるぞ😰

予め使用するメモリ量を規定できるということなので、推奨環境の基準として明記できる。

Enable Exceptions

例外処理の許可設定だ。
リリースする時は当然Noneにする。でないとデータサイズが肥大化してしまう。

ただデバッグテスト時はFullかExpilicity Thrown Exceptions Onlyにしておくと、
問題が発生して引っかかったときの原因特定が行いやすい。

コンパイラ連携のデバッグが行いにくいWebGL環境ではtry-catchがとても有効に働くぞ😄🙌

Compression Format

パッケージングするデータの圧縮形式の指定だ。

  • Gzip
    全てのブラウザで対応している圧縮形式。
    高速で圧縮できる。
  • Brotli
    圧縮率はGzipよりも非常に高いが、圧縮の時間が長い。
    ネイティブ対応しているのはChromeとFirefoxのみ。
  • Disabled
    自前でデータ圧縮形式を用意する場合に使う。
    圧縮せずにアップロードするなどといったことはないと思うが・・・。

サポートしているブラウザを考えると、基本的にはGzipでよさそうだが、
どうしても容量を削減したい場合はBrotliを利用することになるか。

Data Caching

コンテンツを起動した際に、自動的にユーザーのマシンにキャッシュする機能の設定。
設定しておけばユーザーは以降の実行で再ダウンロードが行われないようになる。

デバッグ中に未検証だがごく稀にROM状態が更新されないことがあった。
もしかしたらこの機能が影響している可能性もあるので、デバッグ中は切るほうがよいかもしれない🤔

 

スポンサーリンク[pc-mieru][/pc-mieru][sp-mieru][/sp-mieru]

テクスチャスプライトの設定

テクスチャスプライトに関しても別途設定が必要だ🗻
少しでも起動時にかかる時間を抑えるためには軽量化は必須項目である。

 

UnityのProject上で利用している、任意のスプライトデータを選択しよう。
Import SettingsがInspector上で開かれるので、一番下の項目に上記のように設定可能な項目がある。

アイコンを選択し、Override for WebGLのチェックボックスをオンにしよう。
この設定を入れておけばWebGL中はここで設定した形式でテクスチャがコンバートされる。

Max Size

MaxSizeは見た目に大きな問題がでないほど可能な限り下げたい。
今回は2048->1024に一括で変えているが、余裕があれば臨機応変に設定しよう😔✋

Format

通常はRGBA Compressed DXT5を選択する。
アルファ情報が不要であればRGB Compressed DXT1でも問題はない。

他の形式は基本的にはWebGLでは考えないことになるだろう。
圧縮形式の詳細な違いについて確認したい場合は以下のリンク先へ行って確認だ🚗🚕🚙

[Unity | Documantation] プラットフォーム固有のオーバーライド用のテクスチャ圧縮形式

Use Crunch Compression & Conpressor Quality

Use Crunch Compressionチェックボックスは、FormatでCompressed系を選択した場合に出現する。

クランチ圧縮とはDXTテクスチャ圧縮に加えて行えるディスク領域を最小限に抑えることが出来る設定で、
圧縮には時間がかかるが展開は高速な設定だ。
基本的にはこれにチェックを入れることをすればWebGL版としての設定は十分だ。

Conpressor Qualityは圧縮率の設定で品質が高いほど圧縮にかかる時間が大きくなる。

 

Quality Settings

最後にこちらも設定しておこう🛠

Edit -> Project Settings -> Quality
からQuality Settingsを開こう。

こちらの環境ではアプリ専用の設定データを作成し、
他プラットフォームではそれを採用している。

が、公式では最高のパフォーマンスはFastestにすること、としている。
実際WebGLで表現できる範囲も限られてくるので、問題がなければ別途設定しよう。

の項目ではFastest以外のチェックを外した。
更に下部のDefaultを右クリックするとメニューが出てくるので、そこからFastestを選び
初期状態からこの環境では常にFastestとなるようにした😉☝

3Dゲームで一定水準のクオリティを担保したい場合は独自で妥協点を探りだしてほしい。

 

🐧 🐧 🐧 🐧 🐧

 

以上が今回WebGL版をリリースする際に行った設定情報の全容だ。

しかしこれでも全体容量22MBだ。
Android版は40.4MBではあるのでおよそ半分近くはあるが、
ブラウザ上で動作させる以上軽ければ軽いほど良い〽

データ関連はもっとスリムにできる可能性もあるし、
アセットバンドル化して管理することで更なる効率化も計れるだろう。

 

ダイエットは継続してこそ意味があるんだ。
開発に熱中しすぎて忘れたころには悲しみのリバウンドが待っているぞ😇✨

 

ではまた👋😇💨

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です