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

  • 华为gt3怎么改时间

    华为gt3怎么改时间

  • 电脑管家怎么拦截广告弹窗(电脑管家怎么拦截软件自动下载)

    电脑管家怎么拦截广告弹窗(电脑管家怎么拦截软件自动下载)

  • 苹果手机显示e是怎么回事(苹果手机显示耳机模式怎么关闭)

    苹果手机显示e是怎么回事(苹果手机显示耳机模式怎么关闭)

  • 小米10至尊纪念版屏幕分辨率是多少(小米10至尊纪念版尺寸)

    小米10至尊纪念版屏幕分辨率是多少(小米10至尊纪念版尺寸)

  • pr一导出就死机(pr一导出就卡死)

    pr一导出就死机(pr一导出就卡死)

  • 桌面日期时间在哪设置(桌面时间显示日期)

    桌面日期时间在哪设置(桌面时间显示日期)

  • 腾讯课堂没签到能补吗?(腾讯课堂没签到有记录吗)

    腾讯课堂没签到能补吗?(腾讯课堂没签到有记录吗)

  • 抖音有pc版吗(抖音有没有pc版的)

    抖音有pc版吗(抖音有没有pc版的)

  • 华为nova7手机耳机孔在哪里(华为nova7手机耳机插哪)

    华为nova7手机耳机孔在哪里(华为nova7手机耳机插哪)

  • 华为hmscore是什么(华为hmscore是什么意思可以关闭吗)

    华为hmscore是什么(华为hmscore是什么意思可以关闭吗)

  • 微信卸载了怎么登录(微信卸载了怎么恢复原来的微信)

    微信卸载了怎么登录(微信卸载了怎么恢复原来的微信)

  • qq扩列啥意思(qq扩列什么意思是什么)

    qq扩列啥意思(qq扩列什么意思是什么)

  • 为什么微信复制的字不能完整显示(为什么微信复制粘贴不了)

    为什么微信复制的字不能完整显示(为什么微信复制粘贴不了)

  • 手机静音微信语音电话能听到吗(手机静音微信语音电话来电有声音吗)

    手机静音微信语音电话能听到吗(手机静音微信语音电话来电有声音吗)

  • wps文件夹怎么发送给qq(wps文件夹怎么发送到钉钉)

    wps文件夹怎么发送给qq(wps文件夹怎么发送到钉钉)

  • 手机上软件图标怎么换(手机上软件图标不见了怎么办)

    手机上软件图标怎么换(手机上软件图标不见了怎么办)

  • 移动卡显示hd怎么取消(移动卡显示hd收费吗)

    移动卡显示hd怎么取消(移动卡显示hd收费吗)

  • 如何把图片内存缩小(如何把图片内存改大)

    如何把图片内存缩小(如何把图片内存改大)

  • 吉他的英文(我很享受吉他的英文)

    吉他的英文(我很享受吉他的英文)

  • 探探左滑表示什么(探探左滑是什么)

    探探左滑表示什么(探探左滑是什么)

  • 微信打电话按了静音对方能知道吗(微信打电话了之后手机关机了会显示什么)

    微信打电话按了静音对方能知道吗(微信打电话了之后手机关机了会显示什么)

  • 苹果xmax能用电信卡吗(苹果xmax手机电池容量多大)

    苹果xmax能用电信卡吗(苹果xmax手机电池容量多大)

  • 怎么找电脑的截图工具(怎么找电脑截图记录)

    怎么找电脑的截图工具(怎么找电脑截图记录)

  • 抖音拉黑后怎么删除(抖音拉黑后怎么再拉出来)

    抖音拉黑后怎么删除(抖音拉黑后怎么再拉出来)

  • 荣耀9x尺寸(荣耀9x尺寸是多少厘米)

    荣耀9x尺寸(荣耀9x尺寸是多少厘米)

  • trunk的工作原理(trunk的定义)

    trunk的工作原理(trunk的定义)

  • macOS big sur菜单栏不显示WiFi怎么办?(mac big sur 菜单栏)

    macOS big sur菜单栏不显示WiFi怎么办?(mac big sur 菜单栏)

  • 农产品收购发票使用范围
  • 应交税费是什么会计科目
  • 增值税怎么做账务处理
  • 设备进项税额转出会计分录
  • 预付的成本票计入什么科目?
  • 质保金一年怎么写
  • 清算后剩余财产归一方所有
  • 维修费开发票选择什么税收分类编码
  • 固定资产做错了怎么办
  • 房地产开发企业预缴增值税
  • 房产预收款怎么记帐?
  • 案件补贴
  • 多交的季度所得税怎么算
  • 供应商转让合同
  • 作废发票 红字发票
  • 已缴契税是否可以在土地增值税扣除?
  • 企业大中小型划分最新标准
  • 长期股权投资涉及或有对价的帐务处理
  • 分公司负债,总公司要负担
  • 公司产品因质量问题买家追究
  • 预提成本的会计处理
  • macos升级报错
  • macbookpro提醒事项
  • 个税退手续费怎么申请
  • 公务车加油入什么科目
  • 保险赔款确认函
  • php在apache中有哪些工作方式
  • w10怎么找蓝牙
  • 房地产公司股权收购
  • php做
  • php的数据类型主要有哪几种?
  • 纳税调整项目有一个其他调增金额是怎么组成的
  • 威尼斯海滩滑板场
  • 前端项目部署到nginx
  • 付境外人员劳务费
  • 在筹建期间发生的开办费
  • ssd训练自己的数据集pytorch
  • vue2和vue3的区别大么
  • 预付账款年底怎样结转
  • ldconfig命令怎么用
  • 进项抵销项的会计分录
  • 退回社保怎么做分录
  • 尚未进行抄报税无法申报是什么意思
  • 进项发票数据导出
  • 工资费用核算
  • 固定资产已提完折旧报废后如何处理
  • 借款可以抵货款吗
  • mysql数据损坏修复方法
  • 股权转让给个人和公司的区别
  • 处置固定资产增值税收入与企业所得税收入不一致
  • 减免进项税的分录怎么做
  • 增值税一般纳税人资格登记表
  • 固定资产相关业务
  • 公司做的形象墙效果图
  • 出口抵减内销产品应纳税额
  • 工程施工企业收到工程款,怎么做分录
  • 计提工资与实发工资有差额怎么计算成本
  • 卸载软件怎么彻底删掉
  • 简述Mysql Explain 命令
  • linux下mysql 5.7.16 免安装版本图文教程
  • win7提示oxcooooo98
  • bios关闭光驱设置
  • 7.0 Release i386 DVD iso 下载
  • winxp开启远程控制
  • macbook桌面2
  • win7小键盘怎么调出
  • centos7如何设置ip
  • win8系统怎么安装软件
  • 扫描仪在哪儿
  • unity3d documentation
  • js 读取 excel
  • myeclipse2013安装配置
  • 置顶在哪里
  • cypress 异步
  • 【mclin】手把手叫你在Eclipse里添加Android开发功能(附:完整离线版Android_SDK和Android_ADT下载)
  • jquery教程实例
  • 新收入准则租赁业务
  • 个人所得税选择那种方式更好
  • 山西增值税优惠政策
  • 新版零申报印花税怎么申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设