unityroomにゲームを投稿してみた

#初めに
ここ最近、就活を進めながらスキルアップのために「パズドラ」の模作をしていました。
実装したいものの実装は終了したので、とりあえず公開してみました。
https://unityroom.com/games/pazzdoracopy
↑ゲームのリンク

完璧なパズドラとは言えませんが、ちゃんとパズルをして戦うことができます。
※2021/03/26現在

WebGLビルド自体やったことがなく、色々と問題が起きたので対処法等をお話します。

#そもそもWebGLってなんぞや
自分はUnityのデフォルトや、Androidのビルドはしたことがあったのですが、WebGLのビルドをしたことがなく、この間のインターンシップで始めて経験しました。（しかも実際にビルドしたのは自分ではなくチームメンバー)

なので今回初めて触ったのですが、簡単にいうとWeb上で自分の作ったゲーム動かせるよービルドって感じです(名前そのまんま)

#上手くいかなかった部分について

とりあえずインストールを終わらせて、ビルドしてみることに。
ビルドが終了すると、
![WebGLBuild 2021_03_26 11_33_05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1207332/fb186461-644b-2043-5595-0c48dc5d3c6b.png)
このようなファイル群が出力されている(StreamingAssetsは作った場合)

この中の、index.htmlを開けば実際にプレイできるのだが...
![Unity WebGL Player _ Pazzdora - Google Chrome 2021_03_26 11_36_41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1207332/a11c0607-f48e-e3e5-3970-2da2b6d7b971.png)
このとおり、いつまで経っても**ゲームが起動しない...**
調べてみたところ、どうやらブラウザのセキュリティ云々のせいでそのままでは起動できないらしい。

http://mux.eee.u-ryukyu.ac.jp/nmny/wiki/index.php/WebGL%E3%81%AE%E6%9C%89%E5%8A%B9%E5%8C%96%E6%89%8B%E9%A0%86

こちらの記事を参考に、firefoxで動かせるようにしてみたところ...
![Unity WebGL Player _ Pazzdora — Mozilla Firefox 2021_03_26 11_41_38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1207332/7679bed9-ad14-3ea2-500e-2ad7e7e8b422.png)
うまく起動できました。

ビルドする時に、BuildSettingsの**Development Build**を有効にすると、コンソールが表示されるようになるので、デバッグをする際に活用しよう。

#いざ公開へ
公開するために、まずUnityRoomのアカウントを作る必要があります。
ツイッターアカウントで簡単に作れるのでためしてみてください。

作品を投稿しようとすると
![パズドラ模作の基本情報編集 _ フリーゲーム投稿サイト unityroom - Google Chrome 2021_03_26 11_49_50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1207332/36205948-8ab2-5f76-5c9d-bc92662e913c.png)
このような画面が表示されます。
ここら辺は自分の作品の情報を入力して下さい。
その後、細かい情報を入力して、アップロードをすることになります。

#いざアップロード
と、いうわけで、作ったゲームのアップロードをしていくのですが...
![あのWebGL設定 _ フリーゲーム投稿サイト unityroom - Google Chrome 2021_03_26 11_55_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1207332/fe3911e6-fba7-3a5a-e8b0-686b177ab200.png)

![Build 2021_03_26 11_59_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1207332/12599173-fc83-eccd-d609-e68548f78886.png)
なんか、アップロードしなければならないファイルのうち、wasmなるファイルが見つかりません。(全てasmになっている)

とりあえずこれかな？とテキトーにファイルを入れてみるも、もちろん動かず...
どうすればいいんだと詰まってしまいました。

#wasmにする
色々試して調べてしてみた結果、やっぱりasmで出力しているのが悪いようです。
Unityから変更できないみたいなので、ファイルの中身をいじっていきましょう。

![Pazzdora 2021_03_26 12_12_24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1207332/86ba2d15-5d90-af02-4ae2-894851d33e12.png)

プロジェクトファイルのProjectSettingsの
![ProjectSettings 2021_03_26 12_17_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1207332/0f9d1185-3478-7220-d500-e8dbebf07eb3.png)
ProjectSettings.assetを開きます。(最初は既定のアプリが決まっていません。私は、ビビジュアルスタジオを使用しました。)
その中の**[webGLLinkerTarget:]**の数字を1にします。(最初は0になっている)
私の場合は712に行目にありました。(みんなそうなのかな？)
![ProjectSettings.asset - Microsoft Visual Studio 2021_03_26 12_19_42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1207332/0392b15d-8568-9433-325d-e44ac1953d53.png)
変更できたら保存して閉じてビルドをもう一度やり直してください。
![Build 2021_03_26 12_23_36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1207332/6dcaa502-d196-4308-3275-339947f2bb0b.png)
無事必要なファイル4つを出力することが出来ました。

#今度こそ公開する
と、いうわけで今度こそ作品を公開します。先ほどのアップロードページにもどり、4つのファイルをアップロードして下さい。
ちなみに、GZファイル形式を指定されていますが、unitywebでも問題なくアップロードできます。(sizeが大きくなると厳しいのかな？)

アップロードが完了したら、公開設定で一般公開に変更するだけで作ったゲームが公開されます。

![パズドラ模作 _ フリーゲーム投稿サイト unityroom - Google Chrome 2021_03_26 12_29_21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1207332/85276b19-52fe-2752-2d4d-fd9941b56b93.png)

無事、UnityRoom上で動くようになりました。
#まとめ
と、いうわけで、今回UnityRoomに投稿してみた話でした。
初めて製作したこともあって色々とわからないことが多かったですが、何とか公開できました。
本当はGithubにいれて公開する予定だったけどLFS関係でうまくいかなくて断念(余裕があれば別記事にまとめます)しました。
UnityRoomは比較的簡単に投稿できて、更新も簡単なので、是非ゲームを作った際には投稿して、多くの人に遊んでもらうという体験をしてみてほしいです。
新しく投稿したゲームは一番上の方に出てくれるので意外と多くの人が触ってくれます！![新着ゲーム一覧 _ フリーゲーム投稿サイト unityroom - Google Chrome 2021_03_26 13_46_43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1207332/2c38bc6b-00c6-a2cc-f7c2-306888bf2054.png)
**コメント**をもらえたり、**作品の評価**をしてもらえることもあるので、フィードバックを貰うためだったり、自信をつけるのにも使えます(*・ω・)(*-ω-)(*・ω・)(*-ω-)ウンウン
ではノシ