Ryan Laley Minimap Part II - jgoffeney/Cesium4Unreal GitHub Wiki

Back

Reference

Description

This part adds a player icon to match the player rotation.

Adding an Overlay

We need to create an overlap to allow for image layers to be rendered in the Minimap.

  • Under the Minimap Widget Designer view:
    • Go to the Minimap Widget Hierarchy and delete the Map _Image _component.
    • Add an Overlay component as a child called Map Overlay and set Is Variable.
    • Add an Image component as a child to the Overlay as Map and set Is Variable.
      • Set the Appearance->Brush->Image as the material instance we used previously. For me BlueMarbleWithBars_Mat_Inst.
      • Under Slot(Overlay Slot)->Padding set the horizontal and vertical alignments to fill.
  • Under the Minimap Widget Graph view:
    • The input to the GetDynamicMaterial node is broken so drag in the map variable and connect it.

Creating User Icon Widget

The user icon will exist in it own widget layer.

  • Import in the image you will use for the user icon.
  • Create a new blueprint via User Interface->Widget Blueprint (named PlayerIcon_BP).
    • Open its editor
      • Delete the Canvas component.
      • Add an Overlay component.
      • Add an Image component as a child of the overlay and name it PlayerIcon.
        • Set it Slot(Overlay Slot)->Padding alignment buttons to center.
        • Under Appearance->Brush set the Image to the user icon file you added.
          • Set Image Size to 32 x 32
    • Switch to the graph
      • Make sure the PlayerIcon variable is exposed
      • Drag on the PlayerIcon variable, create a SetBrush node from it and connects its input exec pin to the Event Pre Construct exec pin.
      • From the SetBrush node's In Brush input create a MakeSlateBrush node.
        • Set the MakeSlateBrush->Image to your player icon image.
  • Open the Minimap widget graph.
    • Add a new function to the graph named AddPlayerIcon.
    • Create a node Create Widget and under Class choose the player icon widget PlayerIconBP to construct it at start up.
    • From the return of Create Widget drag out and Promote To Variable and name the variable PlayerIcon.
    • Drag in the Map Overlay variable and create an AddChildToOverlay node.
    • From the PlayerIcon SET node connect the exec pin to AddChildToOverlay's pin and the return to AddChildToOverlay->Content
      • Child widgets are rendered over their parents.
    • From AddChildToOverlay's return create SetHorizonalAlignment and SetVerticalAlignment nodes with the values set to Center.
      • Hook up the exec pins in serial.

Rotating the Player Icon (Geospatial Version)

This is similar to the video but for my world map use case.

CreatePlayerIconFunction

  • Go back to the Minimap event graph and add the AddPlayerIcon function to the end of the Event Construct graph.

MinimapConstructEventWithIcon

To get the geospatial rotation of the player the DynamicPawn object is grabbed and then the location and rotation of its camera component are grabbed. The rotation of the Pawn object does not get updated so it has to come from the camera. Then the Cesium Georeference function InaccurateTransformRotatorUnrealToEastNorthUp is used to transform from Unreal to ENU angles of which the east component provides the icon rotation.

To avoid fiddling with the angle then have your icon in your source image point to the right original.

PlayerIconRotationGraph

As the player looks around the arrow updates in the correct direction.

AppRotatePlayerIcon