サーバーでunityのゲーム(?)を公開する

ノベルゲームを公開できないかなあと思い，とりあえず

【C#】Unity 2Dでできるだけ簡単にアドベンチャーゲーム(ノベルゲーム)を作る その１ - Kanchiの日記

この文字が流れるだけのアプリを公開できるか試してみました

バージョン

Unity 2020.1.6f1 Personal

設定

safariの人もプレイできるようにしたいのでとりあえずWebGL2.0ではなくWebGL1.0を使いました．

• Edit->Build Settings からPlatformをWebGLに
• さらにEdit->Build Settings->Player Settings->Playerで，
  • Publishing Settings->Compression FormatをDisabledに（ファイルの容量は増えてしまいますが，これをしないとこのバージョンではUncaught ReferenceError: unityFramework is not definedエラーが起こります）
  • Other Settings->Graphics APIsの+ボタンを押してWebGL 1.0を追加，上に持っていく
  • Other Settings->Color SpaceをLinerからGammaに(WebGL1.0では対応していないため)
• CanvasのCanvasScalerでScreenMatchModeをShrinkへ

これでbuild&runして，できたフォルダをサーバーに移動してindex.htmlを参照すれば見ることができます．

例: naomiatlibrary.com/unity_novelgame

備考:ProxyPassで/以下にアクセスするとreactのサーバ(ポートフォリオ)に飛ばすようになっていたので，httpd.confを編集して

ProxyPass /unity_novelgame/ !

を追加し除外しました．

スマホへの対応

macでsafari, Chrome, Edge, firefoxで確認したところちゃんと見ることができましたが，Androidで確認するとレイアウトが崩れていました．

とりあえずこれを参考にして，ちょっとビルドした後のindex.htmlを変更しました． Unity WebGL ブラウザの大きさに合わせる - Qiita

以下の部分を次のように変更します．

<div id="unity-container" class="unity-desktop" style="text-align: center;">

(styleの追加)

if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
        //container.className = "unity-mobile";
        config.devicePixelRatio = window.devicePixelRatio;
        container.style.overflow = 'hidden';
        container.style.width = window.innerWidth + 'px';
        container.style.height = window.innerHeight + 'px';
        canvas.style.width  =Math.min(window.innerHeight*960/600,window.innerWidth)+"px";
        canvas.style.height =Math.min(window.innerWidth*600/960,window.innerHeight)+"px";
      } else { 

(スマホなどからのアクセスの時の処理)

こうすると，スマホなどからアクセスした時に以下のようになり，とりあえずレイアウトが崩れなくなりました．(これがいいやり方なのかは知りませんが)

(Androidで検証)

横

縦