もくじ
WebGLアプリをビルドする
本ページでは簡単にWebGLアプリのビルド手順を見ていきたいと思います。UnityでWebGLアプリをビルドし出力するにはWebGLのモジュールがセットアップされている必要があります。セットアップされているかどうかはウィンドウメニューの「File > Build Settings...」からBuild Settingsウィンドウを開き、確認することができます。
Build SettingsウィンドウのPlatformリストからWebGLを選択し、下記スクリーンショットのような表示になっていればOKです。もし「No WebGL module loaded. Install with Unity Hub」等の表示があれば、Unity HubからWebGL用のモジュールを追加する必要があります。
WebGLのモジュールが設定済みであれば、「Switch Platform」ボタンをクリックしてビルドするプラットフォームをWebGLに切り替えます。( 6.1)
Build Settingsウィンドウの「Scenes In Build」にこれまでに作成したGame Sceneを追加します。「Add Open Scenes」で今編集しているGame Sceneを追加できます。もし必要のないGame Sceneが含まれていれば、該当のGame Sceneを選択し、「Delete」キーで削除します。必要なGame Sceneが追加できましたら、「Player Settings...」ボタンをクリックし、Player Settingsウィンドウを開きます。( 6.2)
6.1 Switch Platform - Build Settings
6.2 Add Scene - Build Settings
左側メニューより「Player > WebGL Settings > Resolution and Presentation」を選択し、Resolutionの入力欄にWebGLで出力するCanvasの横と縦のサイズを入力します。今回はゲームのアスペクト比に合わせてWidthを「800」、Heightを「500」としました。( 6.3)
Publishing SettingsのCompression Formatを「Disabled」にします。( 6.4)
6.3 Resolution - Player Settings
6.4 Compression Format - Player Settings
Player設定を済ませたら、Build Settingsウィンドウに戻り、「Build」ボタンをクリックし、Buildプロセスを開始します。
Buildが完了するとプロジェクトフォルダにWebGL関連のファイルが作成されます。ちなみにBuildが完了するまで10分程度かかりました。Buildが完了すると自動で出力先のフォルダが開くと思います。作成されるのはフォルダが3つとindex.htmlがひとつです。( 6.5)
簡易サーバでテストする
簡易サーバ等を利用してビルドしたWebGLアプリのテストを実施します。僕はAtomのLive Server機能を使ってローカルでテストしました。
出力されたフォルダとファイルすべてを利用する簡易サーバの設定に従って指定されたディレクトリへコピーしてから、Chrome等のウェブブラウザでアクセスしてテストします。ちょっと想定と異なる表示結果になりました。背景イメージが縮小されて全体的に小さく見えています。( 6.6)
6.5 WebGL Output Files
6.6 WebGL First Test
Unity EditorのGame Viewと比較すると画面の見た目がだいぶ違うことがわかります。( 6.7)
この後、Canvasのサイズを調整したり、WebGLの出力サイズを変えたりしたのですが、サイズ設定を調整するだけではうまく合わせることができませんでした。特に背景イメージがCanvasのサイズに対して小さく表示されていたので、背景のSpriteを枠部分を拡張して大きくしたイメージに差し替えてみました。( 6.8)
6.7 Game View - Unity Editor
6.8 Scene View - Unity Editor
根本的な解決にはならないのですが、意図した見え方になったと思います。ただし相変わらずGame Viewで見える範囲よりは全体的に縮小されて表示されています。この辺りはUnity側の処理の癖だと思うのですが、Unity EditorでのGame Viewの表示結果とビルドして出力したWebGLの画面の違いを実際に見ながら調整する必要があると思います。( 6.9)
6.9 WebGL Second Test
次のページに今回出力したWebGLアプリのデモを掲載します。