【Unity】RPGを作るチュートリアルその125 WebGLのビルドとApacheの構成

シンプルなRPGをUnityで作るチュートリアルシリーズの125回目です。

第124回ではWebGLの検証のため、DockerとApacheを使ってWebサーバを準備して、ローカルの検証環境を作成しました。

今回はWebGLのビルドとApacheの構成を行います。

制作環境

MacBook Pro 2023 Apple M2 Max

Unity6 (6000.0.30f1) Silicon

作業内容と順序

シンプルなRPGを作る上でどんな作業が必要か、どんな順番で作っていくと良さそうか、別ページで検討しました。基本的にこの流れに沿って進めていきます。

エクスプラボ

【Unity】簡単なRPGを作る場合に必要な作業を考えてみよう

https://ekulabo.com/simple-rpg-ready

UnityでRPGを作るときに必要になるであろう作業をリストアップしてみました。抜け漏れがない形ではなく、さっと思いついた部分をまとめているので、実際に作業してみて追加を行う部分もあるかもしれません。

エクスプラボ

UnityでRPGを作る時にスムーズにいきそうな作業順序を考えてみる

https://ekulabo.com/unity-rpg-work-flow

シンプルなRPGを作ることを想定して、スムーズに進みそうな作業順序を考えてみました。個人個人でやりやすい進め方も異なるかと思いますので、ひとつのサンプルとして捉えていただければと思います。

チュートリアルの一覧

このシリーズ全体の一覧は以下のページにまとめています。

エクスプラボ

 

1 User

1 Pocket

【Unity】シンプルなRPGを作るチュートリアルの一覧まとめ

https://ekulabo.com/rpg-tutorial-list

UnityでシンプルなRPGを作るチュートリアルシリーズのまとめページです。もし個別のページからご覧いただいた場合は、こちらのまとめページもご参照ください。

前回の内容

前回はWebGLの検証のため、DockerとApacheを使ってWebサーバを準備して、ローカルの検証環境を作成しました。

エクスプラボ

【Unity】RPGを作るチュートリアルその124 DockerとApacheでローカルの検証環境を作成

https://ekulabo.com/rpg-tutorial-docker

UnityでシンプルなRPGを作るチュートリアルシリーズの第124回です。この回ではWebGLの検証のため、DockerとApacheを使ってWebサーバを準備して、ローカルの検証環境を作成します。こうした検証環境を用意しておくと、WebGLの確認だったり、Addressablesのダウンロードの確認などがしやすくなります。

WebGLのビルド

WebGLのビルドを確認できる検証環境を作成できたので、UnityからWebGL用にビルドしていきましょう。リリースを想定して圧縮設定なども入れていきたいと思います。

圧縮設定によってはWebサーバ側で設定ファイルに書かないといけないものもあるので、そちらも対応していきます。

WebGLのモジュールを追加

今使っているUnityのバージョンにてWebGLのビルドモジュールをインストールしていない場合は、このタイミングでしておきたいと思います。画面上部のメニューバーから [File] -> [Build Profiles] を選択して、「Build Profiles」の画面から「Web」を選択することでインストール用のボタンが表示されるので、[Install with Unity Hub] をクリックします。Unity Hubから直接インストールしてもOKです。

プラットフォームの切り替え

WebGLのモジュールをインストールしてUnityのエディタを再起動すると、左側のプラットフォーム一覧でWebGLが白文字で表示され、選択すると [Switch Platform] のボタンが押せるようになるのでこちらをクリックします。多少時間がかかるのでゆっくり待ちましょう。

ビルドの圧縮設定

ビルドを行う前に、Build Profileのウィンドウ上部にある [Player Settings] のボタンをクリックして「Player Settings」を表示します。このウィンドウでは、「Resolution and Presentation」の項目内で「Default Canvas Width」の値を [960] に、「Default Canvas Height」の値を [540] に設定します。

また、「Publishing Settings」にある「Compression Format」の値を [Gzip] に変更します。

Gzipは全てのブラウザが対応しているのでこちらを選択しました。Brotliは圧縮率が高いのですが、サポートされていないブラウザがあるので、ユーザ側の環境を指定できない時にはGzipが無難かもしれません。

詳細については、マニュアルもご参照ください。

docs.unity3d.com

Unity - Manual: Deploy a Web application

https://docs.unity3d.com/6000.0/Documentation/Manual/webgl-deploying.html

WebGL向けビルド

他のPlayer Settingsについては一旦置いておいて、ビルドを進めていきたいと思います。Build Profilesのウィンドウに戻って、「Platform Settings」にある「Development Build」のチェックを [false] に、「Code Optimization」を [Shorter Build Time] にして、ビルドを行います。本番用ビルドを行う時には「Code Optimization」を「Runtime Speed」に変更すると良いかと思います。

「Build」のプルダウンから「Clean Build…」を選択し、任意のパスにビルドしましょう。私の環境ではmac向けビルドより長い時間がかかっていたので、気長に待つと良さそうです。貴重な休憩タイムです。「Shorter Build Time」では約4分、「Runtime Speed」では約27分でした。

ビルドしたファイルの配置

