unityroomみたいなやつを自分のサイトで作りたい！
UnityでWebGLビルドしたゲームを、ブラウザで公開する場合、主に以下の方法があります。
1.unityroomやPlicyやUnity Playなどのゲーム公開サイトからゲームをアップロードし、公開
2.GitHub Pagesでゲームを公開
3.自分のWebページでゲームを公開
1の方法はカンタンにゲームをアップロード・公開できる反面、ゲームを配置しているWebページの編集はできません。たとえば、起動前のロード画面を編集することはできませんし、ゲームを配置しているWebページをイジることもできません。
2のGitHubPagesの方法の場合、HTML/CSSを編集できるものの、URLはGitHubドメインになりますし、gzip圧縮したビルドデータで公開するにはちょっと難しそうでした。
この記事では、冒頭にあるように、自分のWEBページに、WebGLビルドしたゲームを埋め込んでみたので、そのやり方を共有します。
★作ったもの
(1)WebGLビルドしたゲーム(gzip形式)
(2)(1)を埋め込んだ自作Webページ(このページ)
(3)ビルドファイルのアップローダー(次回解説)
★前提知識
・HTML初歩的な知識
★試したWebサイトの環境
・WordPress(このサイトもWordPress製です)
・ConoHa Wingのレンタルサーバー
※他のレンタルサーバーでも恐らく似たようなことは出来るとは思います。
今回紹介する方法は、.htaccessを編集する必要があるので、.htaccessを編集出来ないレンタルサーバーの場合今回の方法は使えないかもしれません。軽く調べた限り、Wixだと編集出来ないみたいです。
gzip形式のゲームを自分のWebサイトに埋め込む手順
手順①：gzip形式でWebGL用にビルドする
まずは、Unity側のビルドの設定です。unityroomと同じgzip形式で圧縮してビルドします。
具体的な方法は以下のページで解説しているのでご確認ください。
手順②：ゲーム公開用のパスを作る
次に、ゲーム公開用のパスを作ります。
ConoHa Wingの場合、ファイルマネージャーからパスを追加できるので、ルートの配下にフォルダを作りました。
このtestplayroomというURLを、ゲームを公開するパスにします。
手順③：ビルドデータをサーバーにアップロード
これも使用されているサーバーによると思うのですが、ConoHa Wingの場合、ファイルマネージャーからアップロードができました。ファイルマネージャー機能がないサーバーの場合、FFFTPなどのソフトを使うとできると思います。
アップロードする対象は、UnityでWEBGLビルドすると出来上がる以下のファイルたちです。
・index.html
・TemplateDataフォルダ
・Buildフォルダ配下の以下のファイル達
→xxxx.data.gz / xxxx.framework.js.gz / xxxx.loader.js / xxxx.wasm.gz
index.htmlを編集すれば、アップロードしたWebページの見た目やテキスト、ボタンなどの機能を編集出来ます。
ビルドファイルのパスは、Rootフォルダ以下を下記の構成にしています。
TemplateData内の画像データを差し替えればロード中の画像や、ローディングバーの表記も変えられます。
testplayroom/
├── Build/
│ ├── loader.js
│ ├── data.gz
│ ├── framework.js.gz
│ ├── wasm.gs
├── TemplateData/
├── index.html留意事項
Webブラウザゲームの避けられないことなのですが、基本的にブラウザ側がロードが出来るデータは、誰でも取得が出来る状態になります。
つまり、Webにゲームを公開するということは、ビルドファイルを他人が取得出来るようになる、ということです。公開前のゲームや秘匿性の高いゲームでは、十分に注意をするようにしましょう。
手順④：.htaccessの編集
最後に、サーバーにある、.htaccessを編集します。
これは何のファイルかというと、Webサーバーの動作をディレクトリ単位で制御できるファイルのことです。
このファイルの在処は、ご使用のサーバーのヘルプページを見ていただくのがよいと思います。
今回使用しているConoHa Wingというレンタルサーバーでは、Conohaコントロールパネルから.htaccessが編集が出来ました。
.htaccessに設定する値は以下の通りです。
<IfModule mod_mime.c>
AddEncoding gzip .gz
AddType application/javascript .js.gz
AddType application/wasm .wasm.gz
AddType application/octet-stream .data.gz
</IfModule>
<IfModule mod_headers.c>
<FilesMatch ".js.gz$">
Header set Content-Type application/javascript
Header set Content-Encoding gzip
Header set Cache-Control "public, max-age=31536000"
</FilesMatch>
<FilesMatch ".wasm.gz$">
Header set Content-Type application/wasm
Header set Content-Encoding gzip
Header set Cache-Control "public, max-age=31536000"
</FilesMatch>
<FilesMatch ".data.gz$">
Header set Content-Type application/octet-stream
Header set Content-Encoding gzip
Header set Cache-Control "public, max-age=31536000"
</FilesMatch>
</IfModule>
これは、.gzのファイルをgzip形式として認識してちゃんと処理してね、とブラウザに知らせるためのオマジナイです。
このオマジナイがないと、gz形式のファイルを読み込んでくれません。
手順⑤：アップロードしたゲームをプレイしてみる
ココまで出来てればゲームが遊べるようになっているはずです。
先ほどアップロードしたindex.htmlがあるページに飛んでみましょう！
私の場合は、以下のパスにアップロードしたので、
public_html > yurinchi2525.com > handon > testplayroomアップロードしたゲームが遊べるURLは以下のようになります。
https://yurinchi2525.com/handon/testplayroom
また、index.htmlも、Unityが吐き出すデフォルトファイルをちょっぴり編集し、Unityのロゴなどを削除しています。
（HTMLコードブロック省略）手順⑥：ゲームを配置したURLを埋め込んでみる
最後に、先程の手順で作ったアップロードしたゲームを、別のページに埋め込んでみましょう。
このページの冒頭では、HTMLの<iframe>タグを使って、手順⑤でアップロードしたページを埋め込んでいます。
このサイトでの埋め込みのHTMLは以下のとおりですが、高さ・幅の数値は各サイトで最適な値に合わせていただくのが良いと思います。
（コードブロック省略）これで完成です！
この記事の冒頭にあるような、WebGLゲームの埋め込みが出来ました！
また、Webページのサイドにウィジェットがあると、ゲーム画面の端が切り取られる事象が発生したので、このページではウィジェットをオフにしています。
さいごに
自分のWebサイトにゲームを表示出来ると、ポートフォリオとして掲載しやすくなったり、Webサイトと絡めたゲームを作れたりと、色々と面白そうです。
個人的に、ゲームデザインからゲームを考えるのではなく、自分が試したい技術から作るゲームを考えてしまいがちなのですが(だからヒットしないのでは...?)、ゲームとブラウザを連動したようなゲームを作ってみたいなぁ...。
この記事がよかったら、ぜひX（@mitakamikata）もフォローしてくださいね。
それでは素敵なゲーム制作ライフを！
ゲームの素材探しに困っていませんか?
ゲームのUI素材探しなら、Free Game UI Assets がオススメです！
完全無料で著作権フリーな、UIのアセット素材がなんと1700以上使い放題！
ぜひ、こちらもチェックしてみてください。
コメント