unityroomへの投稿の仕方(Unity2020 3.x)

# はじめに
#### この記事は何？
公式の[ Unity1週間ゲームジャム ](https://unityroom.com/unity1weeks)
のページの下の方に投稿方法の記事があるのですが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/4477f8b0-3914-0c69-b453-630f76be73fa.png)
【unity】WebGLビルド方法 - naichi's lab https://blog.naichilab.com/entry/2017/04/29/125527 

2017年と情報が古めだったので、2020以降を使っている初心者向けに書きました。
基本的な方法はだいたい同じなのですが、
2020からの大きな変更点として.unitywebファイル→.gzファイルになっています。

#### 余談
ゲームが完成したら。
もっと言えば、完成していなくても早目の段階で仮投稿しておくことをオススメします。
投稿したゲームは後から何度でも更新できますので、早目の動作確認、投稿テストが望ましいです。

# ビルドとその設定
### プロジェクトの保存先
なるべく浅い階層の「半角英数」で構成されたフォルダ内に保存しておいてください。
日本語名のディレクトリ(フォルダ)はビルドに失敗します。

※デスクトップ上のフォルダだとビルドに失敗するのでやめてください。

悪い例：
C:\Users\山田太郎\Desktop\新しいフォルダー\MyProject

良い例：
C:\UnityProjects\MyProject
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/9ee900e7-8c64-d542-11c0-48393d616898.png)

### 今開いているプロジェクトは何処…？
Assetsフォルダを右クリック → Show in Exploler
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/17b076fd-7ddb-1747-66e1-e9283230bec9.png)

### プロジェクトの引っ越し方法
デスクトップ上など、不適切な場所にプロジェクトがあるひとは引っ越ししましょう。
Assetsフォルダの１つ上の階層のフォルダがプロジェクトのフォルダです。
Unityのエディタをいったん閉じてから、右クリックで「切り取り」、引っ越し先に貼り付けましょう。
引っ越しが済んだら、Unity Hubから
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/b68bc92f-def1-2fc4-dbb6-15c7816515f4.png)
引っ越し先のプロジェクトを指定して開きます。

### シーンの設定

メニューから File→Buid Settings を選びます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/01858b63-b29f-7817-0c77-47ba426191db.png)

ゲームで使っているシーンファイルをすべてドラッグ・アンド・ドロップで追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/35358ddc-cd1f-2cae-2393-2d5331bcd6ac.png)

ゲームが読み込まれたときに最初に呼び出されてほしいシーンが「0番目」になるようにドラッグ・アンド・ドロップでシーン名を並び替えてください。
(ここでは、Titleシーンを0番目、Sampleシーンを1番目にしています)

### 出力先のプラットフォームの選択
PC向け、iOS向け、PS5向け……など様々なプラットフォームが選べます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/66828296-9eea-27e2-a8c9-917605074bfc.png)
今回はunityroom向けに出力したいので、「WebGL」を選択します。

### WebGL向けモジュールの追加(インストール時に入れていない場合)
もし、今使っているUnityのバージョンをインストールしたときに
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/398596f9-ffdd-ba80-5703-08fd8d4c75ca.png)
「WebGL」にチェックを入れていた場合は、問題ありません。
入れていなかった場合、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/6330fd2e-2205-c134-413f-aeffec1c299a.png)
No WebGL module loaded
「WebGLのモジュールがロードされていません、Unity Hub からインストールをしてください」
と表示されていると思います。

Unity Hub からインストール済みの該当Unityのバージョンの歯車アイコンをクリックし、「モジュールを加える」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/6ea4c885-9950-1c5b-e57f-47c2356abfff.png)

「WebGL」をチェックして「インストール」ボタンを押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/585a9d75-fc9e-8bd7-58ff-4eb32fa7ec96.png)

インストールが始まります。1GBくらいあるので、結構ダウンロードに時間が掛かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/0362c422-235b-ec5f-430d-b80518cb5857.png)
インストールが完了したら、Unityを一旦閉じて、Unityを**再起動**してください。

※大事なことなので2回言いますね
Unityを一旦閉じて、Unityを**再起動**してください。

### Switch Platform
WebGLのモジュールが追加済みなら
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/91dabb5c-c357-b553-d519-45f941d009ff.png)
「Switch Platform」ボタンが押せる状態になっている筈です。
押して、プラットフォームをWebGLに切り替えましょう(そこそこ時間が掛かります)。
※プロジェクトを作った時点であらかじめ Switch Platform しておいても構いません。

