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

    目录

    一、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代码：

    2. html>
    3. <html lang="zh-CN" style="height: 100%">
    4. <head>
    5.   <meta charset="utf-8">
    6. head>
    7. <body style="height: 100%; margin: 0">
    8.   <div id="container" style="height: 100%">div>
    9.  
    10.   
    11.   <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js">script>
    12.   
    13.   
    14.   
    15.   
    16.   
    17.  
    18.   <script type="text/javascript">
    19.     "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);
    20.  
    21.     var dom = document.getElementById('container');
    22.     var myChart = echarts.init(dom, null, {
    23.       renderer: 'canvas',
    24.       useDirtyRect: false
    25.     });
    26.     var app = {};
    27.     
    28.     var option;
    29.  
    30.     option = {
    31.   xAxis: {
    32.     type: 'category',
    33.     data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    34.   },
    35.   yAxis: {
    36.     type: 'value'
    37.   },
    38.   series: [
    39.     {
    40.       data: [120, 200, 150, 80, 70, 110, 130],
    41.       type: 'bar',
    42.       showBackground: true,
    43.       backgroundStyle: {
    44.         color: 'rgba(180, 180, 180, 0.2)'
    45.       }
    46.     }
    47.   ]
    48. };
    49.  
    50.     if (option && typeof option === 'object') {
    51.       myChart.setOption(option);
    52.     }
    53.  
    54.     ue.interface.ue2js = function(ueData){
    55.       var jsonObj = JSON.parse(ueData);
    56.       myChart.setOption(jsonObj);
    57.     };
    58.  
    59.     window.addEventListener('resize', myChart.resize);
    60.   script>
    61. body>
    62. html>

    5.创建一个控件蓝图

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

     命名为WebUI

     

    7.点击 图表

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

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

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

     

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

     

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

     

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

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

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

     再添加一个文本，命名为调用JS

     12.进入控件蓝图的图表

    选中按钮，添加一个按钮点击事件

     

     在点击事件中，添加WebUI的Call函数

     

     Call函数的两个参数分别应该填函数名和函数的参数

    函数名就是js代码中的ue2js，是在interface后自定义的

     填好后，节点如下：

     

     改变数据都为100：

     运行后，点击按钮将可以改变echart数据

     

    此时，UE调用js的功能实现了，接下来要实现js调用UE的功能

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

    13.WebUI是用事件分发器做的，我们先绑定WebUI的Interface事件

    在控件蓝图中添加如下标注区域的部分 

     可以看到自定义事件有Name（函数名）和Data（参数）两个参数

    这里使用切换名称节点来区分不同事件

     现在开始在js中添加调用UE的代码

    （由于该echart没有按钮，这里将UE的代码写到了UE调用js的函数里了）

     ue4函数中有三个参数，分别是函数名（必填项），函数的参数，还有函数的回调。这里只填了函数名和函数的参数，函数的参数可以是字符串或json对象。

    写好js后，把切换名称节点的引脚名改成js传递的函数名

     然后打印一下传递过来的值

     运行游戏，点击按钮，可以看到视口打印了js传出来的字符串“hello”

     

    上面完成了js向UE传递字符串，接下来再测试一下js传递json对象

    将js代码改为如下：

     在UE中将Data转为对象：

    利用get string提取键对应的值

    取出des对应的字符串并打印（如果值是数组类型，可以用Get List节点取出键对应的值，其它以此类推）

     

     运行结果：

     

    原教学视频地址：

    Echarts图表_WebUI_JS和UE交互

  • 相关阅读:
    Leetcode 76. 最小覆盖子串
    探索Vue 3和Vue 2的区别
    redis--重要知识点扫盲
    小老鼠冒险记：《Moss 2》幕后花絮
    详解机器学习高维数据降维方法
    基于卷积优化算法的无人机航迹规划-附代码
    mac虚拟机安装配置qt遇到的坑
    【Linux】常见指令（下）
    跨域的十种解决方案详解（总结）
    Android平台上执行C/C++可执行程序，linux系统编程开发，NDK开发前奏。
  • 原文地址：https://blog.csdn.net/ChaoChao66666/article/details/127737725