位置: 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代码:

<!--此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=bar-background--><!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> <!-- Uncomment this line if you want to dataTool extension <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/extension/dataTool.min.js"></script> --> <!-- Uncomment this line if you want to use gl extension <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script> --> <!-- Uncomment this line if you want to echarts-stat extension <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script> --> <!-- Uncomment this line if you want to use map <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script> <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script> --> <!-- Uncomment these two lines if you want to use bmap extension <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script> <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/extension/bmap.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.回到控件蓝图,添加一个按钮

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

 12.进入控件蓝图的图表

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

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

 

 在点击事件中,添加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交互

本文链接地址:https://www.jiuchutong.com/zhishi/277925.html 转载请保留说明!

上一篇:Win10修改hosts文件无法保存的解决方法(不用更改权限)(win10修改hosts文件权限)

下一篇:DCSHelper.exe是什么进程 DCSHelper.exe程序进程介绍(dcs是什么文件夹可以删除吗)

  • 怎么样利用QQ群 引流成千人大群(怎么样利用qq群赚钱)

    怎么样利用QQ群 引流成千人大群(怎么样利用qq群赚钱)

  • 微信扫二维码会不会中毒(微信扫二维码会直接进群吗)

    微信扫二维码会不会中毒(微信扫二维码会直接进群吗)

  • 华为mate30充电时间

    华为mate30充电时间

  • iphone11打字不灵敏(苹果11打字不流畅怎么解决)

    iphone11打字不灵敏(苹果11打字不流畅怎么解决)

  • 抖音搜索记录删掉了还能找到吗(抖音搜索记录删除不了)

    抖音搜索记录删掉了还能找到吗(抖音搜索记录删除不了)

  • 触碰id无法使用(触摸id不能用)

    触碰id无法使用(触摸id不能用)

  • qq气泡怎么设置成白色(QQ气泡怎么设置手机系统字体)

    qq气泡怎么设置成白色(QQ气泡怎么设置手机系统字体)

  • 组成微型机主机的部件是什么(组成微型机主机的部件是CPU和内存)

    组成微型机主机的部件是什么(组成微型机主机的部件是CPU和内存)

  • 待机桌面停止运行怎么回事(待机桌面停止运行快捷键)

    待机桌面停止运行怎么回事(待机桌面停止运行快捷键)

  • thinkpad和联想什么关系(thinkpad 和联想)

    thinkpad和联想什么关系(thinkpad 和联想)

  • wrod打不开怎么回事(word文件打不开)

    wrod打不开怎么回事(word文件打不开)

  • ipad air3支持pd快充吗(ipadair3可以用快充吗)

    ipad air3支持pd快充吗(ipadair3可以用快充吗)

  • 快手为啥搜索不了用户(快手为啥搜索不到对方)

    快手为啥搜索不了用户(快手为啥搜索不到对方)

  • 手机晚上耗电快怎么办(手机晚上耗电快是什么原因)

    手机晚上耗电快怎么办(手机晚上耗电快是什么原因)

  • 手机主板坏了有什么症状(手机主板坏了有办法拿到资料吗)

    手机主板坏了有什么症状(手机主板坏了有办法拿到资料吗)

  • 华为悬乎浮窗怎么取消(华为悬浮窗开启后按钮在哪)

    华为悬乎浮窗怎么取消(华为悬浮窗开启后按钮在哪)

  • 平头耳机棉套怎么装(平头耳机套怎么装)

    平头耳机棉套怎么装(平头耳机套怎么装)

  • 数字证书的主要功能(数字证书的主要类型)

    数字证书的主要功能(数字证书的主要类型)

  • 苹果平板电脑忘记密码(苹果平板电脑忘了开机密码怎么解开)

    苹果平板电脑忘记密码(苹果平板电脑忘了开机密码怎么解开)

  • 为什么qq安装不了(为什么QQ安装不了应用)

    为什么qq安装不了(为什么QQ安装不了应用)

  • 一加手机6的RAM容量(一加6内存规格)

    一加手机6的RAM容量(一加6内存规格)

  • etc电池怎么换(中原通etc电池怎么换)

    etc电池怎么换(中原通etc电池怎么换)

  • airpods2电量怎么看(airpods2电量怎么看ipad)

    airpods2电量怎么看(airpods2电量怎么看ipad)

  • mcpserver.exe是什么进程 有什么作用 mcpserver进程查询(mcrlnstaller)

    mcpserver.exe是什么进程 有什么作用 mcpserver进程查询(mcrlnstaller)

  • 巴伐利亚阿尔卑斯山脉中的米滕瓦尔德小屋,德国 (© Sebastian Frölich/Offset by Shutterstock)(巴伐利亚知乎)

    巴伐利亚阿尔卑斯山脉中的米滕瓦尔德小屋,德国 (© Sebastian Frölich/Offset by Shutterstock)(巴伐利亚知乎)

  • 单位的车辆车船税怎么交
  • 调整税率后增值税发票的开具
  • 增值税的征税范围
  • 减资 股东
  • 中级会计报名必须用ie浏览器吗
  • 如何查询继续教育证书
  • 购买福利用品
  • 企业开办费可不交税吗
  • 个体工商户税收标准2023年
  • 高新技术企业所得税减免怎么算
  • 现金折扣的销售额
  • 营改增后还有企业所得税吗?
  • 租赁合同交税一般交多少钱
  • 对外投资企业利润回国意愿的政策建议
  • 货到发票没到
  • 安装工程通常有哪些工种
  • 租赁合同印花税计税依据含税吗
  • 建筑企业在增值税方面新出台的政策
  • 外籍人员个人所得税政策
  • 推广费是广告费和业务宣传费吗
  • 发票已认证未抵扣怎么办
  • 支付董事会成员津贴计入什么科目
  • 土地抵扣进项税,,能调回来吗
  • 主营业务税金及附加包括什么
  • 网件R6400路由器怎么样?网件R6400上网与传输评测的教程
  • 在win7系统中,添加打印机驱动程序
  • 系统浏览器
  • PHP:Memcached::touchByKey()的用法_Memcached类
  • 网赚项目——Youtube获取高流量的技巧
  • origin2017曲线拟合
  • vue项目怎么运行起来
  • 集群怎么写
  • php上级目录
  • 设计部工资计入什么费用
  • php 抓取别的网站的内容
  • 其他收益最后转入哪个科目
  • pycharm操作界面
  • 不具备独立核算条件的行政单位
  • 无形资产减值准备可以转回吗
  • 破产审计需要几年的账
  • 经营许可证需要多久时间
  • 怎么查询mysql sql_mode
  • mongodb mysql配合使用
  • 综合所得减除费用标准为60000.00元/年
  • 一般纳税人暂未开具发票
  • 增值税红字发票怎么填开
  • 待报解预算收入怎么做分录
  • 收到土地使用权的租金
  • 公司支付员工工资方式有几种
  • 金税三期个税申报
  • 电费可以计入营业外收入吗
  • 小规模纳税人开专票税率是1%还是3%
  • 固定资产申请报告
  • 老板买了手机,算入什么费用
  • 流动性比率怎么算
  • 对外投资如何做帐
  • 限售股锁定期延长
  • 一次性购买多张火车票
  • win2008 r2 hosts文件修改方法
  • mac外接显示器不显示全部桌面
  • ntdll.dll no matching
  • win7系统压缩包
  • 守护者联盟单机游戏
  • linux系统ln命令
  • 高危KB3045645!Win7/8.1别安装这个补丁
  • echarts怎么用
  • vue 瀑布流
  • json详细教程
  • jquery插件ajaxupload实现文件上传操作
  • js浏览器运行机制
  • jquery弹窗弹出一个页面
  • 江苏省国家税务局总局官网
  • 北京地税税务总局官网
  • 进项税留抵是什么意思
  • 先征后返的增值税计入哪个科目
  • 增值税进项转出补企业所得税
  • 如何查询车辆购置税完税证明
  • 税务部门政务公开
  • 分红太多
  • 最近领导故意挑事
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设