Go to Qiita Advent Calendar 2024 Top
LoginSignup
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@kurisaka_konabe(kurisaka konabe)

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

Last updated at Posted at 2022-09-11

はじめに

この記事は何？

公式の Unity1週間ゲームジャム
のページの下の方に投稿方法の記事があるのですが、
image.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

今開いているプロジェクトは何処…？

Assetsフォルダを右クリック → Show in Exploler
image.png

プロジェクトの引っ越し方法

デスクトップ上など、不適切な場所にプロジェクトがあるひとは引っ越ししましょう。
Assetsフォルダの１つ上の階層のフォルダがプロジェクトのフォルダです。
Unityのエディタをいったん閉じてから、右クリックで「切り取り」、引っ越し先に貼り付けましょう。
引っ越しが済んだら、Unity Hubから
image.png
引っ越し先のプロジェクトを指定して開きます。

シーンの設定

メニューから File→Buid Settings を選びます。
image.png

ゲームで使っているシーンファイルをすべてドラッグ・アンド・ドロップで追加します。
image.png

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

出力先のプラットフォームの選択

PC向け、iOS向け、PS5向け……など様々なプラットフォームが選べます。
image.png
今回はunityroom向けに出力したいので、「WebGL」を選択します。

WebGL向けモジュールの追加(インストール時に入れていない場合)

もし、今使っているUnityのバージョンをインストールしたときに
image.png
「WebGL」にチェックを入れていた場合は、問題ありません。
入れていなかった場合、
image.png
No WebGL module loaded
「WebGLのモジュールがロードされていません、Unity Hub からインストールをしてください」
と表示されていると思います。

Unity Hub からインストール済みの該当Unityのバージョンの歯車アイコンをクリックし、「モジュールを加える」をクリックしてください。
image.png

「WebGL」をチェックして「インストール」ボタンを押してください。
image.png

インストールが始まります。1GBくらいあるので、結構ダウンロードに時間が掛かります。
image.png
インストールが完了したら、Unityを一旦閉じて、Unityを再起動してください。

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

Switch Platform

WebGLのモジュールが追加済みなら
image.png
「Switch Platform」ボタンが押せる状態になっている筈です。
押して、プラットフォームをWebGLに切り替えましょう(そこそこ時間が掛かります)。
※プロジェクトを作った時点であらかじめ Switch Platform しておいても構いません。

.gzファイルの設定

メニューから Edit → Project Settings を開いてください。
image.png
Player 欄の Publishing Settings の Compression Format をGzip にしておいてください。
※これをしておかないと、unityroom用に必要なファイル形式で書き出せません。

ビルド

ビルドしましょう。
image.png
ビルドボタンを押します。
ビルド先のフォルダを指定します。
プロジェクトフォルダ内(じゃなくてもいいんですが)に右クリックから新規フォルダを作って
そこを保存先に指定します。
image.png
名前は半角英数字なら何でもいいですが、ここでは「unityroom」とします。
※ただし、「Build」という名前は後で作られるファルダの名前と被って紛らわしいので、個人的には非推奨です。
image.png
フォルダを選択すると、ビルドが始まります。
image.png
ビルド内容やマシンパワーにもよりますが、カップ麺を作れるくらいは待たされます。

ビルドが完了したら、
image.png
このようなファイルが作られいる筈です。
Buildフォルダの中身はこんな感じです。
image.png
これら4つのファイルが unityroom の投稿で必要になります。

UnityRoomへの投稿

ログイン

unityroomにアクセスして
ログインボタンを押します。
image.png
※Twitter連携でしかログイン出来ないので、Twitterのアカウントが無い人は用意してください。
image.png

ゲームの登録、基本情報

「ゲームを登録する」ボタンをクリック
image.png

ゲームのタイトルとゲームID、紹介文、想定プレイ時間を入力して、「登録」ボタンを忘れずクリックしてください。
※「ゲームid」はゲームのURLになるので、後から変更してしまうと、URLが変わってしまうので注意してください。
image.png

アイコン画像が登録できるようになります。
image.png
unitryoom上のサムネ画像になるので、ユーザーに遊んで貰う上では非常に重要ですが、後でも変更できるので取り敢えず後回しにします。

余談：gifアニメのアイコン

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

スクリーンショット

2022年9月11日現在、未実装だった筈です。
設定しても現時点では、意味がないので無視してください。

WebGL設定

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

image.png

Unityのバージョン

例えば 2020.3.33f1 なら「2020.3.x」を選びます(絶対に間違えないでください)。
image.png

表示サイズ

よくわからなければそのままにしてください(960×540で16:9です)。
アスペクト比を16:9以外にしているときや、もっと大きく(小さく)ゲームを表示したいときはサイズを指定してください。

フルスクリーン表示を許可

差し支えなければ、個人的には推奨です。

操作方法

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

割り当てメモリサイズ

よくわからなければ256MBで

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

WebGLアップロード

ビルドで書き出した4つのファイルを選択します。
image.png
※4つのファイルがあべこべにならないように慎重に選択してください。
image.png
選択し終わったら、「アップロードボタン」を押します。
image.png
数秒後にファイルアップロード状況が4つとも「完了」になっていればアップロード成功です。
※あくまで、アップロードの成功であり、4つのファイルを選び損ねたりすると、ゲームが動かないことがあります。

ゲームで遊ぶ

image.png
「urlを開く」をクリックすれば、ゲームが読み込まれ、遊ぶことができる筈です。

イベントの参加とその他の設定

参加イベントを選択して「更新」ボタンを押してください。
image.png

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

image.png

よくあるトラブルと対策

日本語文字が表示されない

UnityのWebGLで日本語を表示する

ゲームの更新が反映されない

ビルドしなおしたデータをアップロードしなおしたのに何故か最新版が反映されない……よくあることです。
ブラウザのキャッシュが残っていて、それが読み込まれている可能性が高いです。

スーパーリロード

スーパーリロード(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

ビルドすると.wasmでなく.asmファイルが作られてしまう！

プロジェクトフォルダ内の
ProjectSettings/ProjectSettings.asset
をダブルクリックするなりしてメモ帳か何かで開きます。
webGLLinkerTarget: 1
に変更してください。
image.png

ゲームの更新方法

修正したゲームをビルドし直して、同じゲームIDに再アップします。
image.png

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

image.png
タイトル画面にバージョンナンバーを記入しておいて、更新する度に番号を更新することをお勧めします。
(見た目上の変化がないと、修正した最新版が反映されたのか、キャッシュに残った以前のバージョンが表示されているのか区別が付かないです)

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?