WebGL：与浏览器脚本交互

构建适用于 Web 的内容时，可能需要与网页上的其他元素进行通信。或者，您可能希望使用 Unity 当前在默认情况下未公开的 Web API 来实现功能。在这两种情况下，都需要直接与浏览器的 JavaScript 引擎连接。Unity WebGL 提供了不同的方法来执行此操作。

从 Unity 脚本调用 JavaScript 函数

在项目中使用浏览器 JavaScript 的建议方法是将 JavaScript 源代码添加到项目中，然后直接从脚本代码中调用这些函数。为此，请使用 .jslib 扩展名将包含 JavaScript 代码的文件放置在 Assets 文件夹中的“Plugins”子文件夹下。插件文件需要有如下所示的语法：

mergeInto(LibraryManager.library, {

  Hello: function () {

    window.alert("Hello, world!");

  },

  HelloString: function (str) {

    window.alert(Pointer_stringify(str));

  },

  PrintFloatArray: function (array, size) {

    for(var i = 0; i < size; i++)

    console.log(HEAPF32[(array >> 2) + i]);

  },

  AddNumbers: function (x, y) {

    return x + y;

  },

  StringReturnValueFunction: function () {

    var returnStr = "bla";

    var bufferSize = lengthBytesUTF8(returnStr) + 1;

    var buffer = _malloc(bufferSize);

    stringToUTF8(returnStr, buffer, bufferSize);

    return buffer;

  },

  BindWebGLTexture: function (texture) {

    GLctx.bindTexture(GLctx.TEXTURE_2D, GL.textures[texture]);

  },

});

然后，可从 C# 脚本调用这些函数，如下所示：

using UnityEngine;

using System.Runtime.InteropServices;

public class NewBehaviourScript : MonoBehaviour {

    [DllImport("__Internal")]

    private static extern void Hello();

    [DllImport("__Internal")]

    private static extern void HelloString(string str);

    [DllImport("__Internal")]

    private static extern void PrintFloatArray(float[] array, int size);

    [DllImport("__Internal")]

    private static extern int AddNumbers(int x, int y);

    [DllImport("__Internal")]

    private static extern string StringReturnValueFunction();

    [DllImport("__Internal")]

    private static extern void BindWebGLTexture(int texture);

    void Start() {

        Hello();

        HelloString("This is a string.");

        float[] myArray = new float[10];

        PrintFloatArray(myArray, myArray.Length);

        int result = AddNumbers(5, 7);

        Debug.Log(result);

        Debug.Log(StringReturnValueFunction());

        var texture = new Texture2D(0, 0, TextureFormat.ARGB32, false);

        BindWebGLTexture(texture.GetNativeTexturePtr());

    }

}

简单的数字类型可在函数参数中传递给 JavaScript，无需进行任何转换。其他数据类型将作为 emscripten 堆（实际上就是 JavaScript 中的一个大型数组）中的指针进行传递。对于字符串，可使用 Pointer_stringify helper 函数转换为 JavaScript 字符串。要返回字符串值，必须调用 _malloc 来分配一些内存，并调用 stringToUTF8 helper 函数向其中写入 JavaScript 字符串。如果字符串是返回值，则 il2cpp 运行时将负责为您释放内存。对于原始类型的数组，emscripten 针对内存的不同大小的整数、无符号整数或浮点数表示形式，提供其堆的不同 ArrayBufferViews：__HEAP8、HEAPU8、HEAP16、HEAPU16、HEAP32、HEAPU32、HEAPF32、HEAPF64__。为了在 WebGL 中访问纹理，emscripten 提供了 GL.textures 数组，该数组将本机纹理 ID 从 Unity 映射到 WebGL 纹理对象。可在 emscripten 的 WebGL 上下文 GLctx 中调用 WebGL 函数。

有关如何与 JavaScript 交互的更多信息，请参阅 emscripten 文档。

另外，请注意，在 Unity 安装文件夹中有几个插件可供参考（位于 PlaybackEngines/WebGLSupport/BuildTools/lib 和 PlaybackEngines/WebGLSupport/BuildTools/Emscripten/src/library* 中）。

从 JavaScript 调用 Unity 脚本函数

有时需要从浏览器的 JavaScript 向 Unity 脚本发送一些数据或通知。建议的做法是调用内容中的游戏对象上的方法。如果要从嵌入在项目中的 JavaScript 插件执行调用，可使用以下代码：

unityInstance.SendMessage(objectName, methodName, value);

其中，__objectName__ 是场景中的对象名称；__methodName__ 是当前附加到该对象的脚本中的方法名称；__value__ 可以是字符串、数字，也可为空。例如：

unityInstance.SendMessage('MyGameObject', 'MyFunction');

unityInstance.SendMessage('MyGameObject', 'MyFunction', 5);

unityInstance.SendMessage('MyGameObject', 'MyFunction', 'MyString');

