UE4 WebUI插件

目录

说明

WebUI插件

ECharts

使用方法

下载插件

插件加载

创建控件

页面加载与通信

HTML文件

打包设置

CEF3

---

---

说明

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

WebUI插件

Github链接http://xn--github-nb9l8373a/

ECharts

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

使用方法

下载插件

WebUI-4.26.ziphttps://github.com/tracerinteractive/UnrealEngine/releases/download/4.26.0/WebUI-4.26.zipJsonLibrary-4.26.ziphttps://github.com/tracerinteractive/UnrealEngine/releases/download/4.26.0/JsonLibrary-4.26.zipHttpLibrary-4.26.ziphttps://github.com/tracerinteractive/UnrealEngine/releases/download/4.26.0/HttpLibrary-4.26.zip插件加载

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

  
    
    
	
    
    
	

  
  
    
	 Print 
	 GetVersion 
	
0 FPS
    

    
  

打包设置

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

CEF3

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

1. 下载支持h264编译好的3.3071版本cef
   百度网盘 cef3.3071.1611
    
2. 替换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窗口