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，也可以通過像素流臨時生成。

總結

以上是生活随笔為你收集整理的UE5神通--POI解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。