グレンジ Advent Calendar 2022 2日目担当の、flankidsです。
普段はインプット管理、カメラワーク作り、アニメーション制御などなどで遊び心地を作ることを主にやってるエンジニアをしています。

最近はゲームのモックアップを作ることが多いのですが、モバイル向けのアプリのビルドや公開って手順が多くて大変ですよね。

ささっと作ったオモチャみたいなゲームとか、インタラクティブなコンテンツのデモとかを公開したくなった時に小回りの効く手段を持っておくと便利だな〜と思い、今回はその選択肢のひとつとしてGithub Pagesでの公開方法を調べたのでまとめてみました。

もしお役に立てたら、LGTM(いいね)やストックをしてもらえるとスゴく嬉しいです！

こんなかんじで遊べます

WebGLビルドを公開して、PCでもブラウザでも気軽にアクセスしてすぐ触れるものを公開できます。

GitHub Pagesは、GitHubがユーザーに提供している静的ウェブページのためのウェブホスティングサービスです。
平たく言うと、htmlなどをGitリポジトリにプッシュしてWebページを公開することができる仕組みです。

補足: unityroomにアップしたらよいのでは？

今回Github Pagesで公開する方法をまとめていますが、WebGLでUnityゲームを公開する手段としては、unityroomがメジャーかなと思います。

unityroomは

純粋なビルドファイルのみをアップロードするだけでゲームを公開できる
共同制作者の登録で公開範囲が絞ることできる
Unityゲーム共有プラットフォームとして目に付きやすい

という強みがあります。とてもすごい。
一方、その手軽さ・シンプルさの代償として

ゲームを表示するページのhtmlの体裁をイジれない
広告の表示がある
バージョン管理ができない

という特徴もあります。
Github Pagesなら少し知らないといけないことが増える分自由度が上がり、後半３つのデメリットもないので試してみようと思った次第でした。

サンプルプロジェクト

冒頭に載せたゲームとWebGLテンプレートが入ったプロジェクトのリポジトリを公開しています。

概要

WebGLでプロジェクトをビルドする
GithubのリポジトリでPagesの設定をする
WebGLビルドをプッシュする
Github Pagesが生成するURLにアクセス
遊ぶ

1. WebGLでプロジェクトをビルドする

まずは普通にWebGLビルドをしてください。

ただし今回はモバイルでも遊べることを目標にしているので、ゲーム画面がブラウザ上でアスペクト比率を守りながらブラウザの縦サイズに自動でフィットするWebGLテンプレート 「DynamicResize」 を作成しました。
冒頭に記述したサンプルプロジェクトからパッケージファイルをダウンロードできます。
ぜひ使ってみてください。
DynamicResizeテンプレートの中身は後半に軽く解説します。

WebGLビルド方法は下記にざっくりまとめました。WebGLビルドをやったことがない方はご参考ください。

----------------------------------------
WebGLビルド手順を表示（折りたたみ）
------------------------------------------

Build SettingsでWebGLを選択して、Switch Platformでプラットフォーム切り替え（ちょっと長めの切り替え時間が入ります）

ビルド前の準備①
WebGLはスタンドアロンやモバイル実機向けのビルドに比べてパフォーマンス的な制約が多いです。
特に理由がなければ、Project SettingsのQualityで、WebGLのクオリティ設定をMediumかLowあたりにしておきましょう。

ビルド前の準備②
こちらも特に理由がなければ、Project SettingsのPlayerで、Publishing SettingsのCompression FormatをDisabledにしておきましょう。
圧縮フォーマットの設定を「非圧縮」にしています。これだと読み込み前の通信量が増えますが、圧縮すると解凍時のエラー周りで引っかかることが多いので、WebGLビルドをあまりやったことがなければまずは非圧縮にしておくことをオススメします。

