UE4 利用WEBUI插件完成UE与JS的交互 (UE4嵌入WEB)
目录
一、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.进入控件蓝图的图表
选中按钮,添加一个按钮点击事件
在点击事件中,添加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交互
UE4 利用WEBUI插件完成UE与JS的交互 (UE4嵌入WEB)相关推荐
- 在UAP中如何通过WebView控件进行C#与JS的交互
原文:在UAP中如何通过WebView控件进行C#与JS的交互 最近由于项目需求,需要利用C#在UWP中与JS进行交互,由于还没有什么实战经验,所有就现在网上百度了一下,但是百度的结果显示大部分都是在 ...
- UE4 WebUI插件
目录 说明 WebUI插件 ECharts 使用方法 下载插件 插件加载 创建控件 页面加载与通信 HTML文件 打包设置 CEF3 说明(下载链接没挂,需GitHub登录且拥有访问UnrealEng ...
- UE4 如何解决使用WebUI插件时 没法输入中文的问题
UE4 如何解决使用WebUI插件时 没法输入中文的问题 首先确定你使用的是Web Interface还是Web Browser,然后新建一个继承自他们的C++类,绑定下输入法,最后在你建立的webU ...
- UE4 WebUI插件分享
UE4 WebUI插件分享 方便那些无法访问外网的朋友 插件包含了4个版本(4.24~4.27),每个版本里面包含了四4个压缩包 每个压缩包里面都包含了自身的安装方法 链接:https://pan.b ...
- 如何获取UnrealEngine虚幻引擎的WebUI插件
使用UnrealEngine虚幻引擎开发非游戏类型的大型应用往往会涉及到大量UI界面的制作,使用原生UI框架需要投入大量专业人员.如果能够利用常规的Web页面作为UI,对于拥有Web开发人员的团队来讲 ...
- UE4使用OpenCV插件调用电脑摄像头
UE4使用OpenCV插件调用电脑摄像头 使用的是UE4.27,参考两位大佬博客 https://blog.csdn.net/d137578736/article/details/79037849?s ...
- vue利用 vue-animate-number插件动态展示数字(从0动态滚动到指定数字)
vue利用 vue-animate-number插件动态展示数字(从0动态滚动到指定数字) 第一步:安装vue-animate-number插件 $ npm install vue-animate-n ...
- 如何利用VLC插件实现H5播放RTSP视频流
目前市场上的网络摄像机流类型基本都是RTSP流,无法像RTMP流直接在网页直接播放,需要利用网页插件才能播放,大部分监控厂商都有提供一个插件,但是基本只兼容IE,在谷歌.火狐等知名浏览器上无法播放,下 ...
- wordpress插件翻译不生效_新的恶意软件利用wordpress插件漏洞攻击数百万网站
研究人员发现,正在进行的一项针对数百万WordPress网站的恶意攻击活动,目的是利用后门和各种WordPress插件漏洞进行感染. 据wordpress统计,wordpress内容管理系统提供了近6 ...
- vuejs粒子动画特效 npm安装插件vue-particles(particles.js) - 代码篇
文章目录 1. npm 安装插件`vue-particles` 2. 效果图: 3. 代码截图: 4. 代码示下: 5. 附件 · 文章阅读: 1. npm 安装插件vue-particles npm ...
最新文章
- mysql for centos下载_python数据分析之路——centos下载并配置mysql与navicat的使用
- Qt Creator分析QML应用程序
- HTML基础-张晨光-专题视频课程
- 网站出现403 Forbidden
- vc++6.0的应用程序打不开肿么办
- python列表统计每个元素出现次数_python 统计list中各个元素出现的次数的几种方法...
- Ubuntu: 一个命令行下的翻译工具
- 快手推出“一站式开放平台”:千亿流量5亿现金扶持经营伙伴
- 告别10年代,这几款手机应用改变了数亿中国人的生活,你一定在用!
- 电驴(easyMule)自动关机工具
- Adobe flash builder 4 不生效的序列号说明及解決方法
- 新手如何让淘宝店铺快速走向正轨? 新型模式带你走向巅峰
- 典型的对称加密和非对称加密算法有哪些
- ESXI6.7集成net55-r8168网卡驱动,支持部分PC
- 英特尔第二代神经计算棒(Intel Neural Compute Stick 2)相关测试
- 【Android进阶】(1)使用开源框架AndroidAnnotation
- h61 nvme硬盘_切割SN520amp;amp;对比主流NVME2242amp;amp;无硬盘盒迁移系统
- 链接元宇宙,开启新纪元
- 多点触摸画板(MultiTouchCanvas)
- 成都拓嘉启远:如何全面看待拼多多百亿补贴
热门文章
- android%3cspan,GIS API (Javascript、IOS、Android版本)
- 定义一个方法用于判断一个字符串是否是对称的字符串(StringBuilder),例如:abcba、上海自来水来自海上均为对称字符串。
- 线程池java submit,详解线程池execute和submit用法
- 1883:北京旅行日记1276695923新浪博客
- electron 双击放大事件
- the volume for a file has been externally altered so that the opened file is no longer valid
- 【Android Camera】SOF Freeze
- 超级马里奥代码_任天堂源代码泄露,引出超级马里奥64隐藏24年的角色
- 北京2019积分落户名单
- logback无忧配置文件