Unityで作ったブラウザゲームをブログで公開する

前回Unityで簡単なブラウザゲームを作った。
それをブログで公開する。

前回↓

Unityで2Dブラウザゲームを作ってブログで公開するまで1時間(1/2 作成)

Unityでブラウザゲームを作るUnityでゲームを作りたい。テストとして必要最低限のゲームを作ってブログに貼る。必要最低限のゲームなのでだいたい1時間くらいで…

1. 公開方法2つ
- 1.1. ゲームだけのページを作る
- 1.2. 既存のページに差し込む
2. エラー対処

1. 公開方法2つ

公開方法は2つに分けられる。

ゲームだけのページを作る
既存のページに差し込む

ゲームだけのページを作る方が簡単。
既存のページに差し込むのは少し手間がかかる。

1.1. ゲームだけのページを作る

こんな感じのページを作る↓

作るというかUnityが出力してくれるのでそれを自分のWebサイトに置くだけ。

使用ファイル準備

前回の記事の(2.8. ゲーム出力)で出力されたフォルダは以下のような構成になっている。

配置

中のフォルダ3つとindex.htmlをそのままWebサイトに置く。
それだけ。

環境によって色々エラーが起こるので下にまとめる。

1.2. 既存のページに差し込む

こんな感じでいろんな要素のあるページの中にゲームを追加する。

さっきの単体ページと同様にUnityが出力してくれたWebGLファイルを使う。

使用ファイル準備

前回の記事の(2.8. ゲーム出力)で出力されたフォルダは以下のような構成になっている。
このうち上記の3つのフォルダだけを使用する。

ゲームを貼りたいページのhtmlファイルと同じフォルダに上記の3フォルダを置く。

ゲーム要素貼り付け

その後、htmlファイル内のゲームを貼りたい場所に上記のindex.htmlからbodyタグの中身をすべてコピー。
CSSも反映させたい場合はheadタグの<link rel="stylesheet" href="TemplateData/style.css">もコピー。

レスポンシブデザイン対応

レスポンシブデザインに対応させたい場合は下記のように修正。
これによって親要素のサイズに合わせてゲーム画面の大きさが変化する。

1 2	canvas.style.width = "100%"; // 960 to 100% canvas.style.height = "auto"; // 600 to auto

こちらも環境によって色々エラーが起こるので下にまとめる。

2. エラー対処

いろいろエラーが起きる。

ローカル実行

1
2

Unable to parse Build/webgl.framework.js.br!
If using custom web server, verify that web server is sending .br files with HTTP Response Header "Content-Encoding: br". Brotli compression may not be supported over HTTP connections. Migrate your server to use HTTPS.

ローカルで実験しようとすると上記のようなエラーが起きる。
サーバ経由じゃないと実行してくれない。

HTTP実行

1
2

Unable to parse Build/webgl.framework.js.br!
If using custom web server, verify that web server is sending .br files with HTTP Response Header "Content-Encoding: br". Brotli compression may not be supported over HTTP connections. Migrate your server to use HTTPS.

サーバを立ててもHTTPだと上記のようなエラーが起きる。
HTTPSで配信する必要がある。

gzip圧縮

Unable to parse Build/webgl.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: br" present. 
Check browser Console and Devtools Network tab to debug.

サーバの設定で送信ファイルをgzip圧縮してるとこうなる。
特定の拡張子のファイルを送るときだけgzip圧縮をオフにするように設定できるのでそうする。
下記を参考にすると良い。

Unity公式のNginx, Apache, IIS用サンプルコード↓

https://docs.unity3d.com/2020.3/Documentation/Manual/webgl-server-configuration-code-samples.html?_ga=2.247960903.137831408.1636251909-414474484.1522645345