ビルド前の準備③
Project SettingsのPlayerで、Resolution and Presentation内のWebGL Templateの設定を選択しましょう。
初期状態だと「Default」と「Minimal」のテンプレートがありますが、今回**「Dynamic Resize」**というテンプレートを用意してありますので、前述の通りそちらをインポートして、WebGL Templateの設定として選択してください。

設定が済んだのでビルドします。
Build Settingsでプラットフォームの選択がWebGLになっていることを確認して（「WebGL」の右にUnityマークが付いていればOK）、「Build」ボタンを押してください。

保存先を聞かれます。プロジェクトを管理してるGitリポジトリのどこかに保存してください。
特にこだわリがなければ。Unityプロジェクトを管理してるGitリポジトリのフォルダ直下にdocsという名前で保存しましょう。

2. GithubのリポジトリでPagesの設定をする

GitリポジトリでPagesが有効になるよう設定をします。

リポジトリのSettingsへ移動

Pagesタブへ移動

WebGLビルドをプッシュするブランチとフォルダを選択して、「Save」ボタンを押下して設定を保存します。

これでGitリポジトリでPagesが有効になりました。

3. WebGLビルドをプッシュする

あとは、設定したブランチ＆フォルダにビルドしたWebGLビルドをプッシュするだけでOKです。
リポジトリにプッシュが入ると、ActionsページでWebページの更新ワークフローが実行されている様子が確認できます。

ワークフローが成功で終了していたらOKです。

4. Github Pagesが生成するURLにアクセス

先ほどのSettingsのPagesの画面の上部の表記が変化しています。
このURLがGithub Pagesによって公開されているページです。

そのままアクセスしたらビルドしたゲームがプレイできます！

5. 遊ぶ

あとはアクセスして、動作に問題がないか確認してみてください。
問題なければ、URLをSNSで公開してみんなに触ってもらったりチームに共有して動きを確認してもらったり、自由に公開してみましょう。

動画やサムネイル付きで公開するとアクセスされやすいかも。

所感

そこまで複雑なことなくサクッと設定してアップすることができました。
冒頭で記載したような気軽に何か製作したものを公開するのに向いていそうです。特にスマホゲームではその恩恵が大きいです。

また、クローズドな開発でも非エンジニアのメンバーがUnityプロジェクトを起動せずとも気軽にプレイできるように公開したり、マスタの調整などPCとモバイルの目線を行き来しないといけないような作業をPCだけで完結できるようにしたり、いろいろメリットがありそうです。

あくまでモックアップや小規模なプロダクトでのみ通用するやり方だと思いますが、使い勝手がよいため今後もうまく利用していきたいと感じました。

お読み頂きありがとうございました！
もしお役に立てたら、LGTMしていただけるととても励みになります！

補足：リポジトリの管理について

WebGLビルドを公開するにはリポジトリがpublicになっている必要があります。
しかしソースコードやアセットは公開したく無いことがほどんどだと思うので、ゲーム開発用のprivateリポジトリと、WebGLビルド公開用のpublicリポジトリを分けて管理するのが良さそうです。

またprivateリポジトリでもアクセス権があるユーザーなら、URLにアクセスした際にログイン画面が表示された後、通常通りプレイできます。

補足：DynamicResizeテンプレートについて

デフォルトのWebGLのテンプレートはDefaultとMinimalの２種類が用意されています。
今回はDefaultを複製して、ゲーム画面がブラウザ上でアスペクト比率を守りながらブラウザの縦サイズに自動でフィットするWebGLテンプレート 「DynamicResize」 を作成しました。

複製元のDefaultテンプレートはUnityをインストールしてる場所から以下の階層に格納されており、こちらを利用しました。

Unity/Hub/Editor/(Unityバージョン)/PlaybackEngines/WebGLSupport/BuildTools/WebGLTemplates/Default

※DynamicResizeテンプレートはUnity2020.3系のDefaultテンプレートがベースです

