UnityのWebGLビルドされたROMをVSCodeでサクッと確認できるようにする
UnityでWebGLのビルドをしたものを確認する方法はいくつかありますが、色々ややこかったりします。
WebGLのROMだけ渡してややこしい設定なしでサクッとブラウザから確認してもらいたい、って時あるんですよね。
なので、サクッと見れるようにする方法を紹介します。
※これに合わせたUnityでのWebGLビルドについては後日別で書く予定
使うツール
- WindowsのPC
- VSCode バージョン：基本最新でOK(この時は1.93.1)
VSCodeの準備
VSCode本体のインストール
まずはVSCodeをインストール。
自分のPCに合わせてインストールしてください。
インストーラをダウンロードして
インストーラ実行して
「エクスプローラーのディレクトリコンテキストメニューに[Codeで開く]アクションを追加する」にチェック。
このまま次へ進んでいってインストールを進めてセットアップ完了までいけばOKです。
プラグイン：Live Serverのインストール
①左側にある▢が4つのアイコン(拡張メニュー)をクリックすると拡張機能一覧が表示される。
②上部にある検索窓に「LiveServer」と入力するとRitwickDey氏作のLiveServerが出てくるのでそれをクリック。
③インストールボタンが出るので、インストールをクリック。
右下に「Go Live」という表示がでたらOK！
準備完了
これでいつでもLiveServerでPC内webサーバを利用できるようになりました。
次は使い方について説明していきます。
WebGLのROMをプレイする
対象のROMディレクトリをエクスプローラで開く
ROMの入っているディレクトリがあるところまで移動する。
VSCodeで開く
ROMの入ってるディレクトリを右クリックして、メニュー内にある「Codeで開く」でVSCode上でそのディレクトリを開く。
VSCodeでLiveServerを起動する
右下の「Go Live」をクリックするとLiveServerが起動します。
「Go Live」の表示が「Port：5500」って表示になったらOK
実際にWebGLのROMで遊ぶ
↑の手順を踏むと既にブラウザが立ち上がって↓のページが開かれる。 もし開いてない場合は↑のリンクを開いて貰えればOK。
これでゲームプレイできるようになる！
トラブルシューティング
以下のような状態になってゲーム画面にいかない
原因
webglビルドの圧縮指定があり、現在の環境ではその圧縮方法でのプレイができないのが問題。
解決方法
ビルド担当者に「無圧縮でのビルド」を依頼してください。
Player Setting → Publishing Settings → Compression Format：Disabled
でビルドすればOK。
※LiveServer側でのヘッダ指定する方法分かる人いたら是非教えて下さい
Discussion