【UE】Simple realization of screen UI positioning

[UE] Simple realization of screen UI positioning three-dimensional coordinate method

achieve effect

screen space positioning

scene space positioning

Generally, there are two ways to realize POI, scene space UI positioning and screen space UI positioning.

Scene space positioning : The UI is similar to the instance model, and its position and size are unchanged relative to the scene. Mostly suitable for first-person third-person small scenes.

Screen space positioning : The UI size is fixed and will not change as the scene changes. Mostly suitable for scenes from God's perspective.

Implementation

Create a UI control blueprint

1. Create a UI Control Blueprint

   

2. Name it UI_POI (you can name it here)

3. Create a canvas panel to create a button or image

   

4. Anchor point adjustment, Anchors (anchor point) to the middle and lower position, Aignment (alignment) should also be adjusted to the middle and lower position, and x=0.5, y=1

   

POI creation

1. Create Actor blueprint class

2. Name it BP_UIPoint (you can name it here)

3. Add the control component of UserInterface (English name Widget)

   

4. Details→UserInerface→Space of the widget control component select World (scene space positioning); select Screen (screen space positioning)

5. Details→UserInerface→WidgetClass of the widget control component select the previously created UI control class (UI_POI)

6. Adjust the Details→UserInerface→Pivot (pivot) of the widget control component to the middle and lower position, and x=0.5 y=1 (this is very important, if you want the bottom arrow of the ui to point to the point of interest, this operation is necessary. Of course It can also be adjusted if you want left positioning and friend positioning)
   

7. Put the point of interest into the scene to complete the setup