Defaultの一部ファイルに下記の差分を入れています。テンプレート自体はそのまま使えますが、内容が気になる方はご参考ください。

----------------------------------------
Default→DynamicResizeへの差分を表示（折りたたみ）
------------------------------------------

ブラウザの縦サイズに自動でフィットする処理はdynamicResize.jsというJavaScriptファイルに記述しています。
そのJavaScriptファイルを使用するための記述をheadに追加しています。

index.html

    <link rel="stylesheet" href="TemplateData/style.css">
+   <script type="text/javascript" src="dynamicResize.js"></script>
  </head>

モバイル端末でアクセスした時に表示する警告を削除しています。

index.html

  </div>
- <div id="unity-mobile-warning">
-   WebGL builds are not supported on mobile devices.
- </div>
  <div id="unity-footer">

上に同じ。

index.html

  var fullscreenButton = document.querySelector("#unity-fullscreen-button");
- var mobileWarning = document.querySelector("#unity-mobile-warning");

  // By default Unity keeps WebGL canvas render target size matched with

DefaultテンプレートではPCとモバイルでアクセスした時の体裁が異なりますが、その差異を削除しています、

index.html

       // config.matchWebGLToCanvasSize = false;
 
-      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
-        container.className = "unity-mobile";
-        // Avoid draining fillrate performance on mobile devices,
-        // and default/override low DPI mode on mobile browsers.
-        config.devicePixelRatio = 1;
-        mobileWarning.style.display = "block";
-        setTimeout(() => {
-          mobileWarning.style.display = "none";
-        }, 5000);
-      } else {
-        canvas.style.width = "{{{ WIDTH }}}px";
-        canvas.style.height = "{{{ HEIGHT }}}px";
-      }
+      config.devicePixelRatio = 1;
 #if BACKGROUND_FILENAME

cssファイルの調整です。
こちらもPCとモバイルの差異が出ないように差分が入っています。

style.css

 #unity-container { position: absolute }
-#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
-#unity-container.unity-mobile { width: 100%; height: 100% }
+#unity-container { width: 100%; height: 100% }
+#unity-container { justify-content: center; align-items: center; display: flex }
+#unity-container { background: {{{ BACKGROUND_COLOR }}} }
 #unity-canvas { background: {{{ BACKGROUND_COLOR }}} }
-.unity-mobile #unity-canvas { width: 100%; height: 100% }
+#unity-canvas { width: 100%; height: 100% }
 #unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }

上に同じ。

style.css

 #unity-footer { position: relative }
-.unity-mobile #unity-footer { display: none }
+#unity-footer { display: none }
 #unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }

ブラウザの縦サイズに自動でフィットする処理のために追加したJavaScriptファイルです。
UnityのProjectSettingsで指定された解像度を参照してアスペクト比を決め、アスペクト固定でブラウザにフィットするように拡大しています。

また、PCなどでブラウザサイズを変えた場合にも対応しています。（window.addEventListenerのあたり）

dynamicResize.js

var canvas;

function initialize() {
    canvas = document.querySelector("#unity-canvas");
}

document.addEventListener('DOMContentLoaded', function(event){
    initialize();
    resize();
});

function resize() {
    var width = {{{ WIDTH }}};
    var height = {{{ HEIGHT }}};
    canvasAspectRatio = width / height;

    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;

    var aspectWindowHeight = windowWidth / canvasAspectRatio;
    if(aspectWindowHeight > windowHeight) {
        windowWidth = windowHeight * canvasAspectRatio;
    }
    else {
        windowHeight = aspectWindowHeight;
    }
    canvas.style.width = windowWidth + 'px'
    canvas.style.height = windowHeight + 'px'
}

let resizeTimer;
window.addEventListener('resize', function() {
    // 動的なリサイズは操作後0.2秒経ってから処理を実行する
    clearTimeout(resizeTimer)
    resizeTimer = setTimeout(function () {
        resize();
    }, 200)
})