Unity WebGL交互通信

Unity 调用 H5

本文使用的 unity 版本为:2021.3.3

1.在unity中通过c#的特性DllImport导出外部实现函数

csharp 复制代码
    [DllImport("__Internal")]
    private static extern void callJsString(string param);
    [DllImport("__Internal")]
    private static extern void callJsInt(int param);
    [DllImport("__Internal")]
    private static extern void callJsFloat(float param);
    [DllImport("__Internal")]
    private static extern void callJsBoolean(bool param);

2.在unity的Plugins文件夹(没有则创建一个)里面创建一个后缀为.jslib的文件

3.在xxx.jslib文件中实现函数,如下

javascript 复制代码
mergeInto(LibraryManager.library, {

  callJsString: function (param) {
     console.log(Pointer_stringify(param));
  },

  callJsInt: function (param) {
       console.log(param);
  },
  
   callJsFloat: function (param) {
       console.log(param);
  },
   callJsBoolean: function (param) {
       console.log(param);
  },
});

注意: 使用传参字符串的时候,使用Pointer_stringify转下字符串,否则可能会报错或者乱码

4.如果想要调用.js里面的接口或者.html里面的方法,可以通过往window里面注册函数进行调用的方式

例如:在index.html里面注册函数 window.httpPost = httpPost;

javascript 复制代码
<script>
   function httpPost(url, params) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && (xhr.status >= 200 && xhr.status < 300)) {
                let data = xhr.response;
                console.log("Status: " + xhr.status + " " + xhr.statusText + "  data: " +         data);
                success(data);
            }
            else if (xhr.status >= 400) {
                console.log("Status: " + xhr.status + " " + xhr.statusText);
                fail(xhr.status, xhr.statusText)
            }
        }
        console.log("Status: Send Post Request to " + url);
        xhr.open("POST", url, true);
        //xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.timeout = 10000;

        xhr.send(params);
    }

   window.httpPost = httpPost;
</script>

5.可以在xxx.jslib文件中调用index.html里面的httpPost函数,当时也可以直接把函数实现直接放在xxx.jslib文件中

javascript 复制代码
mergeInto(LibraryManager.library, {

  callJsString: function (url,params) {
     window.httpPost(Pointer_stringify(url),Pointer_stringify(params)); 
  },
});

6.上面的方式可以让我们在案例httpPost调用其他位置的.js代码或者其他位置的插件

H5调用 Unity

1.这里的方式主要是在index.html文件中在创建unityInstance的时候通过缓存unityInstance并向unityInstance发送消息的方式实现

2.在index.html中创建unityInstance的时候缓存unityInstance

这里通过:window.unityInstance = unityInstance; 缓存了unityInstance实例

javascript 复制代码
         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);
                };
                window.unityInstance = unityInstance;
              }).catch((message) => {
                alert(message);
              });
            };

3.向unity发送消息

gameobjectName:接收消息的gameobject名

funcName:方法名

param:参数,字符串,可以传json

javascript 复制代码
 function sendUnityMessage(gameobjectName,funcName,param) 
 {
      if(window.unityInstance)
      {
         window.unityInstance.SendMessage(gameobjectName,funcName,param);
      }
 }
相关推荐
咩咩觉主1 小时前
尽量通俗易懂地概述.Net && U nity跨语言/跨平台相关知识
unity·c#·.net·.netcore
墨笺染尘缘2 小时前
Unity——对RectTransform进行操作
ui·unity·c#·游戏引擎
AgilityBaby2 小时前
FairyGUI和Unity联动(入门篇)
unity·游戏引擎
a482242513 小时前
前端交互展示:裂缝与凹痕分割
前端·交互
一步一个foot-print15 小时前
C# unity 星期几 年月日控制
unity·c#
PM大明同学20 小时前
Axure PR 9 多级下拉选择器 设计&交互
交互·axure·photoshop
无敌最俊朗@21 小时前
unity3d————Sprite(精灵图片)
学习·游戏·unity·c#·游戏引擎
程序员正茂1 天前
PICO+Unity MR空间网格
unity·mr·pico
程序员正茂1 天前
PICO+Unity MR空间锚点
unity·pico·空间锚点