位置: 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拍照怎么设置)

  • 合并单元格要选定几个单元格(合并单元格要选什么)

    合并单元格要选定几个单元格(合并单元格要选什么)

  • 光纤分为哪两类(光纤分为哪两类有何特点)

    光纤分为哪两类(光纤分为哪两类有何特点)

  • md513zp/a是什么型号(md514zp/a)

    md513zp/a是什么型号(md514zp/a)

  • 小米9怎么识别不了门禁卡(小米9怎么识别文字)

    小米9怎么识别不了门禁卡(小米9怎么识别文字)

  • 荣耀10怎么退出talkback(荣耀10怎么退出防误触模式)

    荣耀10怎么退出talkback(荣耀10怎么退出防误触模式)

  • 抖音在线什么意思(抖音里在线是什么意思)

    抖音在线什么意思(抖音里在线是什么意思)

  • 苹果手机siri听不到我说话怎么办(苹果手机siri听不到我说话是哪里坏了)

    苹果手机siri听不到我说话怎么办(苹果手机siri听不到我说话是哪里坏了)

  • 苹果手机字体是什么字体(苹果手机字体是繁体怎么调简体)

    苹果手机字体是什么字体(苹果手机字体是繁体怎么调简体)

  • 闪存盘是外存储器吗(闪存盘是外存储设备吗)

    闪存盘是外存储器吗(闪存盘是外存储设备吗)

  • 进程的静态实体由什么组成(进程的静态实体包括)

    进程的静态实体由什么组成(进程的静态实体包括)

  • 华为matex用的什么牌子屏幕

    华为matex用的什么牌子屏幕

  • 双十一买的iphone11什么时候发货(双十一买的iphone一直没拆封)

    双十一买的iphone11什么时候发货(双十一买的iphone一直没拆封)

  • wifi6是wifi5的多少倍(wifi6是5gwifi吗)

    wifi6是wifi5的多少倍(wifi6是5gwifi吗)

  • 手机动态图怎么编辑(手机动态图怎么压缩变小)

    手机动态图怎么编辑(手机动态图怎么压缩变小)

  • 哔哩哔哩在手机哪个文件夹(哔哩哔哩在手机存储的哪个位置)

    哔哩哔哩在手机哪个文件夹(哔哩哔哩在手机存储的哪个位置)

  • 支付宝蓝牙音箱怎么用(支付宝蓝牙音箱微信可以用吗)

    支付宝蓝牙音箱怎么用(支付宝蓝牙音箱微信可以用吗)

  • 电脑shift在哪

    电脑shift在哪

  • 微信小程序和APP各有什么特点(微信小程序和app数据不互通怎么办)

    微信小程序和APP各有什么特点(微信小程序和app数据不互通怎么办)

  • 示波器怎么调出正弦波(示波器怎么调出频率)

    示波器怎么调出正弦波(示波器怎么调出频率)

  • 通过消息页关注是什么意思(关注账号即可查看内容和喜欢怎么设置)

    通过消息页关注是什么意思(关注账号即可查看内容和喜欢怎么设置)

  • 怎么取手机卡(华为怎么取手机卡)

    怎么取手机卡(华为怎么取手机卡)

  • 小米mix3如何快速截屏(小米mix3如何快速恢复出厂设置)

    小米mix3如何快速截屏(小米mix3如何快速恢复出厂设置)

  • ntfs对u盘损伤有多大(ntfs损坏u盘)

    ntfs对u盘损伤有多大(ntfs损坏u盘)

  • 华为m6能打电话吗(华为m6打电话话筒在哪)

    华为m6能打电话吗(华为m6打电话话筒在哪)

  • 小影怎么取消自动续费(如何关闭小影自动续费)

    小影怎么取消自动续费(如何关闭小影自动续费)

  • oppo怎么关闭用户体验(oppo怎么关闭用电源立即锁定)

    oppo怎么关闭用户体验(oppo怎么关闭用电源立即锁定)

  • iphonexmax强制重启(苹果xsmax强制重启)

    iphonexmax强制重启(苹果xsmax强制重启)

  • 应交税费是什么科目借贷方向
  • 个体工商户核定征收
  • 金税盘服务费全额抵扣
  • 加计扣除产生的滞纳金
  • 分公司撤销跨区域转固定资产到总公司
  • 更改开票信息需要多久
  • 出口退税逾期申报,需申报出口货物收汇情况表
  • 什么是联营商品
  • 个体工商户收到发票怎么做账
  • 建设工程中税费如何承担
  • 印花税的计税依据怎么算公式
  • 融资协议如何缴纳印花税
  • 基本养老保险覆盖人数
  • 一般纳税人企业是什么意思
  • 旅游业营改增差额征税的会计核算怎么做?
  • 无法读取金税盘时间版本号是什么意思
  • 6月实施的新政有哪些?
  • 承租方出售资产的行为
  • 货物返利怎么做分录
  • 非居民个人所得税税率表2021
  • 如何查询所属税务所
  • 契税和增值税的计税依据
  • 福利费应计入什么费用
  • 安装费如何做账
  • vue使用方法
  • mac屏蔽显卡教程
  • linux i
  • win7为什么显示多重网络
  • 广告公司的设计师多少钱一月
  • replace.exe进程
  • an exit
  • PHP:zip_entry_close()的用法_Zip函数
  • php 字节
  • apache环境搭建
  • php限制接口调用次数
  • 金碟软件如何查看明细账
  • yii gridview
  • bert的原理
  • 没有初级会计证可以从事会计工作吗
  • urljoin使用
  • 企业退税要用税吗
  • 货币资金有余额怎样填写清税申报表
  • 个人注册投资有限公司
  • 帝国cms移动端
  • php 文件处理
  • 跨年度错账调整分录
  • 新版发票填开操作流程
  • 发票上的货物要怎么填?
  • 流转税怎么核算
  • 网上报税有没有时间限制
  • 买货物没有进项税额,如何开6个点发票
  • 出售固定资产已开票未收款账务处理
  • 发出存货的计价方法一经确定,不得随意改变
  • 利润分享并购方法有哪些
  • 记账凭证是不是转账凭证
  • 营业外收入的账户结构
  • 员工团体意外保险受益人是谁
  • 发票抬头是个人税号怎么填
  • 开票6个点怎么计算
  • win10上如何安装hd4850驱动
  • xp系统无法重装系统
  • freebsd login
  • 最简单最快乐
  • win8系统版本
  • centos6.10安装教程详解
  • win版本微信
  • win8怎么打开系统设置
  • 怎么修改win10登录名
  • win8系统多少位
  • GLWallpaperService分析一
  • python如何进行线程操作
  • css table-cell
  • jquery validate文档
  • node.js使用方法
  • 基于javascript的毕业设计选题
  • 使用express
  • html5table
  • 住房公积金交纳的原则
  • 北京税务局待遇有住宿吗
  • 企业房产如何过户给个人
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设