说明

WebUI插件

ECharts

使用方法

下载插件

插件加载

创建控件

页面加载与通信

HTML文件

打包设置

CEF3

说明（下载链接没挂，需GitHub登录且拥有访问UnrealEngine仓库的权限）

在UE4中嵌入Web页面，使用WebUI插件加载Web页面并需要支持透明穿透与通信

WebUI插件

https://github.com/tracerinteractive/UnrealEnginehttps://github.com/tracerinteractive/UnrealEngine

ECharts

Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/zh/index.html

使用方法

下载插件（注意版本对应）

插件加载

1. 把下载的插件拷贝到UE4项目的Plugins目录下

- [YourProject]

- Plugins

- HttpLibrary（非必须）

- JsonLibrary（必须）

- WebUI（必须）

- YourProject.uproject

2. 打开UE4项目，并确保WebUI已加载

创建控件

创建UMG取名WUI，并添加WebInterface控件，Anchors全屏

页面加载与通信

在关卡蓝图中创建WUI，并连接逻辑

HTML文件

- [YourProject]

- Content

- HTML (必须)

-echarts.js

-Test.html

- YourProject.uproject

1. echarts.jsecharts.js at 5.2.2https://github.com/apache/echarts/blob/5.2.2/dist/echarts.js

2. Test.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>ECharts</title><script>// create the global ue4(...) helper function"object"!=typeof ue&&(ue={}),uuidv4=function(){return"10000000-1000-4000-8000-100000000000".replace(/[018]/g,function(t){return(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)})},ue4=function(r){return"object"!=typeof ue.interface||"function"!=typeof ue.interface.broadcast?(ue.interface={},function(t,e,n,o){var u,i;"string"==typeof t&&("function"==typeof e&&(o=n,n=e,e=null),u=[t,"",r(n,o)],void 0!==e&&(u[1]=e),i=encodeURIComponent(JSON.stringify(u)),"object"==typeof history&&"function"==typeof history.pushState?(history.pushState({},"","#"+i),history.pushState({},"","#"+encodeURIComponent("[]"))):(document.location.hash=i,document.location.hash=encodeURIComponent("[]")))}):(i=ue.interface,ue.interface={},function(t,e,n,o){var u;"string"==typeof t&&("function"==typeof e&&(o=n,n=e,e=null),u=r(n,o),void 0!==e?i.broadcast(t,JSON.stringify(e),u):i.broadcast(t,"",u))});var i}(function(t,e){if("function"!=typeof t)return"";var n=uuidv4();return ue.interface[n]=t,setTimeout(function(){delete ue.interface[n]},1e3*Math.max(1,parseInt(e)||0)),n});</script><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script><script src="https://code.jquery.com/jquery-2.2.4.min.js"></script></head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><button id="btn_Print" onclick="Print()"> Print </button><button id="btn_Version" onclick="Version()"> GetVersion </button><p id="fpsMeter">0 FPS</p><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);// web端发送print事件给ue4，ue4打印msgfunction Print(){let msg = 'Hello World';ue4("print", msg);}// web端发送version事件给ue4，ue4打印msg并回调发送ue4引擎版本号给web端function Version(){let msg = 'version:1.0';ue4("version", msg, function(v){// 收到ue4的回调消息，打印回调参数信息（参数类型必须是string）if(typeof v == "string")alert(v);});}// 绑定事件ue.interface.setFPS = function(fps){// set element text$("#fpsMeter").text(fps.toFixed(1) + " FPS");};</script></body>
</html>

打包设置

打包时拷贝Content中的非Asset资产

CEF3

UE4.26 WebBrowser使用的浏览器内核cef3版本是3.3071.1644且默认不支持h264

下载支持h264编译好的3.3071版本cef
百度网盘 cef3.3071.1611
替换UE4引擎安装目录下的cef3文件

//替换全部
Epic Games\UE_4.26\Engine\Binaries\ThirdParty\CEF3\Win64//替换libcef.lib
Epic Games\UE_4.26\Engine\Source\ThirdParty\CEF3\cef_binary_3.3071.1611.g4a19305_windows64\Release

WebBrowser打开网站测试： HTML5test - How well does your browser support HTML5?

UE4打开Web调试窗口：点击web里的任意元素，按键盘 Shift + Ctrl + I即可弹出console窗口

UE4 WebUI插件相关推荐

UE4 WebUI插件分享
UE4 WebUI插件分享方便那些无法访问外网的朋友插件包含了4个版本(4.24~4.27),每个版本里面包含了四4个压缩包每个压缩包里面都包含了自身的安装方法链接:https://pan.b ...
UE4 如何解决使用WebUI插件时没法输入中文的问题
UE4 如何解决使用WebUI插件时没法输入中文的问题首先确定你使用的是Web Interface还是Web Browser,然后新建一个继承自他们的C++类,绑定下输入法,最后在你建立的webU ...
UE4制作插件的插件神器pluginCreator
本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/45644007 作者:car ...
翻译Houdini官方对UE4新版插件的介绍：Houdini Engine for Unreal - V2
原视频:Houdini For Unreal - YouTube 目录介绍 0. 总览 1. 简介HoudiniEngine 2. UE4的HoudiniEngine - 第二版为什么要做&quo ...
如何获取UnrealEngine虚幻引擎的WebUI插件
使用UnrealEngine虚幻引擎开发非游戏类型的大型应用往往会涉及到大量UI界面的制作,使用原生UI框架需要投入大量专业人员.如果能够利用常规的Web页面作为UI,对于拥有Web开发人员的团队来讲 ...
ue4网页端_ue4之使用WebUI插件实现透明网页点击穿透
先前使用ue4自带的web brower插件嵌入了网页,但是全屏覆盖网页的时候,网页层劫持了鼠标对场景的操作控制. 之前的项目中为了实现这种透明区域可控,同事采用的是在User Interface-- ...
UE4全景插件Nvidia Ansel Photography
Nvidia 的 Ansel 工具使 PC 玩家能更便捷地从游戏中采集高精度图像并进行分享.将 Ansel ue4 插件整合到游戏中的方法简单而快捷. 可在 Nvidia Ansel 站点查看 An ...
【UE4】插件与模块
文章目录一.什么是插件与模块二.创建插件三.插件目录介绍四.配置文件 1.插件 2.模块 3.项目五.创建模块 1. 插件中创建模块 2. 项目中创建模块六.模块加载与卸载七.插件封装 ...
UE4 天气系统插件使用
将场景关于灯光天气的先全部删除将它放入场景在这里设置天气想影响到材质的话:例如影响草地材质拖入进去即可不想去改引擎插件的话,最简单的动态修改方法就是放多个WeatherSystem然后显隐 ...

UE4 WebUI插件

说明（下载链接没挂，需GitHub登录且拥有访问UnrealEngine仓库的权限）

WebUI插件

ECharts

使用方法

下载插件（注意版本对应）

插件加载

创建控件

页面加载与通信

HTML文件

打包设置

CEF3

UE4 WebUI插件相关推荐

最新文章

热门文章