如果希望从嵌入页面的全局作用域内执行调用，请参阅下面的代码可见性部分。

从 Unity 脚本调用 C 函数

由于 Unity 使用 emscripten 将源代码从 C/C++ 代码编译为 JavaScript，因此您也可以使用 C/C++ 代码编写插件，并从 C# 调用这些函数。因此，您可以不使用上面示例中的 jslib 文件，而是在项目中使用 C/C++ 文件；它将自动使用您的脚本实现编译，并且您可以从中调用函数，就像上面的 JavaScript 示例一样。

如果使用 C++ (.cpp) 来实现该插件，则必须确保使用 C 链接来声明函数以免发生名称错用问题：

# include <stdio.h>

extern "C" void Hello ()

{

    printf("Hello, world!\n");

}

extern "C" int AddNumbers (int x, int y)

{

    return x + y;

}

代码可见性

从 Unity 5.6 开始，所有构建代码都在自己的范围内执行。这种方法可以将内容嵌入任意页面，而不会与嵌入页面代码发生冲突，并且可以在同一页面上嵌入多个构建版本。

如果项目中包含 .jslib 插件形式的所有 JavaScript 代码，则此 JavaScript 代码的运行作用域将与编译的构建相同，并且代码应该与 Unity 先前版本中的工作方式非常相似（例如，以下对象和函数应该在 JavaScript 插件代码中直接可见：Module、SendMessage、HEAP8、ccall 等）。