### .gzファイルの設定
メニューから Edit → Project Settings を開いてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/702fccd1-e4c9-272d-695e-da2d76025ed9.png)
Player 欄の Publishing Settings の Compression Format をGzip にしておいてください。
※これをしておかないと、unityroom用に必要なファイル形式で書き出せません。

### ビルド
ビルドしましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/d114cf7f-d3bc-a01c-3315-070fab11e40f.png)
ビルドボタンを押します。
ビルド先のフォルダを指定します。
プロジェクトフォルダ内(じゃなくてもいいんですが)に右クリックから新規フォルダを作って
そこを保存先に指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/e3763c6d-7480-d868-6dd4-413f50b89179.png)
名前は半角英数字なら何でもいいですが、ここでは「unityroom」とします。
※ただし、「Build」という名前は後で作られるファルダの名前と被って紛らわしいので、個人的には非推奨です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/c88bddc5-b83c-4e32-05d3-ef785c469b3d.png)
フォルダを選択すると、ビルドが始まります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/94740fca-b627-e7d3-cdba-ea4dbfe8a9bc.png)
ビルド内容やマシンパワーにもよりますが、カップ麺を作れるくらいは待たされます。

ビルドが完了したら、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/036a8edd-2028-efa3-498f-3c5a1c66e787.png)
このようなファイルが作られいる筈です。
Buildフォルダの中身はこんな感じです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/ffb6a97b-a1e9-a4e9-ad86-4ff9b6eb7a47.png)
これら4つのファイルが unityroom の投稿で必要になります。

# UnityRoomへの投稿
### ログイン
unityroomにアクセスして
ログインボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/26e24ee8-5d6e-a46c-fa32-e561c6ef64e2.png)
※Twitter連携でしかログイン出来ないので、Twitterのアカウントが無い人は用意してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/bd5647bd-f369-65e1-234a-f0b8056fd213.png)

### ゲームの登録、基本情報
「ゲームを登録する」ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/d05c6db3-a81a-11ef-4c78-669dcce4d542.png)

ゲームのタイトルとゲームID、紹介文、想定プレイ時間を入力して、「登録」ボタンを忘れずクリックしてください。
※「ゲームid」はゲームのURLになるので、後から変更してしまうと、URLが変わってしまうので注意してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/b43625ff-a014-89f2-7cf1-5217e8a01857.png)

アイコン画像が登録できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/03c6fca3-a5b3-f2b8-deb8-e2bb86c10c57.png)
unitryoom上のサムネ画像になるので、ユーザーに遊んで貰う上では非常に重要ですが、後でも変更できるので取り敢えず後回しにします。

##### 余談：gifアニメのアイコン
余力があればgifアニメのアイコンを設定したいものです。
訴求力が全然違ってきます。
ScreenToGifというソフトでゲーム画面をキャプチャするのがおススメです。
https://forest.watch.impress.co.jp/library/software/screentogif/
※gifアニメのアイコンは、ファイルサイズの制約が厳しいので、フレームを間引いたり、画像サイズを落とす必要があります

### スクリーンショット
2022年9月11日現在、未実装だった筈です。
設定しても現時点では、意味がないので無視してください。

### WebGL設定
Unityのバージョンや表示サイズ、操作方法、などを記入します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/de116679-1aab-6206-81d3-ab432552b4f5.png)

#### Unityのバージョン
例えば 2020.3.33f1 なら「2020.3.x」を選びます(絶対に間違えないでください)。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/2ce55ca4-2222-52de-1437-d25331b043e3.png)
#### 表示サイズ
よくわからなければそのままにしてください(960×540で16:9です)。
アスペクト比を16:9以外にしているときや、もっと大きく(小さく)ゲームを表示したいときはサイズを指定してください。

#### フルスクリーン表示を許可
差し支えなければ、個人的には推奨です。

#### 操作方法
わかるように書いておいてください。
(どうせ誰も読まないので、可能であればゲーム画面内に書いてあるのが望ましいです)

#### 割り当てメモリサイズ
よくわからなければ256MBで

忘れずに **「更新」** ボタンを押してください。

### WebGLアップロード
ビルドで書き出した4つのファイルを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/29730db6-6264-6762-f4ea-671996d222d3.png)
※4つのファイルがあべこべにならないように慎重に選択してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/2647b94f-b476-c288-d881-4ddd22465105.png)
選択し終わったら、「アップロードボタン」を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/3d041bf8-8b63-dba5-934b-d1109f4fef2e.png)
数秒後にファイルアップロード状況が4つとも「完了」になっていればアップロード成功です。
※あくまで、アップロードの成功であり、4つのファイルを選び損ねたりすると、ゲームが動かないことがあります。

