UnityRoom って Addressables ダメなんだってよ
ふと思い立って、UnityRoom へ 5 年前に作ったゲームを投稿しました。
思ったより苦労した……ので、備忘録として残します。
前段
UnityRoom 対応前に、ライブラリも一新しようと Unity2019(BRP) AssetBundle → Unity6000(URP) Addressables に変更したところ、いろいろと問題発生（当然？）。
- Camera が誤動作
- ScrollView 内の TextMeshProUGUI だけなぜか表示されない → Mask が不完全なアップデート
- AssetBundle を Addressables に置き換えるところは意外と問題なし
（これが UnityRoom では使えない、というところでハマることになるが……）
WebGL ビルド
UnityRoom 用の WebGL ビルドで注意するべきポイントです。
WebGL / Build And Run で正しく動くか確認
まずは自分の環境で、きちんとゲームが動くか確認しましょう。
Development Build はオフ
意外と、初心者的にはつまづくポイントかもしれない。
これをやっておかないと、UnityRoom にアップロードするファイルが１つ足りなくなる。
GZip 圧縮する
Unity のバージョンによって設定場所は少し異なるかもしれません。
Unity のバージョンが低いと wasm ではなく asm が生成されるらしい
私は Unity6000 だったので wasm 一択でしたが、Unity2018 などではデフォルトが asm になっているようです。見落としがちなので、気をつけてください。
UnityRoom は Addressables 非対応だった！
さて、ここからが（私の）本題。
Unity1week のような「手早く、とにかく簡単にゲームを作る」を目指す場合、データは Resources に置くことが多いためか、UnityRoom では Addressables を置くスペースはありません。
つまり Addressables を使っていた場合、UnityRoom には頼れず、以下の手順を自分で行う必要があります。
- 自分でサーバーを用意
- Addressables のファイルをアップロード
- CORS の設定
- js が UnityRoom ではなく、自前サーバーからデータを読むよう書き換える
自前でサーバーとか、CORS とか……頭を抱えると思います。私はそうでした。
ここからは、そんな Unity は知ってるけどサーバーの知識は全然という人向けの簡単な方法を紹介します。
まず、GitHub Pages を使うので、GitHub については最低限の知識が必要です。
次に、GitHub Pages で CORS を考える必要はありません。
なぜなら、データは完全に public（誰でも見れる場所）に置くから。
ゆえに、商用には向いていません。
商用の場合 CloudFlare Pages を利用した記事などを参考にするとよさそうです。
1. GitHub のアカウントを用意
GitHub については、他にもいろいろと手順を教えてくれるサイトがあると思うので、そちらに委ねます。
手順に従って、自分のアカウントを作成してください。
2. Public リポジトリを作成する
データを置くための器を用意します。
Repository Name は後で使いますので、覚えておいてください。
3. Streaming Assets フォルダをアップロード
Add file > Upload files を選択し、StreamingAssets をそのままドラッグ。
もし今後ゲームのアップデートを考えている場合は、StreamingAssets の前に 1.0 などのデータバージョンを示すフォルダを作っておくといいでしょう。
アップしたら GitHub での見え方はこんな感じ。
4. Pages の設定
GitHub で Settings > Pages > Build and deployment > Branch を main に
この設定が完了すると、GitHub URL 形式で GitHub の外からブラウザアクセスが可能になります。
（URL 形式については後程説明します）
5. GitHub Pages の確認
この手順は省いても構いませんが、問題が生じた時の原因解明には役立つと思います。
Windows の場合、コンソールで、以下のコマンドを打ち、確認します。
curl -I -H "Origin: https://unityroom.com" https://USER.github.io/REPOSITORY/1.0/StreamingAssets/aa/settings.json
6. js のデータ読み込み URL を書き換える
js ファイルをテキストエディターで開き、streamingAssets を検索します。
（2 箇所あると思います）
私の場合、次のようになっていました。
streamingAssetsUrl:"StreamingAssets"
m.streamingAssetsUrl=new URL(m.streamingAssetsUrl,document.URL).href
この、"StreamingAssets"とm.streamingAssetsUrl,document.URLを GitHub Pages の URL に置き換えます。
GitHub Pages URL
https://USER.github.io/REPOSITORY
USER .. GitHub のユーザー名
REPOSITORY .. 今回作成したリポジトリ名
（もととなる GitHub URL が https://github.com/USER/REPOSITORY の場合）
ここまでの例を踏まえた場合、js スクリプトを以下のように置き換えます。
streamingAssetsUrl:"https://USER.github.io/REPOSITORY/1.0/StreamingAssets"
m.streamingAssetsUrl=new URL("https://USER.github.io/REPOSITORY/1.0/StreamingAssets").href
面倒なので（書き換えを）ツール化する
ビルドする度に手動で変えるのは大変なので、自動化するツールを GitHub に置いておきました。
ビルド完了時に、指定された文字列を置き換えるだけの単純な Editor ツールです。
上手くゲームが起動しない場合
Addressables が正しく読み込めているかどうかは、ブラウザのデバッグ機能を使って確認します。
Google Chrome であれば 右クリック > 検証 すると右側にデバッグウィンドウが表示されるので、Console タブを表示しましょう。
こんな風にエラーが出ていたら、アップロードの仕方か、js の書き換えをミスっています。
そのほか UnityRoom のおぼえがき
知っといた方がよさそうな順に列挙します。
★ 画面を１回クリックしてもらわないと、キー操作は受け付けない
パッドは受け付けますが、キーはゲーム画面を１回クリックしないと受け付けません。
地味ですが UX に直結するので、キーボード操作するゲームはまず１回クリックを促しましょう。
★ 音量調整はできるようにしておこう
配信の兼ね合いもあるからか、音量は調整できるようにしておくと喜ばれるようです。
（調整がないと評価下げる人もいるらしいです……）
表示サイズは 960 x 540 に。ゲームは画面のリサイズ可能にしておく
表示サイズは Project Settings > Player > Resolution and Presentation で X/960, Y/640 に。
画面リサイズ可能なゲーム、というのはちょっとピンとこないかもしれませんが、2D(uGui) の場合 Canvas の Canvas Scaler を以下の値に設定しておけばいい感じになります。
Reference Resolution: X/960 Y/540 // 等倍なら可。たとえば 1920, 1080 でもよい
Screen Match Mode: Expand
InputSystem でサポートするデバイス
UnityRoom はブラウザゲームなので、スマートフォンでも動作します（Unity によるとサポート対象外。メモリーを多く必要とするゲームはおそらく困難）。
自分のスマフォで動くようなら、操作デバイスに TouchScreen も加えておくといいかもしれません。
データ保存形式は json で、PlayerPrefs.SetString する（サイズに注意）
SetString した後は Save() を忘れずに。
Application.persistentDataPath で保存することも可能ですが、js を用意するなど、Web に精通したコードを書ける人向けです。
アイコンは Gif アニメーション画像がいいらしい
ScreenToGif で作成しましょう。神ツール。
Discussion