但是，如果计划从嵌入页面的全局作用域调用内部 JavaScript 函数，则必须在 WebGL 模板 index.html 中使用 unityInstance 变量。在 Unity 引擎实例化成功后执行此操作，例如：

  var myGameInstance = null;

    script.onload = () => {

      createUnityInstance(canvas, config, (progress) => {...}).then((unityInstance) => {

        myGameInstance = unityInstance;

        …

然后可以使用 myGameInstance.SendMessage() 向构建发送消息，或使用 myGameInstance.Module 访问构建 Module 对象。

方案如下：

1.在Unity场景中有一个GameObject，我们命名为A，

A上有C#脚本，里面有个方法

public void Func(string str)

{

//处理逻辑

}

2.在发布出的WebGL项目index.html中用JS调用此方法

<script>

var gameInstance = UnityLoader.Instantiate("gameContainer", "Build/WebAndUnity.json",{onProgress:UnityProgress});

function testSend()

        {

                gameInstance.SendMessage("A", "Func", "string");

        }

</script>

需要注意的就是gameInstance，先要初始化出一个gameInstance，如上代码，再用gameInstance调用SendMessage方法。

这段代码的大概意思就是：web前端通过unityloader创建一个unity的容器实例，再通过容器实例给游戏对象A发送一个调用Func函数的消息，并且传入一个string参数。

注：可以传递的参数类型：int ，string，空。

Unity项目可以打包成WebGl，打包后的项目文件：

Build中是打包后的Js代码；

Index.html是web项目的入口，里面可以调整web的自适应，也可以拿去嵌套；

TemplateData是打包时候选的webGl模板；

web端游戏可能Unity只负责做游戏部分，而官网由另外的团队制作，之间就需要Unity和Js代码之间的相互调用；

Unity调用JavaScript

声明一下，这里说的都是Unity和外部JS代码的互相调用，项目内调用有其他方法；

老版本提供一个过时的方法：

1.在WebGL项目中的Index.html中添加要调用的JS方法

functionUnity2JavaScript() {alert("UnityToWeb") }

2.Unity中调用

Application.ExternalCall("Unity2JavaScript");//可以有参数，没有返回值//Application.ExternalCall("Unity2JavaScript",a,10,"aaaa");

Unity建议使用的方法：

1.在Plugins文件夹中，创建后缀为.jslib的文件，在其中写需要调用的js代码

mergeInto(LibraryManager.library, {Hello:function() {window.alert("Hello, world!");  },HelloString:function(str) {window.alert(Pointer_stringify(str));  },PrintFloatArray:function(array, size) {for(vari =0; i < size; i++)console.log(HEAPF32[(array >>2) + size]);  },AddNumbers:function(x, y) {returnx + y;  },StringReturnValueFunction:function() {varreturnStr ="bla";varbuffer =_malloc(lengthBytesUTF8(returnStr) +1);writeStringToMemory(returnStr, buffer);returnbuffer;  },BindWebGLTexture:function(texture) {GLctx.bindTexture(GLctx.TEXTURE_2D,GL.textures[texture]);  },});

2.Unity中调用——__Internal.jslib

using UnityEngine;using System.Runtime.InteropServices;publicclassNewBehaviourScript:MonoBehaviour {    [DllImport("__Internal")]    privatestaticexternvoidHello();    [DllImport("__Internal")]    privatestaticexternvoidHelloString(stringstr);    [DllImport("__Internal")]    privatestaticexternvoidPrintFloatArray(float[]array,intsize);    [DllImport("__Internal")]    privatestaticexternintAddNumbers(intx,inty);    [DllImport("__Internal")]    privatestaticexternstringStringReturnValueFunction();    [DllImport("__Internal")]    privatestaticexternvoidBindWebGLTexture(inttexture);voidStart(){        Hello();                HelloString("This is a string.");float[] myArray = newfloat[10];        PrintFloatArray(myArray, myArray.Length);intresult = AddNumbers(5,7);        Debug.Log(result);                Debug.Log(StringReturnValueFunction());                var texture = new Texture2D(0,0, TextureFormat.ARGB32,false);        BindWebGLTexture(texture.GetNativeTextureID());    }}

新方法多了可以返回值，但是每次修改必须打包才能测试；

JavaScript调用Unity

这里面有巨坑，天坑，人都坑傻了！！！

官方文档中有这几行字

恰好我用的2020版本的Unity；

主要使用这个API——

SendMessage("游戏对象名","方法名","参数"); 这个和参数和lua调用c#差不多了，但是怎么调用这个api就很玄学了；

首先如果你调用这个方法需要在Unity的资源已经加载完成才可以，这个好解决，js加个button；

WebToUnity

其次在调用这个方法前需要先实例化UnityInstance变量；

vargameInstance =null;script.onload=() =>{gameInstance =createUnityInstance(document.querySelector("#unity-canvas"), {dataUrl:"Build/Test.data",frameworkUrl:"Build/Test.framework.js",codeUrl:"Build/Test.wasm",streamingAssetsUrl:"StreamingAssets",companyName:"DefaultCompany",productName:"UnityToWeb",productVersion:"0.1",      });};//以上的参数都可以在unity的playersetting界面找到；

最后调用时要在then中用lamda表达式

functionTestSend() {gameInstance.then((unityInstance) =>{unityInstance.SendMessage("Canvas","OnLogin","dqwreqweraf");        });}

完整的index.html

              Unity WebGL Player | UnityToWeb               

WebToUnity           

        WebGL builds are not supported on mobile devices.     

          var buildUrl = "Build";      var loaderUrl = buildUrl + "/Test.loader.js";      var config = {        dataUrl: buildUrl + "/Test.data",        frameworkUrl: buildUrl + "/Test.framework.js",        codeUrl: buildUrl + "/Test.wasm",        streamingAssetsUrl: "StreamingAssets",        companyName: "DefaultCompany",        productName: "UnityToWeb",        productVersion: "0.1",      };      var container = document.querySelector("#unity-container");      var canvas = document.querySelector("#unity-canvas");      var loadingBar = document.querySelector("#unity-loading-bar");      var progressBarFull = document.querySelector("#unity-progress-bar-full");      var fullscreenButton = document.querySelector("#unity-fullscreen-button");      var mobileWarning = document.querySelector("#unity-mobile-warning");      // By default Unity keeps WebGL canvas render target size matched with      // the DOM size of the canvas element (scaled by window.devicePixelRatio)      // Set this to false if you want to decouple this synchronization from      // happening inside the engine, and you would instead like to size up      // the canvas DOM size and WebGL render target sizes yourself.      // config.matchWebGLToCanvasSize = false;      if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {        container.className = "unity-mobile";        // Avoid draining fillrate performance on mobile devices,        // and default/override low DPI mode on mobile browsers.        config.devicePixelRatio = 1;        mobileWarning.style.display = "block";        setTimeout(() => {          mobileWarning.style.display = "none";        }, 5000);      } else {        canvas.style.width = "960px";        canvas.style.height = "600px";      }      loadingBar.style.display = "block";      var script = document.createElement("script");      script.src = loaderUrl;  var gameInstance = null;      script.onload = () => {gameInstance = createUnityInstance(document.querySelector("#unity-canvas"), {        dataUrl: "Build/Test.data",        frameworkUrl: "Build/Test.framework.js",        codeUrl: "Build/Test.wasm",        streamingAssetsUrl: "StreamingAssets",        companyName: "DefaultCompany",        productName: "UnityToWeb",        productVersion: "0.1",      });      };    function TestSend() {            gameInstance.then((unityInstance) => {            unityInstance.SendMessage("Canvas","OnLogin","dqwreqweraf");                    });          }        document.body.appendChild(script);     

更新新坑

Unity和JavaScript代码互相调用会有很严重的时序问题，比如需要在Unity场景加载完成开始调用的登录等方法；

不知道Unity打包成WebGL底层怎么处理的，我在单例的构造里写初始化会被多次执行，如果在这里调用js方法后果就是反复横跳导致栈内存爆炸；

解决办法是在Unity生命周期函数中调用（Awake或者Start）js函数，目的是通知加载完成，然后这个js函数中给Unity传登录信息（这里的登录信息可以是js从浏览器cookies获取的，unity做不到）；