初めてのUnityRoom、ここで躓いた！

## 1.私はUnity歴が浅い

はじめから「自分語り」というのはよくないのかもしれませんが、

この時私は **Unityを初めて1ヶ月** 経ったとこでした。

1weekが終わったタイミングで、プロジェクトマネージャーさんに

**「せっかくなのでUnityRoomで公開しませんか？」**

公開することには大賛成だったので、すぐOKしました。

公開する上でデメリットはほぼない。

むしろ就活でも話のネタにできる。
学校外でも多職種でも、幅広くコミュニケーションが取れる人間であると証明される。

### 実際に制作したゲーム

https://unityroom.com/games/click-witch

### よしUnityRoomにあげてもらおう！！

私「ビルドupしておきました！」

・・・数時間後・・・

プロマネ「**WebGL**でビルドし直してください」

WebGL？なにそれ？

ここからプロマネ要望の嵐が来ます

## 2.「**WebGL**でビルドし直してください」

WebGLというのはプラットフォームの一種である。

ファイルの拡張子が .exe ではなく **.html** になるのだ。

Unityのアイコンがついているものが、今ビルド設定されているプラットフォームです。
これをWebGLにかえるみたいです。
![Untitled (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670027/3e61bf47-7635-371b-25c0-af7fd2ed89fa.png)

そもそもインストールできてない人が多いと思うので、そこから解説していきます～！！

### WebGLをインストールする

下のInstallボタンを押すとUnityHubへ飛びます
![Untitled (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670027/a4cef99e-3864-770e-1568-857bd30e249d.png)

右下のインストールボタンを押して、インストール終わり次第プロジェクト立ち上げてください
![Untitled (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670027/756683c2-0141-1808-5a4c-612ebae898ac.png)


### インストール完了したら…

![Untitled (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670027/1ef4583d-b2de-399f-d4a3-20189e00edc4.png)
右下に Switch Platform があるので押します。

押すとエディタの方でコンパイルが始まります。
![Untitled (7).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670027/a3bead32-fee2-fb24-cd8e-a528179caf7d.png)

これでプラットフォームの変更はできました！

## 3.「画面サイズは960×540でお願いします」

え？？？？

最初に1920×1080って言ってたじゃん！！！！

UnityRoomの仕様上、画面サイズというものが存在する。

もちろん1920×1080でも可能ではあるが、大きすぎる。

ブラウザ上でゲームが遊べるようにするためには、ページが拡縮された時でも、画面が収まるようにしなければならない。

それでは設定がんばろう、、！！

### アスペクト比変更

ゲーム画面ウィンドウに960×540を追加・設定する
![Untitled (8).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670027/e9f970b1-bca2-bbb4-fe30-868b5a35f427.png)

### Player Setting の変更

まず下の画面からPlayerSettingを開く（左下にボタンあります）
![Untitled (9).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670027/43918d52-cc6f-5052-65c1-2d451a157c8f.png)

![Untitled (10).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670027/c74b3f4b-e30c-4276-66a8-1d9bbd74e14c.png)


上の画面になってたらOK！

真ん中あたりにあるResolutionの部分を指定されたサイズに変える
![Untitled (11).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670027/007e1207-8ae5-e591-0c9b-0802ad32318d.png)

### CanvasとかUI周りの修正

正直これが一番めんどくさかった。

ただこのあたりの設定はプロジェクトによって大きく違うので、

Canvas Scaler の変更点だけ記述しておきます。

Canvas → Canvas Scaler → UI Scale Mode を
Scale With Screen Size に変更
![Untitled (12).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670027/0384ddcb-da18-95c7-c9a9-c141ffd9413b.png)


Canvas を修正しても表示がうまくいかない場合は
他の箇所（特にanchor周り）を修正した方がいいと思います。

anchorの仕組みを解説してくれている記事があったのでおいておきます。
https://hirokuma.blog/?p=664

## 4.「データがbrになっているのでできないです。」

有識者さんにききました。

「どうすればいいんですか？」

「gzにしないといけないよ」

ということで調べました。

PlayerSettingの画面です。
![Untitled (13).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670027/28439907-b31a-2865-e2d7-1de7988c312e.png)

以下の部分を見つけてGZipに変えてあげてください。
![Untitled (14).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670027/deb33815-6d46-2b3a-b138-f8c9d7702ab8.png)
Publishing Settingsの上から2つ目です。

## 5.終わった～！！

プロマネ「UnityRoom にあがりました～！」

早速UnityRoomで遊んでみるぞ！！

… あれタイトルの音は？
… なんか速くない？遅くない？

まだまだ穴だらけです。

WebGLでは画面をクリックしないと初めの音がならない仕組みになっています。
また可変フレームレートに対応しておかないと、ゲーム速度が崩れます。（マシンによってFPSが変化するため）

これからもまだまだ伸びしろがあるのでがんばります。

## 参考文献

https://note.com/metaformingpro/n/n686fa1668922#17c69a7d-ad1e-42ea-9be5-c363c610e1f3

https://qiita.com/YutakakINJO/items/a7b3b6a8325004ba24cb

https://hirokuma.blog/?p=664