#概要
UnityのWebGLプラットフォームで、FirebaseやStripeといった外部サービスのJavaScriptライブラリを使いたかったので、そのときに必要だった手順をまとめました。
#WebGLTemplatesの用意
公式ページにあるように
Assets/WebGLTemplates/テンプレート名/
に以下のファイルを作成します。
使いたいライブラリも記述します。
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | %UNITY_WEB_NAME%</title>
<!--使いたいライブラリを追加-->
<script src="%UNITY_WEBGL_LOADER_URL%"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%");
</script>
</head>
<body>
<div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px; margin: auto"></div>
</body>
</html>
#C#←→JavaScriptの連携について
C#とブラウザのJavaScriptと連携する方法も公式ページにあります。
軽く手順説明します。
###C#→JavaScript
Assets/Plugins/
以下にこのようなファイルを作成します。
mergeInto(LibraryManager.library, {
Hello: function () {
//外部ライブラリを使った処理
},
});
そして以下のようなコードを書き、WebGLでビルドすると
C#からtest.jslibのHello関数を通して、外部ライブラリの処理呼ぶことができます。
using UnityEngine;
using System.Runtime.InteropServices;
public class NewBehaviourScript : MonoBehaviour
{
[DllImport("__Internal")]
private static extern void Hello();
void Start()
{
Hello();
}
}
###JavaScript→C#
話が脱線しますがこちらも
WebGLTemplatesのindex.htmlでこのように書きます。
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | %UNITY_WEB_NAME%</title>
<script src="%UNITY_WEBGL_LOADER_URL%"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "%UNITY_WEBGL_BUILD_URL%");
gameInstance.SendMessage('MyGameObject', 'MyFunction', 5);
</script>
</head>
<body>
<div id="gameContainer" style="width: %UNITY_WIDTH%px; height: %UNITY_HEIGHT%px; margin: auto"></div>
</body>
</html>
公式ページに明記されてないと思いますが、以下のように書く必要がありました。
gameInstance.SendMessage('MyGameObject', 'MyFunction', 5)
#ちょっと工夫
jslibにコードを書いて動作確認をするには、毎回プロジェクトをビルドする必要があります。(よね？)
結構時間がかかって大変だったので、私はWebGLTemplatesにJavaScriptファイルを作成して
ビルド後に一緒に吐き出されるそのファイルを編集して確認していました。
また、index.htmlにボタンを追加し、jslibからは実行せずに、そのボタンによってJavaScriptの処理が実行されるようにしました
#####動作的には
- シーンに応じてC#→jslibでボタンを有効化無効化 (タイトル画面でログインボタンを有効にするとか)
- ボタンでJavaScriptを実行
- JavaScriptの処理結果をC#に渡す
という感じです。
#記事を書いたときの環境
Unity 2018 3.8f1