UE4 WebUI插件

井底一蛤蟆

已于 2023-01-05 10:57:39 修改

阅读量1.3w

点赞数 36

分类专栏： Web前端开发 UE 文章标签： ue4 web webui

于 2021-12-24 10:26:06 首次发布

本文链接：https://blog.csdn.net/jxyb2012/article/details/122103439

版权

UE 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Web前端开发

1 篇文章 0 订阅

订阅专栏

说明（下载链接没挂，需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打印msg
	  function 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窗口