当前位置：首页>编程语言>正文

ue4技术分享

编程语言2024-10-22 00:40:47

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
4.26：https://cowtransfer.com/s/5be173e137ae4a
4.27：https://cowtransfer.com/s/8cb6a0761faf45
5.0：https://cowtransfer.com/s/86830831c83a45

下载压缩包后需将文件至于通过虚幻引擎对应版本的项目文件下的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">

<head>
  <meta charset="utf-8">
</head>

<body>
  <div id="container"></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>