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

  • 怎样理解网站运营,怎么做好网站运营?(怎样理解网站运营的内容)

    怎样理解网站运营,怎么做好网站运营?(怎样理解网站运营的内容)

  • 中外励志故事大全(中外古今的励志故事150字)

    中外励志故事大全(中外古今的励志故事150字)

  • 钉钉怎么加入会议(钉钉怎么加入会议室)

    钉钉怎么加入会议(钉钉怎么加入会议室)

  • 中国移动newtv怎么投屏(中国移动newtv怎么看直播)

    中国移动newtv怎么投屏(中国移动newtv怎么看直播)

  • 天猫的apple store是真的吗(天猫的apple store官方旗舰店多久发货)

    天猫的apple store是真的吗(天猫的apple store官方旗舰店多久发货)

  • 微信应该怎么拒收对方信息(微信怎么拒绝好友验证)

    微信应该怎么拒收对方信息(微信怎么拒绝好友验证)

  • 迅雷是干什么(迅雷干什么用的软件)

    迅雷是干什么(迅雷干什么用的软件)

  • 华为mate30pro卡槽如何打开(华为mate30pro卡槽1和卡槽2)

    华为mate30pro卡槽如何打开(华为mate30pro卡槽1和卡槽2)

  • 一个小米账号可以登录几个手机(一个小米账号可以绑定几个手机)

    一个小米账号可以登录几个手机(一个小米账号可以绑定几个手机)

  • 抖音的文案怎么复制(抖音的文案怎么跑去评论区了)

    抖音的文案怎么复制(抖音的文案怎么跑去评论区了)

  • 页面边距怎么设置厘米(页面边距怎么设置磅)

    页面边距怎么设置厘米(页面边距怎么设置磅)

  • 微信笔记有浏览记录吗(微信笔记浏览可以看到吗)

    微信笔记有浏览记录吗(微信笔记浏览可以看到吗)

  • 微信提示上传身份证是什么意思(微信提示上传身份证不上传会怎么样)

    微信提示上传身份证是什么意思(微信提示上传身份证不上传会怎么样)

  • 用ps需要网络吗(ps的使用需要网络吗)

    用ps需要网络吗(ps的使用需要网络吗)

  • 爱奇艺怎么切换经典模式(爱奇艺怎么切换国际版)

    爱奇艺怎么切换经典模式(爱奇艺怎么切换国际版)

  • 手机号怎么查抖音(手机号怎么查抖音用户名)

    手机号怎么查抖音(手机号怎么查抖音用户名)

  • iphonexsmax有指纹吗(iphonexsmax有指纹识别)

    iphonexsmax有指纹吗(iphonexsmax有指纹识别)

  • 淘宝天猫京东区别(天猫淘宝京东区别是什么?)

    淘宝天猫京东区别(天猫淘宝京东区别是什么?)

  • 苹果通知栏在哪里设置(苹果手机下拉通知栏在哪设置)

    苹果通知栏在哪里设置(苹果手机下拉通知栏在哪设置)

  • 手机闪充是充电头还是数据线(手机闪充是充电器吗)

    手机闪充是充电头还是数据线(手机闪充是充电器吗)

  • qq会员vip9什么时候出(qq的vip9)

    qq会员vip9什么时候出(qq的vip9)

  • 手机下载管理器在哪里打开(手机自带浏览器下载安装)

    手机下载管理器在哪里打开(手机自带浏览器下载安装)

  • 5g如何改变生活(5g如何改变生活阅读答案)

    5g如何改变生活(5g如何改变生活阅读答案)

  • 淘宝怎么撤销投诉(淘宝怎么撤销投诉商家 手机淘宝举报投诉)

    淘宝怎么撤销投诉(淘宝怎么撤销投诉商家 手机淘宝举报投诉)

  • 长期待摊费用一般指什么
  • 企业所得税的账户设置
  • 劳务工资入什么科目
  • 装修行业开票税率
  • 公司个人薪金怎么申报宁波
  • 无形资产摊销为什么计入管理费
  • 公司简易注销需要清算吗
  • 预提费用账户期末
  • 外商投资企业如何注资
  • 商品涉及商业折扣的,如何确认企业所得税的销售收入?
  • 公司清算后资产负债表与利润表
  • 车量购置税申报流程是什么样的?
  • 债券利息收入的增值税
  • 维修房产用的建材会计分录
  • 机械设备租赁征求意见稿
  • 佣金可以直接转到个人账户吗
  • 安装费发票开具3%税率国税需要备案吗?
  • 新租赁准则承租人进项税
  • 结转成本计算方法
  • 企业的免税收入用于支出所形成的费用或财产
  • 收购全资子公司的账务处理
  • 收到镇级财政扶持怎么办
  • 电商刷单支付的佣金会计分录
  • 业务招待费不超过销售收入的5‰
  • 暂估主营业务成本怎么冲销
  • sdi是什么文件
  • 直接人工的核算包括
  • 第三方检测公司有前途吗
  • php require的用法
  • 盘点的原则包括
  • php文库系统
  • Create OpenAI Account的教程来啦,赶紧学习吧!
  • windows环境下,ping的功能和使用方法
  • laravel引入css
  • River Avon in Bath, England (© Robert Harding World Imagery/Offset by Shutterstock)
  • 海关进口增值税计入什么科目
  • 递归最小二乘法辨识参数
  • 无偿调出固定资产账面价值为零如何处理
  • 纳税人在电子税务局收到优惠政策
  • 所有者权益是什么类科目
  • 预缴税款从哪里查
  • 资产减值损失结转到哪里
  • 企业会计准则规定了
  • 汇算清缴时期间费用是负数
  • 帝国cms功能
  • 怎么用java写代码
  • 个人所得税汇算清缴
  • sql server复制表数据
  • 企业出售房屋
  • 专项附加扣除可以随时更改吗
  • 已纳消费税扣除会计分录
  • 税控服务费减免会计分录
  • 核定征税是什么意思
  • 出售其他债权投资产生的收益为什么计入留存收益
  • 失控发票已补交什么意思
  • 不动产初始登记证明
  • 去年未分配利润 负数 结转今年
  • 对外担保的效力
  • 工程履约保证金退还申请书
  • 车子以旧换新还能贷款吗
  • 广告公司制作警车违法吗
  • 售后回租含手续费吗
  • 代理出口业务会计分录
  • hyper v虚拟机
  • 如何用u盘装系统盘
  • Linux系统中修改文件权限
  • 苹果机的mac地址
  • RegSrvc.exe - RegSrvc是什么进程 有什么用
  • win7电脑全屏
  • 全志科技在国内芯片界地位
  • 使用Python对SQLite数据库操作
  • unity3d动态加载资源
  • 利用python绘图
  • js class实现原理
  • javascript要怎么学
  • js中数组排序sort的用法
  • 中国税务定额发票怎么开
  • 外经证办理流程在哪个网站申请
  • 税务总局广西
  • 如果企业所得税没有做计提怎么办?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设