【UE4】 html中 ue4与 js数据互通

heneyT

已于 2022-06-09 11:20:18 修改

阅读量3k

点赞数 1

分类专栏： UE4 文章标签： ue4 javascript web

于 2022-06-09 11:15:54 首次发布

本文链接：https://blog.csdn.net/heneyT/article/details/125199495

版权

UE4 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

本文介绍了如何在UE4中启用WebUI插件，并通过创建.html文件和蓝图设置UMG组件，实现JavaScript与UE4之间的函数调用。通过示例代码展示了JS如何绑定测试函数和调用UE4的函数，以及UE4如何反向调用JavaScript函数。该教程适合希望在UE4中利用HTML进行UI开发的开发者。

摘要由CSDN通过智能技术生成

一 UE4中开启Web UI插件

二

1. 创建.html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
    <button onclick = "bindTest()"> 绑定测试 </button>
	<button onclick = "callUE4Func()"> callUE4Func </button>
	<script>
	
	// create the global ue4(...) helper function
    // 帮助函数
	"object"!=typeof ue||"object"!=typeof ue.interface?("object"!=typeof ue&&(ue={}),ue.interface={},ue.interface.broadcast=function(e,t){if("string"==typeof e){var o=[e,""];void 0!==t&&(o[1]=t);var n=encodeURIComponent(JSON.stringify(o));"object"==typeof history&&"function"==typeof history.pushState?(history.pushState({},"","#"+n),history.pushState({},"","#"+encodeURIComponent("[]"))):(document.location.hash=n,document.location.hash=encodeURIComponent("[]"))}}):function(e){ue.interface={},ue.interface.broadcast=function(t,o){"string"==typeof t&&(void 0!==o?e.broadcast(t,JSON.stringify(o)):e.broadcast(t,""))}}(ue.interface),(ue4=ue.interface.broadcast);

    // 绑定测试
	function bindTest()
	{
		
		ue.testobject.bindtestfunction("helle bind").then(function(ReturnValue){
		alert("hello bind.  " + ReturnValue);
		});
	}
    // js调用UE4中函数
	function callUE4Func()
	{
		ue4("callUE4Func", "Param test");
		
		alert("callUE4Func.");
	}
    // UE4中调用js函数
	ue.interface.UE4CallFunc = function(Json)
	{
		alert("UE4CallFunc:  "+ Json);
	}
	
	</script>
</body>
</html>

2. 蓝图中创建UMG，添加Web Ui组件