Html与UnityWebgl通信
Html 嵌入UnityWebgl
Html 头部定义
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- <link rel="shortcut icon" href="TemplateData/favicon.ico"> -->
<!-- <link rel="stylesheet" href="TemplateData/style.css"> -->
<!-- <script src="TemplateData/UnityProgress.js"></script> -->
<script src="Build/UnityLoader.js"></script>
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/Webgl.json");
</script>
</head>
Html body 定义
<body style="overflow:hidden;">
//该对象 class 是unity固定设置，不要变动
<div class="webgl-content" >
//该对象 id 是unity固定设置，不要变动
<div id="unityContainer"></div>
<div class="footer">
<!-- <div class="webgl-logo"></div> -->
<!-- <div class="fullscreen" οnclick="unityInstance.SetFullscreen(1)"></div> -->
<!-- <div class="title">WebglTest</div> -->
<!-- <button type="button" οnclick="unityInstance.SendMessage('Main Camera', 'ReviceHtmlData', 'hh mm');">Send unity </button> -->
</div>
</div>
</body>
untiyWebgl 自适应 窗口
<script>
window.onresize = selfadaption;
function selfAdaption(){
//该对象 id 是unity固定设置，不要变动
var unityContainer = document.getElementById("unityContainer");
//canas对象前端无需关注，该对象是由unity生成
var unitycanvas = document.getElementById("#canvas");
unityContainer.style.width = "100vw";
unityContainer.style.height = "100vh";
unitycanvas.style.width = "100vw";
unitycanvas.style.height = "100vh";
}
</script>
完整代码示例
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | WebglTest</title>
<!-- <link rel="shortcut icon" href="TemplateData/favicon.ico"> -->
<!-- <link rel="stylesheet" href="TemplateData/style.css"> -->
<!-- <script src="TemplateData/UnityProgress.js"></script> -->
<script src="Build/UnityLoader.js"></script>
<script>
var unityInstance = UnityLoader.instantiate("unityContainer", "Build/Webgl.json");
</script>
</head>
<body style="overflow:hidden;">
<div class="webgl-content" >
<div id="unityContainer"></div>
<div class="footer">
<!-- <div class="webgl-logo"></div> -->
<!-- <div class="fullscreen" οnclick="unityInstance.SetFullscreen(1)"></div> -->
<!-- <div class="title">WebglTest</div> -->
<!-- <button type="button" οnclick="unityInstance.SendMessage('Main Camera', 'ReviceHtmlData', 'hh mm');">Send unity </button> -->
</div>
</div>
<script>
window.onresize = selfAdaption;
function selfAdaption(){
var unityContainer = document.getElementById("unityContainer");
var unitycanvas = document.getElementById("#canvas");
unityContainer.style.width = "100vw";
unityContainer.style.height = "100vh";
unitycanvas.style.width = "100vw";
unitycanvas.style.height = "100vh";
}
</script>
</body>
</html>
Html 发消息通知UnityWebgl
SendMessage(objectName, methodName, value);
其中，objectName 是场景中的对象名称；methodName 是当前附加到该对象的脚本中的方法名称；value 可以是字符串、数字，也可为空。
objectName，methodName，value 由unity端定义
例如：
SendMessage('MyGameObject', 'MyFunction');
SendMessage('MyGameObject', 'MyFunction', 5);
SendMessage('MyGameObject', 'MyFunction', 'MyString');
网页示例：
<button type="button" onclick="unityInstance.SendMessage('Main Camera', 'ReviceHtmlData', 'hhmm');">Send unity </button>
注意 unityInstance 在Head 头部已经定义 var unityInstance = UnityLoader.instantiate(“unityContainer”, “Build/Webgl.json”);
UnityWebgl 发消息 Html
1.新建 .jslib文件 命名为 Internal.jslib，Internal.jslib文件放在 Assets/Plugins 目录下
Internal.jslib 文件基本内容格式
mergeInto(LibraryManager.library, { Method: function{} , Method: function{ }, Method: function{}});
2.方法定义描述 例如： Method 为unity端调用，花括号内是html代码{ js}
3.示例
mergeInto(LibraryManager.library, {
//unity 调用 无返回值方法
Hello: function () {
//js代码
window.alert("Hello, world!");
},
//unity 调用 无返回值方法 传参字符串
//需要Pointer_stringify方法获取字符串
HelloString: function (str) {
//js代码
//html 需处理接收的字符串Pointer_stringify
window.alert(Pointer_stringify(str));
},
//unity 调用 无返回值方法 传参 数组，数组长度
//HEAPF32[(array >> 2) + i]
PrintFloatArray: function (array, size) {
//js代码
for(var i = 0; i < size; i++)
console.log(HEAPF32[(array >> 2) + i]);
},
//unity 调用 无返回值方法 传参 数组，数组长度
//HEAPU32[(array >> 2) + i]
PrintIntArray: function (array, size) {
for(var i = 0; i < size; i++)
console.log(HEAPU32[(array >> 2) + i]);
},
//unity 调用 有返回值方法 传参 数值类型不需要特殊处理
AddNumbers: function (x, y) {
//js代码
return x + y;
},
//unity 调用 有返回值方法 无传参
StringReturnValueFunction: function () {
//js 代码
var returnStr = "bla";
//html 需要处理返回字符串l engthBytesUTF8，获取字符串长度 加1
var bufferSize = lengthBytesUTF8(returnStr) + 1;
//分配数组空间大小
var buffer = _malloc(bufferSize);
//字符串转untf8编码
stringToUTF8(returnStr, buffer, bufferSize);
//html 处理返回字符串结束
//返回字节数组，unity 接收后会自动转换成字符串
return buffer;
},
});
注意事项：以下定义错误
//对于原始类型的数组，emscripten 针对内存的不同大小的整数、无符号整数或浮点数表示形式，提供其堆的不同 ArrayBufferViews：HEAP8、HEAPU8、HEAP16、HEAPU16、HEAP32、HEAPU32、HEAPF32、HEAPF64
//不支持字符数组
PrintStrArray: function (array, size) {
for(var i = 0; i < size; i++)
console.log(str);
},
Unity 引用方法示例
//引用命名空间
using System.Runtime.InteropServices;
//声明unity需要调用html 定义的方法
[DllImport("__Internal")]
private static extern string StringReturnValueFunction();
[DllImport("__Internal")]
private static extern void HelloString();
[DllImport("__Internal")]
private static extern void Hello();
[DllImport("__Internal")]
private static extern int AddNumbers();
[DllImport("__Internal")]
private static extern void PrintFloatArray(float[] arry, int length);
[DllImport("__Internal")]
private static extern void PrintIntArray(int[] arry, int length);
void Start()
{
//浏览器窗口会弹出弹窗 Hello, world!
Hello();
//浏览器窗口会弹出弹窗 Hello,Unity!
HelloString("Hello,Unity!");
//获取网页输出的值 应得到 字符串 bla
string str = StringReturnValueFunction();
Debug.Log(str);//应输出bla
//通过传参 获取网页计算结果 应得到 15
int result = AddNumbers(7, 8);
Debug.Log(result);//应输出 15
//通过传参float类型数据 打印输出 2，3，4
PrintFloatArray(new PrintFloatArray[] { 2, 4, 3 }, 3);
//通过传参int类型数据 打印输出 7，8，9
PrintIntArray(new int[] { 7, 8, 9 }, 3);
}
8569
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
