由于UE4强大的渲染效果,一些影视作品或者短片都开始尝试使用UE4来进行制作。
软件的界面十分易于理解,就不多做介绍了。
在UI相关的工作中,主要会用到以下几种文件:Blueprint( User Inteface-Blueprint) 也就是常说的UMG,是我们常用的UI工程文件
Font(字体资源拖入Content Browser自动生成)字体文件
Texture (PNG资源拖进来可以自动生成) 图片资源文件
Material 材质文件,可用于UI材质或者mesh材质
Actor(Blueprint Class-Actor)可以摆放到场景中的文件类型,用于制作3DUI
由于所有控件的Detail都是由一个属性池内的各个属性构成,因此在这先对通用的属性进行介绍,再具体介绍每个控件的一些不同之处。
3.1 Common 通用属性
变量越多,读表用时越长,因此程序未引用的图层尽量不要勾选。如image就是默认勾选variable的,其实没有必要。
搜索框
能够快速检索需要的detail栏内内容
3.2 Slot 插槽
坐标代表这个点在本控件上的位置,(0,0)代表左上角 (1,0)代表右下角
为什么和ccs不一样!!!
Anchors 锚点
UMG中通过锚点与校准点来进行适配,可以总结成三种:
1.九点适配(以中心点为例)
可以设置的内容:与单轴两端距离+另一轴的控件坐标+另一轴的控件尺寸。
3.根据父节点尺寸适配
Z Order Z轴顺序
UMG在渲染时是按Panel中图层从下至上的层级来渲染效果的,但是对于Canvas Panel例外。Canvas Panel的所有子集都是平行关系,因此有些时候会出现上方图层渲染层级高于下方的图层,这个时候可以调Zorder强行调整渲染层级。但是要尽量少用,会占用额外的渲染开销。另外,z轴顺序调整局限于该控件的父集内部,不能叠加。
根据控件的类型不同会有不同状态需要引用资源,如此处为button的normal态。
直接将资源拖到这里就可以进行引用(大部分控件都自带默认资源)。
Color and Opacity
与PS中对应的是Hex sRGB色 但是PS中采用的16进制色 为6位 UE4中的为8位
Size 尺寸
UMG制作时默认dpi为96像素/英寸,psd默认dpi是72像素/英寸。
在GUI设计时将dpi设为96,或者将72dpi下字体的字 乘以0.75,都能还原效果图中的效果。
Font Material 字体材质
Justification 对齐方式
Wrapping 自动换行
另外,Appearance下的AutoWrapText一般是不勾上的。
3.5 Interaction 交互性
点击下拉之后可以对控件的交互行为进行更细节的设置
例如当button的点击事件阻挡了Scrollbox接收滑动事件时,则可以将Touch Method设为Precise Tap。
3.6 Behavior 行为
Tool Tip Text 悬停提示
鼠标悬停的时候显示的提示文字内容
Visibility 可见性
此处可以控制游戏中的显示效果,但不影响在UMG制作时的显示与隐藏。Visible 可见并接受交互事件
Collapsed 不可见且不占用任何体积
Hidden 不可见但占用体积,不接收交互事件
Hit test invisible 可见,且他和他的子节点都不接受点击事件
Set hit test visible 可见,且他自身不接受点击事件,不影响子节点
由于visible状态可以接受交互事件,因此在收到交互事件的时候会遍历目前所有visible状态的UI控件,因此可见但不可交互的控件的visibility调成Set hit test visible会提高计算速度。
有许多控件的默认状态就是visible,例如image,因此在确认控件不接收交互事件时可以设为set hit test invisible可以减少不必要的开销。
Render Opacity 渲染透明度
控件的整体透明度设置
3.7 Clipping 裁切
3.9 Events 事件
可以通过对控件绑定事件来实现交互效果,点击之后会进图蓝图系统。蓝图系统十分强大,甚至可以通过直接连蓝图的方式完成游戏的设计,这里就不展开细说了。
4.1 Image 图片
图片不能添加子节点
文本的属性包括Slot、Font、Behavior、Warpping、Render Transform、Clipping,具体内容可以查询前面的介绍。
在Content内输入内容,可以通过shift+enter进行换行
4.3 Rich Text 富文本
富文本格式可以在一个文本框内显示出不同的字体格式甚至图片文字,为了实现这一效果,我们首先要创建一个字体格式表格。
4.4 Button 按钮
按钮控件可以添加一个子节点。
按钮的属性包括Slot、Appearance、Interaction、Behavior、Render Transform、Clipping,具体内容可以查询前面的介绍。
4.6 Progress Bar 进度条
进度条不能添加子节点。
4.8 Text Box 文本输入框
输入框不能添加子节点
文本输入有单行输入(Common>Text Box)和多行输入(Input>Text Box Multi-Line)两种。
4.10 Canvas Panel 画布面板
画布面板是一种基础的面板,其允许在任意位置布局、固定控件,并将这些控件与画布的其它子项按Z轴顺序排序。画布面板是非常适用于手动布局的控件。
值得注意的是子控件的Slot属性发生了变化。
如果数量不确定或内容不确定需要程序动态添加的列表,则需要把间距提前设计好放在node中。
4.12 Grid Box 格面板
格面板可以为你创建一套 格系统,并让子控件在该 格内进行布局。
划分好 格后,只需设置子节点的参数即可占用 格。
4.14 SafeZone 安全区
安全区控件的子节点会自动避开全面屏的安全区来进行适配。
SafeZone还可以设置只对某一个方向的安全区生效(比如攻击按键只想在iPhoneX上左右偏移,不会向上偏移)。
个人觉得有发展为折叠屏设备的适配容器的潜力 (ω)
4.16 Widget Switcher 选项卡切换器
控件切换器常见于Tab切换页面,切换器的子控件中每次一次最多只会显示一个。
4.18 User Created
所有创建好的UMG都可以在User Created里面被检索到。
序列帧中可以设置的属性极其丰富,基本包含了前面所有介绍过的控件属性。

在序列帧区CTRL+鼠标滚轮 缩放时间轴 域的快捷方式:
SHIFT+鼠标滚轮 滚动时间轴
六、结语
如果你能看到这里,恭喜你,大概你已经忘得差不多了吧
软件的学习还是要靠实际的操作才能理解与发现问题,所以赶紧实践一下吧。
当然笔者也是在一边摸索一边开发,如果有描述不完整或者有误的地方,欢迎指正与讨论。
声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!