位置: 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是什么文件夹可以删除吗)

  • 滴滴背审未通过怎么处理(滴滴背审未通过怎么处理后续还能过吗)

    滴滴背审未通过怎么处理(滴滴背审未通过怎么处理后续还能过吗)

  • 红米k30充电指示灯(红米k30充电指示灯不亮)

    红米k30充电指示灯(红米k30充电指示灯不亮)

  • 电脑安装软件一直失败(电脑安装软件一闪一闪的)

    电脑安装软件一直失败(电脑安装软件一闪一闪的)

  • 户户通t01信号中断怎么解决(户户通t01信号中断 信号强度为20%)

    户户通t01信号中断怎么解决(户户通t01信号中断 信号强度为20%)

  • 手机换了主板还耐用吗(手机换了主板还能用吗)

    手机换了主板还耐用吗(手机换了主板还能用吗)

  • qq网页保护怎么没了(qq网页保护强制开启)

    qq网页保护怎么没了(qq网页保护强制开启)

  • 华为nova7跟nova7se的区别(华为nova7跟nova7se外观有什么区别)

    华为nova7跟nova7se的区别(华为nova7跟nova7se外观有什么区别)

  • QQ极简模式好处(qq极简模式什么时候上线)

    QQ极简模式好处(qq极简模式什么时候上线)

  • 手机QQ说说删了还显示(手机qq说说删了怎么恢复回来)

    手机QQ说说删了还显示(手机qq说说删了怎么恢复回来)

  • wifi断电后再通电连不上是什么原因(wifi断电后再通电无互联网连接)

    wifi断电后再通电连不上是什么原因(wifi断电后再通电无互联网连接)

  • 无线网显示已停用是什么意思(无线网显示已停用是怎么回事)

    无线网显示已停用是什么意思(无线网显示已停用是怎么回事)

  • 手机qq视频大小限制(手机qq视频大小限制多少)

    手机qq视频大小限制(手机qq视频大小限制多少)

  • word怎么设置每行多少字(word怎么设置每行字数)

    word怎么设置每行多少字(word怎么设置每行字数)

  • 墨粉盒在打印机的哪个部位(墨粉盒打印机是激光打印吗)

    墨粉盒在打印机的哪个部位(墨粉盒打印机是激光打印吗)

  • 视频超过10分钟怎么发(qq视频超过10分钟)

    视频超过10分钟怎么发(qq视频超过10分钟)

  • 微信收藏对方会知道吗(微信收藏别人会不会看到)

    微信收藏对方会知道吗(微信收藏别人会不会看到)

  • 实达打印机怎么安装(实达打印机怎么设置打印纸)

    实达打印机怎么安装(实达打印机怎么设置打印纸)

  • 手机qq显示离线有几种可能(手机qq显示离线请留言是什么意思)

    手机qq显示离线有几种可能(手机qq显示离线请留言是什么意思)

  • 蚂蚁森林大树多久养成(蚂蚁森林树有多大)

    蚂蚁森林大树多久养成(蚂蚁森林树有多大)

  • 快手小店打不开怎么办(快手小店打不开快手小眼睛怎么办)

    快手小店打不开怎么办(快手小店打不开快手小眼睛怎么办)

  • 相机怎么传照片到手机(相机怎么传照片到手机vivo)

    相机怎么传照片到手机(相机怎么传照片到手机vivo)

  • linux 鼠标左右键互换实现代码(linux鼠标左键失灵)

    linux 鼠标左右键互换实现代码(linux鼠标左键失灵)

  • 增值税进项税额转出是什么意思
  • 医疗费用收费票据
  • 预算会计退回预付差旅费如何记账?
  • 赔偿支出需要纳税调整吗
  • 受托代销商品款是什么科目
  • 一正一负发票是什么意思
  • 公司注册住所要求
  • 捐赠支出税前扣除政策
  • 印花税申报成功后在哪里查询
  • 一个公司只有一个财务人员,可以吗
  • 营改增之后餐饮业的税收政策
  • 竹笋属于什么税目类别
  • 汇算清缴费用调增会计处理
  • 存货跌价准备计提原则
  • 什么是电子发票图片
  • 销售出库未开票怎么入账
  • 实收资本或股本的账务处理
  • 主合同变更对保险的影响
  • u盘一键启动安装系统
  • 鸿蒙怎么装app
  • 土地增值税怎么计算举例说明
  • rsync inotify sersync
  • win7旗舰版叫啥
  • php的session
  • 月末结转本年利润怎么算
  • 德比郡在哪
  • 企业合并进行过程中发生的各项直接相关费用
  • 格里戈里耶奈尔尤伯夫
  • 餐饮定额发票能报销吗怎么报销
  • 微信小程序获取位置信息的权限在哪里修改位置
  • vue mocha
  • 老老实实的人
  • php从服务器下载文件
  • 商业企业常用会计科目
  • 固定资产发票税率多少
  • netconf over ssh
  • python的series
  • day03-CSS
  • 重分类调整分录汇总表什么情况填写
  • 出口生产型企业
  • 职工教育经费支出比例
  • 地税代开的发票怎么计提税款?
  • 存货跌价准备的结转会计分录
  • mysql临时表什么时候销毁
  • 费用分割单使用范围
  • 2021发票认证
  • 项目竣工决算审查
  • 人员招聘费用预算
  • 企业所得税征前还是征后
  • 会计工资标准
  • 技术服务行业增值税税负率
  • 企业法人个人贷款企业承担吧?
  • 建筑单位工伤缴费标准
  • 代金券消费怎么入账
  • 其他应收款押金的现金流量
  • 去银行提备用金需要什么
  • 成本核算方法是移动加权平均法吗
  • win7开机提示由于启动计算机时出现页面文件
  • win7系统突然退化
  • win8系统c盘占用多大
  • ubuntu安装linux五笔输入法
  • linux配置raid5方法
  • 打开本地搜索
  • xp系统做完了进不去
  • centos6.5双网卡绑定
  • windows默认程序设置
  • win7系统解决数字签名问题
  • linux usb audio
  • win8任务管理器未响应怎么解决
  • Win7系统打开文件夹没有自动排列选项
  • opengl教程48讲
  • js的select
  • python读取大txt文件
  • JavaScript中的6种运算符总结
  • 手把手教你自己做菜
  • 安卓手机管家怎么关闭
  • 电商平台税收怎么交
  • 代理记账协会成立时间
  • 烟叶税进项抵扣
  • 汕头汕尾什么意思
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设