WebGL向けにプレイヤーをビルドしたら、Dockerで作成したWebサーバのコンテナに配置しましょう。

まずは配置先のフォルダがどこにあるのか確認しておきます。Docker Desktopから前回作成したコンテナを起動した後、三点アイコンからメニューを表示して [View files] を選択し、ファイルツリーを確認します。

Apacheの設定ファイルを確認して、ドキュメントルートがどこになっているかを把握します。ドキュメントルートはWebサーバが外部に公開するディレクトリの起点で、このディレクトリ以下にファイルを配置することでブラウザから表示できるようになります。

設定ファイルの場所は「/usr/local/apache2/conf」のディレクトリです。ここにある「httpd.conf」を右クリックして、「Edit File」からファイルの編集ウィンドウを表示します。

編集ウィンドウではcommand+F(WindowsはCtrl+F)で検索バーを開き、「DocumentRoot」と検索します。公式イメージだと「/usr/local/apache2/htdocs」がドキュメントルートになっているようです。

ドキュメントルートに書かれているパスをファイルツリーで見てみると、「index.html」が配置されています。中身は前回確認した「It works!」となっているので、このディレクトリ(フォルダ)にファイルを配置すればよさそうです。

ファイルの配置はターミナルでcpコマンドを使うなど色々な方法がありますが、今回はこのままGUIで進めていきます。「htdocs」のディレクトリを選択して右クリックし、[Import] を選択します。

ファイルの選択ダイアログが表示されるので、Unityから書き出したWebGLのフォルダを選択しましょう。私は「SimpleRpg」という名前で書き出したので、このディレクトリ(フォルダ)を選択しました。

選択したディレクトリが「htdocs」の下にインポートされました。

WebGLのプレイヤー自体は現時点では動作しませんが、ブラウザからアクセスできることを確認しておきましょう。任意のブラウザを使って、「http://localhost:8080/SimpleRpg/」にアクセスします。「8080」の部分はコンテナ作成時に指定したポート番号、「SimpleRpg」の部分はUnityから書き出したフォルダの名前にしましょう。

以下のように表示されればOKです。赤く目立つエラー表示については、この後の設定ファイルの編集で消えます。

Apacheの設定ファイルを変更

上のエラーメッセージを見ると、Unity側ではGzipを使って圧縮していますが、Webサーバ側でこの圧縮形式を使うようになっていないため、解凍できずにいます。そのため、Apacheの設定ファイルを変更していきます。

設定ファイルは先ほどドキュメントルートの確認に使用した「/usr/local/apache2/conf」のディレクトリにある「httpd.conf」です。Unityのマニュアルには、Apacheを使用する場合にどんな記載を行うべきかが書かれているので、こちらを参考に記載していきます。

docs.unity3d.com

Unity - Manual: Set up your Apache server configuration for Web builds

https://docs.unity3d.com/6000.0/Documentation/Manual/web-server-config-apache.html

今回はローカルの検証環境で「httpd.conf」を編集できるため、「httpd.conf」用のサンプルを参考に以下のように追記しました。設定ファイルの中身を確認した時と同様に、右クリックのメニューから「Edit file」を選択し、ファイル編集ウィンドウを表示して追記します。

サーバをレンタルする場合など、権限の問題で「httpd.conf」を変更できないことがあるので、その場合は「.htaccess」のファイルを変更します。

「httpd.conf」の末尾に上記の内容を追記します。<Directory>で指定しているパスは、WebGLのビルドを配置した場所に書き換えてください。「# Insert additional code here」の項目では、Unityのマニュアルに記載されているパフォーマンス向上の項目を追加しています。

ファイルを保存したら、画面右上にあるリスタートボタン(くるくるアイコン)をクリックしてコンテナを再起動します。実環境だとマシンは止めずApacheのデーモンを再起動するだけでいいのですが、今回は検証環境なのでお手軽にいきます。

コンテナの再起動後はブラウザからWebGLのビルドを配置したURL(私の環境だとhttp://localhost:8080/SimpleRpg/)にアクセスします。キャッシュが残っている可能性があるので、削除してからアクセスしましょう。私はキャッシュを消せていないことに気付かず何度もchromeでスーパーリロードして「設定は合っているはずなのに……」と悩みました(1敗)

Apache側の設定の問題か、キャッシュの問題か、切り分ける際にはシークレットモードでキャッシュを確認しない形でアクセスして動くかどうかをチェックしてみましょう。

ひとまずブラウザ上で動くようになったので、動作を確認していきましょう。一通り動くようにはなっていましたが、いくつか気になる点もありました。

• メニュー画面で魔法を使った時の効果音がない
• メニュー画面で最後の1つのアイテムを使うとエラーで止まる
• ブラウザをリロードするとセーブが消える

これらについては次回以降に対応していきます。特にセーブが消える方は影響がでかいですね(白目)

今回のブランチ

今回はゲームのプロジェクト内の変更はありません。

まとめ

今回はWebGLのビルドとApacheの構成を行いました。ApacheやNginXなどの主要なWebサーバに関してはUnityのマニュアルに設定内容が書かれているのでありがたいですね。

次回はWebGLでセーブが保存されない点など、確認できたバグを修正します。