位置: IT常识 - 正文

UE4 利用WEBUI插件完成UE与JS的交互（UE4嵌入WEB）(ue4安装插件)

编辑：rootadmin

UE4 利用WEBUI插件完成UE与JS的交互（UE4嵌入WEB）

推荐整理分享UE4 利用WEBUI插件完成UE与JS的交互（UE4嵌入WEB）(ue4安装插件)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:ue4浏览器插件,ue4 web browser,ue4浏览器插件,ue4做ui的插件,ue4water插件,ue4web端,ue4 web browser,ue4water插件,内容如对您有帮助，希望把文章链接给更多的朋友！

一、UE4显示Echart图表

二、UE调用JS（修改Echart图表数据）

三、JS调用UE（UE4中打印js传递过来的数据）

一、UE4显示Echart图表

步骤：

1.下载WEBUI插件

我的UE编辑器版本是4.24.3对应版本的插件下载地址是

链接：https://pan.baidu.com/s/1dSkXK84f68ZcD03kz8OBSA?pwd=et9z 提取码：et9z

其它版本网盘下载地址：

4.26：https://cowtransfer.com/s/5be173e137ae4a 4.27：https://cowtransfer.com/s/8cb6a0761faf45 5.0：https://cowtransfer.com/s/86830831c83a45

下载后解压放到Plugins文件夹中

2.在Echart上下载一个例子

我下载的例子的链接：

Examples - Apache ECharts

点击下载示例

3.下载的HTML文件放到Content 或其子文件夹内：

4. 修改该HTML代码：

<!DOCTYPE html><html lang="zh-CN" style="height: 100%"><head> <meta charset="utf-8"></head><body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>      <script type="text/javascript"> "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),(window.ue4=ue.interface.broadcast); var dom = document.getElementById('container'); var myChart = echarts.init(dom, null, { renderer: 'canvas', useDirtyRect: false }); var app = {}; var option; option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' } } ]}; if (option && typeof option === 'object') { myChart.setOption(option); } ue.interface.ue2js = function(ueData){ var jsonObj = JSON.parse(ueData); myChart.setOption(jsonObj); }; window.addEventListener('resize', myChart.resize); </script></body></html>

5.创建一个控件蓝图

6.打开控件蓝图，将Webinterface拖入

命名为WebUI

7.点击图表

8.在图表中，调用WEBUI的LoadFile函数

如果用的是网址，可以用LoadURL节点

9.Diectory参数选择/Content，File填入你的HTML文件在Content文件夹中的相对路径

10.到关卡蓝图中，把刚才做好的控件蓝图放到窗口中

此时运行游戏，可以看到Echart柱状图

柱状图显示出来后下一步是修改柱状图的数据

二、UE调用JS（修改Echart图表数据）

11.回到控件蓝图，添加一个按钮