### ゲームで遊ぶ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/0f3c4149-7a59-a46e-6ef3-37d9b0c79d35.png)
「urlを開く」をクリックすれば、ゲームが読み込まれ、遊ぶことができる筈です。

# イベントの参加とその他の設定
参加イベントを選択して「更新」ボタンを押してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/c651bbd3-190e-74c7-cb8c-3980f5ac13fc.png)

非公開設定のままだと誰も遊べないので、公開設定を「一般公開に」変更しましよう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/c930bd1b-d377-51b0-635d-40d9248f8607.png)


# よくあるトラブルと対策
#### 日本語文字が表示されない
[UnityのWebGLで日本語を表示する](https://qiita.com/tsubaki_t1/items/93e4b91b830729cd93a4)
#### ゲームの更新が反映されない
ビルドしなおしたデータをアップロードしなおしたのに何故か最新版が反映されない……よくあることです。
ブラウザのキャッシュが残っていて、それが読み込まれている可能性が高いです。
#### スーパーリロード
[スーパーリロード](https://www.lct.jp/archives/column/9354/)(Shift + F5)を押すとキャッシュをクリアして最新版が読み込まれます。

どうしてもスーパーリロードでも最新版が読み込まれない場合は、別のブラウザでアクセスしてみてください。
例：Google Chrome → Microsoft Edge で同じ投稿urlを開いてみる。Edge上で上手く動くなら、Chromeにキャッシュが残っている可能性があります(何故かスーパーリロードしてもキャッシュが残っている場合あり)。
#### ゲームの読み込みが終わらない
アップロード時に4つのファイルがあべこべになっていた可能性が高いです。アップロードし直してみてください。

#### エディタ上では動くのにunityroom上では動かない
1番厄介な問題です。様々なケースが考えられます。
同じ動作をする別の実装方法を試してみてください。
##### Start関数の順番
Start関数内で色々初期化している場合、どれが先に実行されるかわかりません。
「あれを先に初期化していないとこれを初期化できない……」ということはよくあります。
たまたま偶然上手く動いていたのが、順番が狂ったことで動かなくなっているのかもしれません。

#### エディタ上では表示されるのにunityroom上ではキャラが表示されない
+ 2Dのプロジェクトの場合
SpriteRendererコンポーネントの order in layer が背景もキャラも0のままの可能性があります。この場合、どれが手前に表示されるかは運次第になります。エディタ上で開発していても、ある日突然、キャラクタが背景の後ろに表示されて見えなくなることがあります。背景のスプライトは低めの数字に設定しておきましょう。

### 文字やボタンのUIが表示されない、位置がおかしい！
Canvasオブジェクトのスケールモードがデフォルトの固定ピクセルサイズのままの可能性があります。ゲームウィンドウのサイズがエディタ上と変わるので表示されなくなっています。

+ Gameビューのアスペクト比をFree Aspect → 16:9 等に固定しておく。
+ CanvasオブジェクトのCanvas Scaler コンポーネントを固定ピクセルからScale with Screen Size、Expandにしておく。

##### Canvasの設定例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/7752517c-cdc3-b0be-fcf5-9cfa37cf9e3c.png)

### ビルドすると.wasmでなく.asmファイルが作られてしまう！
プロジェクトフォルダ内の
ProjectSettings/ProjectSettings.asset
をダブルクリックするなりしてメモ帳か何かで開きます。
webGLLinkerTarget: 1
に変更してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/95e6dc67-f06d-3d56-92d0-b3dce4261799.png)


# ゲームの更新方法
修正したゲームをビルドし直して、同じゲームIDに再アップします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/17a316a0-eb9b-6572-18b7-985d272dc676.png)

注意点として、修正したゲームを再アップしても、ブラウザ上に残ったキャッシュが読み込まれて最新版が一向に反映されなくてイラっとすることが多々あります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/58548/32806b68-a6f4-1f18-5cfa-198cd3b81366.png)
タイトル画面にバージョンナンバーを記入しておいて、更新する度に番号を更新することをお勧めします。
(見た目上の変化がないと、修正した最新版が反映されたのか、キャッシュに残った以前のバージョンが表示されているのか区別が付かないです)