強火で進め

このブログではプログラム関連の記事を中心に書いてます。

WebGL 出力時に Unity 側のプログラムとブラウザの JavaScript とやりとりをする方法

Unity 側のプログラムからブラウザの JavaScript 関数を実行する方法は基本的な部分は Web Player の時と同様です。

UnityのWeb PlayerとWebページ上のJavaScriptとでデータのやり取りをするサンプル - 強火で進め
http://d.hatena.ne.jp/nakamura001/20110606/1307350528

今見てみると公式ドキュメントとかリンク切れになってますね。自分が自作したサンプルコードなんかは見る事ができます。
Web Player 出力は非推奨になってるのでもうドキュメント無くなってるのかな?
これからは WebGL 出力を使うようにしましょう。

Unity 側のプログラム → ブラウザの JavaScript

Application.ExternalCall

自分が定義した JavaScript の関数を呼ぶ場合には Application.ExternalCall() を使います。
引数を複数指定する事も可能です。


【使用例】
Unity側

Application.ExternalCall("MyFunction1");
Application.ExternalCall("MyFunction2", "Hello from Unity!");
Application.ExternalCall("MyFunction3", "one", 2, 3.0F);

ブラウザの JavaScript

	    var result;
	    window.onload = function()
		{
		    result = document.getElementById("result");
		};
	    function MyFunction1() {
		    result.innerHTML = "[MyFunction1]";
	    }
	    function MyFunction2(arg) {
		    res = "[MyFunction2]<br>";
		    // 引数が1つと確定している時
		    res += "arg:"+arg;
		    result.innerHTML = res;
	    }
	    function MyFunction3(arg) {
		    res = "[MyFunction3]<br>";
		    res += "arg:"+arg+"<br>";
		    // 引数の数が確定してない時
			for (var i = 0; i < arguments.length; i++) {
			    res += "arguments[" + i + "]" + arguments[i]+"<br>";
    		}
		    result.innerHTML = res;
	    }

Unity - スクリプティング API: Application.ExternalCall
https://docs.unity3d.com/jp/460/ScriptReference/Application.ExternalCall.html

Application.ExternalEval

Application.ExternalEval() は JavaScript の eval() と同等の動作をします。


【使用例】
Unity側

Application.ExternalEval("alert('hoge');");
Application.ExternalEval("history.back()");

Unity - スクリプトリファレンス: Application.ExternalEval
https://docs.unity3d.com/jp/current/ScriptReference/Application.ExternalEval.html

ブラウザの JavaScript → Unity 側のプログラム

以下の記述を WebGL ビルドのテンプレート(※)部分に記述する事で Unity 側のでプログラムにデータを送れます。
WebGL ビルド時のテンプレートについてはこちらを参照下さい。

ブラウザ側でデータの入力と出力を行う場所を追加。

		<div>
		ここにテキストを入力:<input id="input_text" type="input" value="abc"><input onClick="SendTextToUnity()" type="button" value="Send">
		</div>
		<div>
		[Unity側からのアクションの結果]<div id="result" />
		</div>

ボタンが押された時に Unity(Canvas) 側にデータを送る処理を JavaScript で記述。

	    function SendTextToUnity() {
			var inputText = document.getElementById("input_text");
			SendMessage ('TestScript', 'FromJS', inputText.value);
		};

実際にどこにどの様に差し込むかは Assets/WebGLTemplates/Custom/index.html を参照下さい。テンプレートは Default をベースにCSSファイル( Assets/WebGLTemplates/Custom/TemplateData/style.css )の一部内容を修正しました。

サンプル

こちらで実際に体験できます。 WebGL 対応のブラウザで開いて下さい。
※初回時には環境によってローディングに時間がかかります。

ソースコード

全体のソースコードこちらで確認できます。