|
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_stringifyhelper 函数转换为 JavaScript 字符串。要返回字符串值,必须调用_malloc来分配一些内存,并调用stringToUTF8helper 函数向其中写入 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(objectNam, 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.
UnityToWeb
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.sc = 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做不到); |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?立即注册
×
|