UE5神通--POI解决方案

UE5：通用POI源码

三维可视化中，最常用的功能是定位一个POI点（point of interest，兴趣点），表示三维空间中用户关心的某一个坐标，通常需要在屏幕空间中标出这个坐标位置，通过一条箭头线指向这个POI并在旁边写上一些属性信息。

• 通过一个箭头指向POI所在的精确位置，避免一张图片覆盖在POI前面。

• 通过预设的字体图标库，指定任意的图标（字符），避免图片管理的困难。

• 允许在图标旁白标注名字，用简短的文字表示POI的标题。

• POI标题可以省略，代表纯图标的POI。

• 图标外框可以选择不通的形状：菱形、圆形、圆角方形等。

• 整体可以选择主题颜色，颜色会影响箭头线、图标、图标外框、文字。

因此，本方案提供了这么多种可配置的样式，可以满足绝大多数POI点的需求，用户可以尽情地组合这些选项，在UI上展示各种各样的POI点，同时使整体风格统一。下面分享一下这个通用POI资源的源程序（设计图纸）。首先需要准备5个资产：

• 常规字体（Font Face）：用于标题文字，包括中英文常用字符。

• 图标字体（Font Face）：用于图标，存入三五百个好看的icon，使用Unicode预留编码段。

• 字体包（Font）：用于组装常规字体和图标字体。

• UI组件（Widget Blueprint）：用于组装UI元素。

• Actor组件（Blueprint Class）：用于封装UI组件。

关于常规字体文件可以从网上下载各种中文字库（包含ASCII字符），中文字库通常几M大小。图标字体文件的话则得认真准备一番，可以请UI组设计一堆符合业务场景的icon，或者从各大免费的icon网站寻找合适的下载，最后打包生成字体文件即可，图标库通常也就几百K大小。字体文件直接拖到UE5中就会生成FontFace了。之后需要一个Font资产将前2个FontFace封装起来，再将Font同时作用于左上角的图标和右上角的文字。之所以不将2个FontFace合二为一，是因为图标库经常需要随业务更新，但中文库基本不变，因此将2者解耦。如此一来，图标和标题都可以使用任意的字符。接下来需要绘制UI组件了，新建一个Widget蓝图，增加以下标签：

除了标题栏的宽度随字符串长度而变化，整个UMG的尺寸是固定的，这里我们需要将中心点（pivot point）置于左下角的箭头中心，这样镜头旋转的时候，箭头点的位置固定不变，整个UMG绕箭头点旋转。

最后需要一个Actor蓝图来封装上面的的UMG：蓝图中增加一个Widget Component并设置为屏幕空间的渲染模式。这个蓝图主要用于处理像素流传来的接口参数，以及点击POI后的返回值。像素流接口格式如下：

ps.emitMessage({
          "type":     "spawn-poi",   "location": "X=18086 Y=1223779 Z=5204",   "icon":     "\uE999",   "name":     "POI点名称",   "color":    "R=1 G=1 B=1 A=1",   "id":       "poi001 类型1 类型2",   "shape":     "0" }); 

该接口需要传入以下参数，便可在场景中生成一个自定义的POI点。

• 类型：固定字符串"spawn-poi"。

• 坐标：单位 cm，需要将经纬度海拔转成三维空间中的 XYZ。

• 图标：传一个 Unicode 字符（预先自定义字体图标库）。

• 名称：POI 图标旁边展示的标题（可为空）。

• 颜色：POI 点的主题颜色，RGB范围是 0~1。

• 形状：0 菱形，1 圆形，2 圆角方形。

• 标签：空格分隔的字符串数组，比如 ID 和类型。

POI被点击时则返回这个POI所有的标签，同时让相机聚焦到于此使得POI置于屏幕中央。至此，5个资产都制作完毕，这个POI既可以直接拖到场景中作为内置actor，也可以通过像素流临时生成。