UE5：通用POI源碼

三維可視化中，最常用的功能是定位一個(gè)POI點(diǎn)（point of interest，興趣點(diǎn)），表示三維空間中用戶關(guān)心的某一個(gè)坐標(biāo)，通常需要在屏幕空間中標(biāo)出這個(gè)坐標(biāo)位置，通過(guò)一條箭頭線指向這個(gè)POI并在旁邊寫(xiě)上一些屬性信息。

• 通過(guò)一個(gè)箭頭指向POI所在的精確位置，避免一張圖片覆蓋在POI前面。

• 通過(guò)預(yù)設(shè)的字體圖標(biāo)庫(kù)，指定任意的圖標(biāo)（字符），避免圖片管理的困難。

• 允許在圖標(biāo)旁白標(biāo)注名字，用簡(jiǎn)短的文字表示POI的標(biāo)題。

• POI標(biāo)題可以省略，代表純圖標(biāo)的POI。

• 圖標(biāo)外框可以選擇不通的形狀：菱形、圓形、圓角方形等。

• 整體可以選擇主題顏色，顏色會(huì)影響箭頭線、圖標(biāo)、圖標(biāo)外框、文字。

因此，本方案提供了這么多種可配置的樣式，可以滿足絕大多數(shù)POI點(diǎn)的需求，用戶可以盡情地組合這些選項(xiàng)，在UI上展示各種各樣的POI點(diǎn)，同時(shí)使整體風(fēng)格統(tǒng)一。下面分享一下這個(gè)通用POI資源的源程序（設(shè)計(jì)圖紙）。首先需要準(zhǔn)備5個(gè)資產(chǎn)：

• 常規(guī)字體（Font Face）：用于標(biāo)題文字，包括中英文常用字符。

• 圖標(biāo)字體（Font Face）：用于圖標(biāo)，存入三五百個(gè)好看的icon，使用Unicode預(yù)留編碼段。

• 字體包（Font）：用于組裝常規(guī)字體和圖標(biāo)字體。

• UI組件（Widget Blueprint）：用于組裝UI元素。

• Actor組件（Blueprint Class）：用于封裝UI組件。

關(guān)于常規(guī)字體文件可以從網(wǎng)上下載各種中文字庫(kù)（包含ASCII字符），中文字庫(kù)通常幾M大小。圖標(biāo)字體文件的話則得認(rèn)真準(zhǔn)備一番，可以請(qǐng)UI組設(shè)計(jì)一堆符合業(yè)務(wù)場(chǎng)景的icon，或者從各大免費(fèi)的icon網(wǎng)站尋找合適的下載，最后打包生成字體文件即可，圖標(biāo)庫(kù)通常也就幾百K大小。字體文件直接拖到UE5中就會(huì)生成FontFace了。之后需要一個(gè)Font資產(chǎn)將前2個(gè)FontFace封裝起來(lái)，再將Font同時(shí)作用于左上角的圖標(biāo)和右上角的文字。之所以不將2個(gè)FontFace合二為一，是因?yàn)閳D標(biāo)庫(kù)經(jīng)常需要隨業(yè)務(wù)更新，但中文庫(kù)基本不變，因此將2者解耦。如此一來(lái)，圖標(biāo)和標(biāo)題都可以使用任意的字符。接下來(lái)需要繪制UI組件了，新建一個(gè)Widget藍(lán)圖，增加以下標(biāo)簽：

除了標(biāo)題欄的寬度隨字符串長(zhǎng)度而變化，整個(gè)UMG的尺寸是固定的，這里我們需要將中心點(diǎn)（pivot point）置于左下角的箭頭中心，這樣鏡頭旋轉(zhuǎn)的時(shí)候，箭頭點(diǎn)的位置固定不變，整個(gè)UMG繞箭頭點(diǎn)旋轉(zhuǎn)。

最后需要一個(gè)Actor藍(lán)圖來(lái)封裝上面的的UMG：藍(lán)圖中增加一個(gè)Widget Component并設(shè)置為屏幕空間的渲染模式。這個(gè)藍(lán)圖主要用于處理像素流傳來(lái)的接口參數(shù)，以及點(diǎn)擊POI后的返回值。像素流接口格式如下：

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

該接口需要傳入以下參數(shù)，便可在場(chǎng)景中生成一個(gè)自定義的POI點(diǎn)。

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

• 坐標(biāo)：單位 cm，需要將經(jīng)緯度海拔轉(zhuǎn)成三維空間中的 XYZ。

• 圖標(biāo)：傳一個(gè) Unicode 字符（預(yù)先自定義字體圖標(biāo)庫(kù)）。

• 名稱：POI 圖標(biāo)旁邊展示的標(biāo)題（可為空）。

• 顏色：POI 點(diǎn)的主題顏色，RGB范圍是 0~1。

• 形狀：0 菱形，1 圓形，2 圓角方形。

• 標(biāo)簽：空格分隔的字符串?dāng)?shù)組，比如 ID 和類型。

POI被點(diǎn)擊時(shí)則返回這個(gè)POI所有的標(biāo)簽，同時(shí)讓相機(jī)聚焦到于此使得POI置于屏幕中央。至此，5個(gè)資產(chǎn)都制作完畢，這個(gè)POI既可以直接拖到場(chǎng)景中作為內(nèi)置actor，也可以通過(guò)像素流臨時(shí)生成。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。