🔖

UnityRoom って Addressables ダメなんだってよ

2025/02/10に公開

ふと思い立って、UnityRoom へ 5 年前に作ったゲームを投稿しました。

https://unityroom.com/games/tataq

思ったより苦労した……ので、備忘録として残します。

前段

UnityRoom 対応前に、ライブラリも一新しようと Unity2019(BRP) AssetBundle → Unity6000(URP) Addressables に変更したところ、いろいろと問題発生(当然?)。

  • Camera が誤動作
  • ScrollView 内の TextMeshProUGUI だけなぜか表示されない → Mask が不完全なアップデート
  • AssetBundle を Addressables に置き換えるところは意外と問題なし
    (これが UnityRoom では使えない、というところでハマることになるが……)

WebGL ビルド

UnityRoom 用の WebGL ビルドで注意するべきポイントです。

WebGL / Build And Run で正しく動くか確認

まずは自分の環境で、きちんとゲームが動くか確認しましょう。

Development Build はオフ

意外と、初心者的にはつまづくポイントかもしれない。
これをやっておかないと、UnityRoom にアップロードするファイルが1つ足りなくなる。

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 に置いておきました。

https://github.com/catsnipe/ReplaceStreamingAssetsForUnityRoom

ビルド完了時に、指定された文字列を置き換えるだけの単純な Editor ツールです。

上手くゲームが起動しない場合

Addressables が正しく読み込めているかどうかは、ブラウザのデバッグ機能を使って確認します。
Google Chrome であれば 右クリック > 検証 すると右側にデバッグウィンドウが表示されるので、Console タブを表示しましょう。

こんな風にエラーが出ていたら、アップロードの仕方か、js の書き換えをミスっています。

そのほか UnityRoom のおぼえがき

知っといた方がよさそうな順に列挙します。

★ 画面を1回クリックしてもらわないと、キー操作は受け付けない

パッドは受け付けますが、キーはゲーム画面を1回クリックしないと受け付けません。
地味ですが UX に直結するので、キーボード操作するゲームはまず1回クリックを促しましょう。

★ 音量調整はできるようにしておこう

配信の兼ね合いもあるからか、音量は調整できるようにしておくと喜ばれるようです。
(調整がないと評価下げる人もいるらしいです……)

表示サイズは 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 で作成しましょう。神ツール。
https://www.screentogif.com/downloads

Discussion