Ue5 magic power - POI solution

UE5： Universal POI Source code

In 3D visualization , The most common function is to locate a POI spot （point of interest, Point of interest ）, Represents a coordinate concerned by users in 3D space , It is usually necessary to mark this coordinate position in the screen space , Point to this through an arrow line POI And write some attribute information next to it .

• Point to by an arrow POI The exact location , Avoid a picture covering POI front .

• Through the preset Font Icon Library , Specify any icon （ character ）, Avoid the difficulty of image management .

• Allow to mark the name in the icon narration , Express in short words POI The title of the .

• POI The title can be omitted , Representing pure icons POI.

• The shape of the icon frame can be selected ： The diamond 、 circular 、 Rounded corners, squares, etc .

• The overall theme color can be selected , The color affects the arrow lines 、 Icon 、 Icon outline 、 written words .

therefore , This solution provides so many configurable styles , Can satisfy the vast majority of POI The needs of the point , Users can freely combine these options , stay UI Show a variety of POI spot , At the same time, make the overall style unified . Now let's share this general POI Source program of resources （ Design drawings ）. First of all, you need to prepare 5 Assets ：

• Regular Fonts （Font Face）： For title text , Including common Chinese and English characters .

• Icon Font （Font Face）： For icons , Deposit three or five hundred beautiful icon, Use Unicode Reserved code segment .

• Font package （Font）： For assembling General and icon fonts .

• UI Components （Widget Blueprint）： For assembling UI Elements .

• Actor Components （Blueprint Class）： For encapsulation UI Components .

About the regular font files, you can download various Chinese font libraries from the Internet （ contain ASCII character ）, Chinese word libraries are usually a few M size . Icon font files should be carefully prepared , Yes, please UI The group designs a stack of icon, Or from the major free icon The website looks for the right download , Finally, the font file can be generated by packaging , Icon libraries are usually just a few hundred K size . Drag the font file directly to UE5 Will generate FontFace 了 . Then you need a Font Assets will be before 2 individual FontFace encapsulated , then Font Both the icon in the upper left corner and the text in the upper right corner . Why not 2 individual FontFace Become , The reason is that the icon library often needs to be updated with the business , But the Chinese library is basically unchanged , So it will 2 Decoupler . In this way , Icons and titles can use any character . Next you need to draw UI Component , Create a new one Widget The blueprint , Add the following labels ：

Except that the width of the title block varies with the length of the string , Whole UMG The size of the is fixed , Here we need to put the center point （pivot point） Center the arrow in the lower left corner , So when the lens rotates , The position of the arrow point is fixed , Whole UMG Rotate around the arrow point .

Finally, we need a Actor Blueprints to encapsulate the above UMG： Add one to the blueprint Widget Component And set it to screen space rendering mode . This blueprint is mainly used to deal with the interface parameters passed from pixels , And click POI The return value after . The format of the pixel stream interface is as follows ：

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

The interface needs to pass in the following parameters , You can generate a custom in the scene POI spot .

• type ： Fixed string "spawn-poi".

• coordinate ： Company cm, It is necessary to convert the longitude, latitude and altitude into a three-dimensional space XYZ.

• Icon ： Pass a Unicode character （ Customize Font Icon Library in advance ）.

• name ：POI The title displayed next to the icon （ May be empty ）.

• Color ：POI Dot theme color ,RGB The scope is 0~1.

• shape ：0 The diamond ,1 circular ,2 Rounded square .

• label ： Space delimited string array , such as ID And type .

POI When clicked, it will return to this POI All the labels , At the same time, let the camera focus on this so that POI In the center of the screen . thus ,5 All the assets have been made , This POI It can be directly dragged into the scene as a built-in actor, It can also be generated temporarily through the pixel stream .