UnityのWebGLビルドをWeb上にパブリッシュしてテストする

1. Home
2. Unity Tips

もくじ

• はじめに
• Unity WebGLでビルドする
• Webブラウザでテストする
  • WebGLの圧縮形式によるエラー
  • Content-Typeの警告メッセージ
  • モバイル機でのWebGL実行テスト
• さいごに

はじめに

前回の記事、「 「ゲーム開発入門」ゲーム・プロトタイプの作り方(4/4)」ではUnity Playへゲームをパブリッシュし、Web上に公開する方法を試してみました。この方法は無料かつ手軽に自分のゲームをWeb上に公開できて便利ではありますが、自分のウェブサイトのようにUnity PlayのWebページを自由に編集することはできません。

WebGLビルドをWebにアップロードしゲームを公開する方法は収益性という面ではあまり効果的ではないかもしれませんが、自作のゲームをユーザに最も早く提供できる方法だと思います。AppleやGoogleのモバイルアプリをストアで公開するには審査などにとても時間がかかりますが、WebGLの場合、Web公開可能なサーバさえあればすぐにゲームを公開できます。何かしらのフィードバックやレスポンスを早く得たいという場合には有用でしょう。

今回、Unity WebGLでビルドしたゲームをローカルのサーバ環境や自前のサーバ環境でうまく実行できるか試してみました。うまくいけば、自分のウェブサイトで自由にゲームを紹介できるようになります。

今回テストした環境とUnityバージョンは以下の通りです。

• Atomのローカルテスト環境
  

  Atomに標準ではHTTPサーバ機能はないですが、atom-live-serverというパッケージをインストールすると、ローカルで簡易的なHTTPサーバ環境が使えるようになり、作成したWebページの表示テストが可能になります。似たような機能のパッケージは他にもいくつかありますが、htmlファイルを更新すると自動でブラウザが更新されるライブ表示機能など私にはこのパッケージが一番使いやすいです。( 1.1)

  1.1 Atom Editor - atom-live-server

• AWS S3
  

  S3はAWSのストレージサービスですが、設定次第で静的ページをWeb上に公開することが可能です。今回、このS3のストレージ領域にWebGLのビルドファイルを保存して実行できるかどうか試してみました。

• GitHub Pages
  

  GitHub PagesでもUnityのWebGLビルドを実行できます。GitHub Pagesで公開する方法は別途まとめたいと思います。本記事では実行結果のみ記載しています。

• Unityバージョン：2021.1.14f1

Unity WebGLでビルドする

UnityでWebGLビルドするための手順は「 「ゲーム開発入門」ゲーム・プロトタイプの作り方(4/4)」を参照して下さい。

また、各サーバ環境へのデプロイや設定については、ここでは深く取り上げませんが、基本的にはUnityでビルドして生成したファイル(index.html)とフォルダ一式(Build、TemplateData)をそれぞれ公開したいディレクトリにそのまま保存すればOKです。

Webブラウザでテストする

とりあえずテストは簡単です。WebGLビルドで生成したフォルダを保存したディレクトリのURLをWebブラウザで表示させて実行させるだけです。

WebGLの圧縮形式によるエラー

最初のテストではいずれの環境でも下記のようなエラーが出てゲームが実行できませんでした。( 1.2)

Unable to parse Build/WebGL gzip.framework.js.gz! This can happen if build compression was enabled but web server hosting the content was misconfigured to not serve the file with HTTP Response Header "Content-Encoding: gzip" present. Check browser Console and Devtools Network tab to debug.

このエラーの回避方法としては、Unityの以下の設定を「Gzip」から「Disabled」に変更します。この変更による影響としては圧縮設定を無効にするのでビルドファイルのサイズが大きくなってしまうことです。( 1.3)

Edit → Project Settings → Player → Publishing Settings → Compression Format

エラーの原因としてはデフォルトの圧縮形式でビルドした場合の圧縮ファイルとサーバ側の問題だと思うのですが、簡単に調べた感じでは根本的な解決方法を見つけられませんでした。とりあえず圧縮設定を無効にすれば、ゲーム実行可能であることは確認できました。エラーが発生しないとはいえ、ユーザ側ではダウンロードファイルの容量が大きくなってしまうので、本格的に公開・運営するのであれば、サーバ側の設定をより柔軟に行えるEC2などクラウドサーバを使った方が良いかもしれません。

Content-Typeの警告メッセージ

上記のエラーを回避したところ、次にContent-Typeの警告が出るようになりました。Atomのローカル環境では気にしませんが、AWS環境で出てしまうのはあまり宜しくないので解決方法を探してみました。ちなみにGitHub Pagesではこのような警告メッセージは表示されませんでした。( 1.4)

HTTP Response Header "Content-Type" configured incorrectly on the server for file Build/WebGL Builds.wasm , should be "application/wasm". Startup time performance will suffer.

原因としては.wasmファイルのContent-Typeが適切でないということなのでそれを修正します。AWSではCLIでもContent-Typeを変更することができますが、手っ取り早くAWSのManagement Consoleを使って修正しました。

該当の.wasmファイルのEdit metadataの編集ページでMetadataを以下のパラメータに従い修正(追加)します。パラメータの修正が完了したら、「Edit metadata」ボタンをクリックし変更を確定させます。( 1.5)

• Type: System defined
• Key: Content-Type
• Value: application/wasm

モバイル機でのWebGL実行テスト

モバイルのブラウザ上でも実行できるか試してみたところ、警告メッセージのようなものが表示されましたが、一応問題なく実行できました。ただ、何度か再読み込みして実行しようとするとエラーが表示されて実行不可能なときもあるのでモバイルでの実行はまだ検証段階だと思われます。( 1.6)

WebGL builds are not supported on mobile devices.

1.6 Running WebGL on Mobile

さいごに

WebGLビルドしたゲームを下記URLで公開しているので参考にして下さい。WebGLビルドでUnityが出力するindex.htmlの中身を自分のページに組み込むには色々やり方はあると思いますが、アップデート作業をあまり複雑にしたくないので、iframeタグで生のindex.htmlを読み込むようにしました。

Space Flying Game

ちなみに今回の話題とは少し話がそれますが、WebGLビルドを利用してWeb上に公開できるウェブサービスとして以下のようなものがあります。

• Unity Play
  Unityだけで手軽に試せるが、機能としてはとてもシンプル。アップロードしたゲームを共有することに特化したサービスでUnityのアカウントIDが必要。
• unityroom
  日本語のサービスでフリーゲームの共有サービスの運営サイト。定期的にゲームコンテストを実施している。
• itch.io
  海外のインディーゲーム販売サイトだが、WebGLビルドのゲームの公開が可能。