カスタマイズする用のファイルを出力する
最初にWebGLのビルドを行い、カスタマイズする用のファイルを出力します。
- WebGLにプラットフォームを切り替え
- 切り替え後、任意のフォルダにビルドします
カスタムテンプレート用のフォルダを作成
- Assets配下に、WebGLTemplatesフォルダを作成
- WebGLTemplates配下に、任意のフォルダを作成します
- 作成したフォルダに、カスタマイズする用のファイルを出力するで出力したindex.htmlとTemplateDataをコピーします
index.htmlの編集
index.htmlを下記のように書き換えます。
var buildUrl = "Build";
- var loaderUrl = buildUrl + "/新しいフォルダー.loader.js";
+ var loaderUrl = buildUrl + "/{{{ LOADER_FILENAME }}}";
var config = {
- dataUrl: buildUrl + "/新しいフォルダー.data.br",
- frameworkUrl: buildUrl + "/新しいフォルダー.framework.js.br",
- codeUrl: buildUrl + "/新しいフォルダー.wasm.br",
+ dataUrl: buildUrl + "/{{{ DATA_FILENAME }}}",
+ frameworkUrl: buildUrl + "/{{{ FRAMEWORK_FILENAME }}}",
+ codeUrl: buildUrl + "/{{{ CODE_FILENAME }}}",
streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany",
productName: "SampleWebGL",
productVersion: "1.0",
showBanner: unityShowBanner,
};
新しいフォルダーの部分は、出力したフォルダ名となっていると思います。
そのままにしておくと、出力先のフォルダを変えた場合、エラーとなるので、出力先を変えても問題ないように内部プリプロセッサ変数という変数にしています。
https://docs.unity3d.com/ja/2022.3/Manual/webgl-templates.html
起動テストをする
一度、起動が問題ないかテストをします。
-
File - Build Settings - Player Settingsを開きます
-
WebGLのタブを選択します
-
Resolution and Presentation - WebGL Templateで、カスタムテンプレート用のフォルダを作成で作成したフォルダ名のテンプレートを選択します
-
File - Build Settings - Build And Runで、最初のビルドと別のフォルダを選択し、表示できるか確認してください
カスタマイズする
起動が問題なければ、index.htmlを編集したり、任意のJavascriptを読み込ませて、利用したり、カスタマイズが可能です。
ローカルサーバーを起動する
Unityから実行する場合は問題ないですが、ビルドで出力したhtmlを表示するときはサーバーを立てないとエラーになります。
（Unityから実行するときは、Unityが自動でサーバーを起動してくれています）
ビルドで出力したhtmlを表示するときは、DockerでApacheなどのサーバーを立てて確認するのが便利ですが、一つ注意点があります。
それは、圧縮したファイルがサーバー側で読み込めるかという点です。
Project Settings > Player > Publishing Settings > CompressionFormatを確認してみてください。
デフォルトだとBrotliが設定されていると思いますが、個々の設定に応じて、Buildフォルダに出力されるファイルが圧縮されます。
(ビルドの出力先に選択したフォルダのBuildフォルダを確認してください）
Apacheの場合は圧縮したファイルを読み込めるように設定が必要みたいなので、設定をするか、Project Settings > Player > Publishing Settings > CompressionFormatをDisableに変更し、圧縮せずに出力する必要があります。