UE4 3D UI怎么做

UE4引擎编辑UI通常使用WidgetBlueprint，HUD涵盖的面比WidgetBlueprint更广，包含2D、3D和其他，使用c++进行编写，但做UI不如WidgetBlueprint细致、功能多。首先，在ContentBrowser里右键选择生成一个WidgetBlueprint，打开WidgetBlueprint，根据需求选用Image、Text、ProgressBar等等组件设计你的UI画面。VR游戏里建议尽量降低UI在视野画面上占用的比例，话说，哪个逗逼喜欢看到眼前老有块抹不掉的东西。UI画面排版好之后，可以按需求设计曲线和帧动画，然后可以选定一个组件，在Details窗口里凡是有Bind的项都可以点开Bind选项编写逻辑，哥们可以根据需要设计编写，然后在Graph页面统一处理UI信息。注意，如果主角或者其他蓝图类需要调用到UI组件或者UI组件里的变量，则需要将组件的IsVariable项勾上，就在Details窗口第一行组件名后面。

WidgetBlueprint做好后，我们就要确定我们选择哪种方法给相机添加上UI，我这有两种方法，一种是直接绑到相机上，一种是动态添加给相机。直接绑到相机。打开主角的Character蓝图，添加一个SpringArm拉到Camera下面，再添加一个Widget组件拉到SpringArm下面，在Widget组件Details窗口的UserInterface栏的WidgetClass项设置UI蓝图类。注意，设置好UI蓝图类后，还需要将Widget组件倒转180度，并调节Widget的位置，使UI正好在相机视野里，而且这种方法做出的UI会随动作抖动，所以要严格控制抖动的范围和方向。Widget组件加到主角蓝图之后，Widget组件的UserInterface下的Space项选World，Image的Alpha值只有0和1两种情况，选Screen，Alpha值才可控。

动态添加给相机。先用CreateUIWidget生成一个UI组件，然后用AddtoViewport将UI添加到主角的视野里，如果需要隐藏UI，可以直接用RemovefromParent拉出来，等需要显示的时候再直接用AddtoViewport添加上去。注意，避免重复用Create

UIWidget生成组件，以免占用大量内存，生成后可以用AddtoViewport和[b]RemovefromParent控制UI的显示和隐藏。

学了3个月UE4，感觉上VR游戏其实并不太注重UI这部分，现阶段市面上的VR游戏绝大多数直接省略UI，学做UI只是让你在接到需求后多条路子去实现而已。

ue4中ui主要通过控件来控制粒子特效的。

控件是一种提供简单功能的UI元素。比如，按钮控件提供了玩家可见可点击的物体。控件本身不一定是可视的。控件也可以嵌套控件。你甚至可以创建一个铺满屏幕的控件。了解完什么是控件，现在动手创建一个。

创建控件

Content Browser界面进入UI文件夹。点击Add New按钮，选择创建User Interface\Widget Blueprint，将其重名为WBP_HUD。

双击WBP_HUD打开UMG UI Designer。

UMG UI Designer

UMG UI Designer由七个主要元素组成：

Designer：这个区域展示所选控件的外观。通过长按右键移动鼠标拖动面板，滑动滚轮缩放面板。

Details：展示所选控件的参数

Palette：可用控件列表

Hierarchy：当前所使用的控件列表

Animations：控件能够基于位置，大小等外观参数制作动画效果。该面板展示控件的所有动画

Timeline：当你选中动画时，该面板会展示对应的动画参数和关键帧

Editor Mode：通过该按钮可以切换编辑器的Designer和Graph模式。Graph模式的编辑器显示类似于蓝图的Event Graph。

创建Text控件

Text控件非常适合展示像计数和倒计时这样的数字信息。

在Palette面板搜索Text控件。通过按住左键拖拽控件至Designer面板。

别在意文本内容，等等我们会替换它。

先选中Text控件，在Details面板顶部的文本框输入CounterText进行重命名。

你可以在Designer面板通过长按左键拖拽控件。

你也可以通过左键点击拖拉选中框来调整控件的大小。这样可以调整控件的包围框。Unreal引擎不会渲染包围框之外的内容。

同样的，你可以通过Details面板输入数值来修改控件的位置和大小。设置CounterText如下：

Position X： 200

Position Y： 50

Size X： 500

Size Y： 100

此时文本只占了包围框很小一部分显示。

我们可以在Detail面板的Appearance设置调大字体大小。在Font属性的最右侧文本框可以设置字体大小。

将字体大小调成68。

接着我们再在文本框旁添加一个图标来提升视觉效果。

---