xxxmammom2410の日記

UnityWEBGL ←→Javascript

Unity

WEBGLの全画面表示

📂TemplateData>style.css

#unity-container.unity-desktop {width: 100%; height: 100%}
#unity-canvas { background: #231F20; width: 100%; height: 100%}

UnityC# から Javascript関数を呼び出す

Javascript プラグインを作成

📂Assets>Plugins>HOGE_Plugin>.jslibを作成

 //登録する関数をオブジェクトのメソッドとして記述
 var HogePlugin ={

     //メソッド外で使用する変数やオブジェクトがある場合はプレフィックスに$をつけて宣言($hogeObj)
     //メソッドでの使用時には$を外す（hogeObj）
   $hogeObj: { hoge: 'fuga', piyo: 2},  

     //引数を取らないメソッド
   Hello: function () {
     window.alert("Hello jslib");
   },

     //引数をとるメソッド
   HelloString: function (str) {
         //ストリング型の引数を取る場合はUTF8ToString()でポインタから文字列を取得する
     window.alert(UTF8ToString(str));
         //メソッド外のオブジェクトの利用
     console.log(hpObj);
     window.hpObj = hpObj;
     window.alert(JSON.stringify(testOBJ));

     //UnityC#への戻り値がストリング型の場合はポインタで返す
     var ret = 'hogehoge';
     var size = lengthBytesUTF8(ret) + 1; // null文字終端となるため+1
     //メモリを確保
         var ptr = _malloc(size);
     stringToUTF8(ret, ptr, size); // この関数でHEAPxxxに書き込まれる
     return ptr;
   },


 //複数関数で共通して使用するオブジェクトは別途宣言
 autoAddDeps(HogePlugin, '$hogeObj');

 //作成したプラグインオブジェクトをUnityに登録
 mergeInto(LibraryManager.library, HogePlugin);

UnityC#からJavascript関数を呼び出す

 using UnityEngine;
 using System.Runtime.InteropServices;
 using System;

 public class JSPlugin : MonoBehaviour
 {
     private string value; 

         //.jslibのメソッドを読み込み
     [DllImport("__Internal", EntryPoint = "Hello")]
     private static extern void HogeHoge(); // C#から呼ぶJavaScriptの関数、別名指定

     [DllImport("__Internal")]
     private static extern string HelloString(string str);  // C#から呼ぶJavaScriptの関数


     void Start()
     {
         HogeHoge();
                 //Javascript関数の戻り値を取得
         value = HelloString("HelloString JS_Func is Called");
         Debug.Log(value);
     }

 }

JavascriptからUnityC#の関数を呼び出す

Unityオブジェクトにスクリプトを割り当て

 using UnityEngine;
 using System.Runtime.InteropServices;
 using System;

 public class UnityScript : MonoBehaviour
 {
     public void HogeMethod(string json)
     {
         Debug.Log(json);
     }
 }

index.html内のloader.jsで作成されるUnityインスタンスを取得

 let unity; // unityインスタンスを保存する変数を宣言

 var script = document.createElement("script");
     script.src = loaderUrl;
     script.onload = () => {
       createUnityInstance(canvas, config, (progress) => {
         progressBarFull.style.width = 100 * progress + "%";
       }).then((unityInstance) => {
         loadingBar.style.display = "none";
         fullscreenButton.onclick = () => {
           unityInstance.SetFullscreen(1);
         };

         unity = unityInstance; // unityインスタンスをグローバルスコープに公開

       }).catch((message) => {
         alert(message);
       });
     };
     document.body.appendChild(script);

SendMessage(Object,Method,Prop)でUnityC#の関数を使用
```
 //引数は一つしか取れないため、複数要素を渡す場合はJSONをシリアライズ/デシリアライズして渡す
 unity.Module.SendMessage('UnityObject', 'HogeMethod', JSON.stringify({
           prop1: "val1", prop2: val2
         }));
```
※UnityC#からの戻り値はそのまま呼び出し元のJavascriptでは使えないため、戻り値を使用する場合は.jslibのライブラリからグローバルスコープへ公開する

Javascript ---> UnityC# ---> Javascript プラグイン(.jslib) --->Javascript グローバル変数

Javascriptから.jslibを呼び出す

Javascript プラグインを作成
📂Assets>Plugins>HOGE_Plugin>.prejsを作成

    //Moduleオブジェクトに名前空間を作成してメソッドを登録
    Module["MySample"] = {
      sayHello() {
        alert("Hello Module");
      },
    };

※ModuleオブジェクトはUnityインスタンスで用意された関数(SetFullscreenなど)をまとめているオブジェクト
2. index.html内のloader.jsで作成されるUnityインスタンスを取得
3. Moduleオブジェクトに登録されたメソッドを呼び出し

unity.Module.MySample.sayHello(); // prejsのsayHelloを呼ぶ

参考URL