1. 介绍：
- 用户体验（UE）是什么。
UE是指用户与设计的交互过程，是把用户的需求、兴趣、思维方式等融入产品设计中的方式。UE能根据用户的需求，结合设计理念，从视觉、交互、结构、内容等方面，提供一种有效的交互设计。
- UE引擎是什么
UE引擎是指Unreal Engine（虚幻引擎）的简称，它是由Epic Games（Epic游戏公司）开发的一款高度先进的游戏开发工具。虚幻引擎是一种3D图形渲染引擎，为开发者提供了一系列强大的功能。
虚拟引擎具有开放源代码和许可的特点，允许开发者自由地使用和定制引擎的功能，从而满足不同项目的需求，使很多游戏开发者、影视制作公司和虚拟现实（VR）和增强现实（AR）开发者使用UE引擎作为他们的首选工具。
2. UE引擎版本
- UE4和UE5版本对比
UE5和UE4在可视化、光照、动画、开发流程和性能优化等方面有很多区别
- UE4:
(1) 需要自行收集和导入资源
(2) 对于大规模场景和高细节模型的渲染需要更多的计算资源和时间
(3) 动画系统较为简单，需要更多手动操作和脚本编写
(4) 需要使用静态网格或者LOD来处理细节模型，限制场景的复杂性和真实感
- UE5:
(1) 引入Quixel Bridge插件，提供了大量的高质量资源，包括纹理、材质和3D模型，方便开发者快速创建场景
(2) 改进了性能和优化方面。它针对各种硬件配置进行了优化，提供了更好的性能表现，特别是在大规模场景和复杂模型方面
(3) 提供更好的动画工具和系统，引入MetaHuman工具可以帮助开发者创建高度逼真的动画
(4) 在可视化方面进行了大量改进。引入Nanite的新技术，它可以实现实时渲染高质量的细节模型，无论是静态对象还是动态对象
(5) 引入lumen的全局光照系统，允许实时光线追踪，动态光源和反射方面提供更加逼真的效果
3. UE引擎的应用
- 应用领域
（1）最常见的应用游戏开发，如《堡垒之夜》、《生化危机2:重制版》、《控制》、《绝地求生》（UE4引擎）、《古墓丽影》
（2）虚拟现实（VR）和增强现实（AR），用于教育、培训、娱乐和模拟等领域
（3）影视制作：创建特效、虚拟场景和动态灯光，后期制作。如《星球大战：曼达洛人》、《神奇女侠1984》使用UE引擎制作的特效场景
（4）建筑和可视化，用来创建建筑的可视化模型、室内设计方案和虚拟漫游体验
（5）教育和培训：创建交互式的虚拟实验室、仿真训练环境、教育游戏
（6）动画制作、艺术创作、广告营销等
4. UE引擎工具的安装
（1）首先打开ue4的官网ue4的官网，进入页面
（2）注册并登录epic games帐号，虚幻引擎是基于epic games 中，需要登录才可使用
- 官网直接注册即可，但是由于服务器不稳定等因素，可能需要多次尝试
（3）下载epic games客户端并登录，找到虚幻引擎 -> 库，即可下载引擎版本，可多个版本共存，通过启动虚幻引擎创建项目工程
5.UE引擎学习demo
创建项目工程后，可以根据当前虚幻引擎的版本进行下载对应的插件，由于之后项目也是基于网页与虚幻引擎的交互，需下载webUi插件：
4.24：https://pan.baidu.com/s/1dSkXK84f68ZcD03kz8OBSA?pwd=et9z
下载压缩包后需将文件至于通过虚幻引擎对应版本的项目文件下的plugins文件夹内，然后重启虚幻引擎，虚幻引擎将自动引入对应的插件，和进行版本的匹配
问题1：可能会出现图形驱动版本不适配的情况，需要进行更新驱动程序
问题2：可能会存在项目编辑器打开失败的情况，有一定原因也是由于网络原因，加载失败
打开编辑器后可对当前已选择的项目工程模板进行设计，以ue4与echats图表库交互为例：
需下载所需的echarts的demo示例代码：
- 得到一个html文件需引入ue4自执行代码
ue4版本
"object"!=typeof ue&&(ue={}),
ue4=function(functoid)
{
"object"!=typeof ue.interface && (delete ue.interface,ue.interface={});
return function(key,json,cback,timeout){
if( "object"!=typeof ue["$receive"] || "function"!=typeof ue["$receive"]["asyn"]){
console.error("[ue.$receive.asyn] drop message .... key"+key+" json"+JSON.stringify(json));
return ;
}
"string"==typeof key&&("function"==typeof json&&(timeout=cback,cback=json,json=null));
var backid=functoid(cback,timeout);
void "string"!==typeof json?ue["$receive"].asyn(key,JSON.stringify(json),backid):ue["$receive"].asyn(key,json,backid);
} ;
}(
function(callback,timeout){
if("function"!=typeof callback)
return"";
var funcid=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)})}();
return ue.interface[funcid]=callback,setTimeout(function(){delete ue.interface[funcid]},1e3*Math.max(2,parseInt(timeout)||0)),funcid
}
);
ue5版本
"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.ue5=ue.interface.broadcast);
执行js调用ue
ue4("js2ue", "hello world!")
或
ue5("js2ue", "hello world!")
执行ue调用js
ue.interface.ue2js = function(ueData){
var jsonObj = JSON.parse(ueData);
myChart.setOption(jsonObj);
};
完整代码
<!DOCTYPE html>
<html lang="en" 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://registry.npmmirror.com/echarts/5.4.3/files/dist/echarts.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.ue5 = 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'
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
ue.interface.ue2js = function (stringJSON) {
const json = JSON.parse(stringJSON)
myChart.setOption(json);
ue5("js2ue", "hello world!")
};
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
将html文件引入虚幻引擎流程
新创建项目后，创建关卡蓝图，引入控件蓝图
新增控件蓝图
设计器增加画布和webUI interface图表引入html文件以及js调用ue流程
-
增加点击按钮，点击后触发ue2js事件更新echarts数据，刷新页面图表
执行游戏即可看到如下效果：
更新前 -
更新后
附参考：
1、UE4 利用WEBUI插件完成UE与JS的交互 （UE4嵌入WEB）
2、UE4_Echarts图表_WebUI_JS和UE交互 视频
