UE5 WidgetBluePrint蓝图控件渲染流程解析

一、控件蓝图Widget BluePrint

1.什么是控件蓝图?

控件蓝图（Widget BluePrint）是负责Widget的，即UMG界面的UI设计。一般命名缩写为WBP_xxx。
在项目中我们时常需要创建标签，窗口以及各种可视化UI界面。这时就需要通过控件蓝图将对应的可视化界面制作出来，放到场景中，并实现对应的交互功能。

2.创建控件蓝图

点击空白处右键->用户界面->控件蓝图 既可以创建并制作需要的UMG界面

3.控件蓝图相关参数解析

在控件蓝图中可以添加各种各样的控件，而这些控件的渲染顺序由ZOrder决定。

ZOrder的值越高，则越靠后渲染，即将显示在顶部。需要注意的是，ZOrder只会影响当前控件蓝图中控件的渲染顺序，不同控件蓝图中的ZOrder不会互相影响。

可以注意的是，当ZOrder的值相同时，布局排在下面的会渲染在上方。可以理解为，渲染蓝图控件时，由上到下渲染，渲染顺序越靠后，则渲染在顶部。

4.将控件蓝图添加到场景中

创建好的控件蓝图可以通过两种方式添加到场景中。

通过create widget->add to viewport

一般在需要全局存在且布局格式一定时，会采用这种方法在初始化场景时进行界面的创建。因此需要在界面设计时，就避免按钮的重叠。

Add to viewport默认的ZOrder为0。
当不修改ZOrder时，创建的UMG界面会根据添加到视口(Add to Viewport)的先后顺序进行渲染，后添加的会渲染在前一个窗口的上方。
当修改了ZOrder后，则会根据ZOrder的进行渲染优先级的排序。ZOrder数字越高，控件所处的层级越高，即渲染在上方。

附加到actor中，在actor中添加widget component组件。

一般在不同位置生成，可以控制选择生成为场景控件还是屏幕控件。
可以直接将控件放置到需要的场景位置中，
当为屏幕控件时，需要注意不同控件之间的层级关系，避免形成遮挡，文章的第二部分中有相应的解析。

二、Widget Component

1.在Actor中添加控件蓝图

在组件->添加 中搜索widget就会出现widgetcomponent，将其添加到actor即可。

2.控件渲染顺序

在actor中的控件蓝图可以分为两大类，一种为场景控件world，一种为屏幕控件screen。
由下图中可以看到，当选择world时，控件在场景中被渲染为网格体，能够被场景中其他网格体遮挡。且窗口的大小与人物的距有关。此时的控件蓝图无法简单的通过鼠标点击button实现对应的事件。
选择space时，控件在屏幕中渲染，完全在场景外，不会被其他的网格体遮挡，且能够以固定的大小显示在屏幕上。此时的控件蓝图可以直接通过鼠标点击实现对应的button绑定事件。

不同widget component的渲染顺序：
ZOrder的值越高，则越靠后渲染，即将显示在顶部。同时需要修改SharedLayerName的名字。一个ZOrder图层对应一个SharedLayerName。

举例：
大地图的图层名为BigMap，对应的ZOrder为-99.
小地图的图层名为MiniMap，对应的ZOrder为-100.

即小地图的Layer ZOrder小于大地图的Layer ZOrder，大地图渲染在了小地图的上面。

将小地图的Layer ZOrder设为-98时，即小地图的Layer ZOrder大于大地图的Layer ZOrder，则小地图显示到了大地图上面。

且如图所示，Layer ZOrder只在新图层首次创建时才存在影响，之后添加到相同图层使用最初定义的ZOrder。

即第一次将BigMap的Layer ZOrder设为-99，那么后面相同命名（BigMap）的图层，即使将Layer ZOrder设为了-100，控件蓝图也还是会添加到最初的ZOrder为-99的图层。

如上图所示，此时BigMap的Layer ZOrder 为 -99，MiniMap的Layer ZOrder 为 -100.
后创建的绿色窗口加入了MiniMap的图层，但是Layer ZOrder 设为 -98，但是仍然显示在了大地图下方，说明它此时的Layer ZOrder还是为-100，即图层首次创建时的ZOrder。
因此需要注意：在screen模式下创建的控件蓝图需要做好图层分配，避免出现冲突。

3.图标设置近大远小效果

推荐：WidgetComponent->GetWidegt->SetRenderScale（设置渲染范围）
通过SetRenderScale（设置渲染范围）可以动态设置WidgetComponent中Widget的缩放比例，会自动缩放/放大一整个标签的效果。即不需要动态控制UMG里图片和文字的大小，非常的便利。

参考文档：【UE5】WidgetComponent的进阶使用

WidgetComponent->SetDrawSize(设置绘制大小)
通过SetDrawSize(设置绘制大小)可以设置WidgetComponent的绘制大小，缺点是并不会自动缩放WidgetComponent中widget的图片/文字/按钮的大小，需要在对应的UMG中也同步修改相关内容的大小。