Map Widget

Map Widget

OVERVIEW

BACKGROUND LAYERS GENERATION

SUPPORT/FEEDBACK

EXAMPLE

Plugin contains two main classes to use anywhere

• SMapView - Slate widget class on the base of SPanel widget class (to be used in C++)
• UMapView - UMG panel class wrapping SMapView (to be used in C++, Blueprints)

and several helper classes for Background Layers Generation.

These classes allow user to create multilayered scalable maps with basic navigation:

• MULTILAYERED - both Background and Child widgets can be distributed into different layers with specific Scale Value to start blending and specific Scale Value to be fully blended (Blend In Range)
• SCALABLE - both Background and Child widgets can be scaled; Child widgets can have one of three different Scale Modes
• NAVIGATION - Zoom + Scroll

Normalized coords

It is very useful to have independent measure for map space and for this purpose many properties are expressed in Normalized coords. Normalized coords are defined by space occupied by map under Scale Value of 1. For example in Normalized coords left top corner - [0, 0], center - [0.5, 0.5], right bottom corner - [1, 1], etc…

Scale Mode

Child widgets can have different behavior regarding Scale Value depending on Scale Mode that is used:

• Not scaled - not scaled (usage case - same icon size, same font size)
• Area scaled - Area will be scaled (usage case - scaled icon size, same font size)
• Fully scaled - Child widget will be scaled (usage case - scaled icon size, scaled font size)

Background

To set up Background for Map you need to:

• Create new UDataTable asset with FMapViewBackgroundLayer structure for rows
• Edit created UDataTable asset - add rows and set their properties
• Set created UDataTable asset as the value of [Background Data Table] property for UMapView panel

FMapViewBackgroundLayer is a structure which defines Background layer.

PROPERTIES:

• [BlendInRange] - Blend In Range (from Scale Value when layer just starts to appear to Scale Value when layer is fully blended)
• [BackgroundItems] - Background items added to Background layer

FMapViewBackgroundItem is a structure which defines Background item.

PROPERTIES:

• [Area] - Area occupied by Background item in Normalized coords
• [Texture] - Texture used to paint Background item

Map View

To add UMapView panel it is needed to go through the same steps as it will be with any other UMG panel.

PANEL PROPERTIES:

• [Scale] - Current Scale Settings
• [Scale Rate] - Scale Rate used for Zoom In/Out (as multiplier)
• [Scale Profile/Mode] - Blend option used for Zoom In/Out
• [Scale Profile/Custom Curve] - Custom Curve used for Zoom In/Out
• [Offset] - Current Offset in Normalized coords
• [Scroll Rate] - Scroll Rate used for Scroll (as multiplier)
• [Background Data Table] - UDataTable asset with Background layers
• [Design] - this sub panel contains all things to use paint tool for Layering and filling

To add Child widgets to UMapView panel it is needed to go through the same steps as it will be with any other UMG panel. UMapView panel has its own Slot class.

SLOT PROPERTIES:

• [Position] - Position of the slot in Normalized coords
• [Size] - Size occupied by the slot in Normalized coords
• [Pivot] - Pivot of the slot relative to [Position] (Left top corner - [0, 0], center - [0.5, 0.5], right bottom corner - [1, 1])
• [Size To Content] - when is TRUE, Desired Size will be used instead of [Size]
• [Scaling Mode] - Scaling mode of the slot, only when [Size To Content] is TRUE
• [Z Order] - Order priority to paint with - higher values are painted last (and so they will appear to be on top)
• [Blend In Range] - Blend In Range of the slot (from Scale Value when layer just starts to appear to Scale Value when layer is fully blended)

Background Layers Generation

To generate Backgound Layers from UMap asset, follow through steps:

- Open UMap

- Place Shot Camera Actor (in Editor Viewport) and select it (in World Outliner)

- Set [Ortho Width] and [Ortho Far Clip Plane] to catch all required volume of UMap that should be used (in Details, check green gizmo in Editor Viewport)

- Hints for placement:

• Shots are taken in Orthographic Projection Mode, so direct distance between Shot Camera Actor and target has no impact on generation process
• Set Location to catch all required volume of UMap between [Ortho Near Clip Plane] and [Ortho Far Clip Plane] (in Details or in Editor Viewport)
• Set Rotation to catch required view point (in Details or in Editor Viewport)

- Hints for [Scale Range] (in Details)

• Scale Range Min in most cases is 1 - when no any scaling applied, it should be original size
• Scale Range Max should be greater than Scale Range Min to represent valid scaling range, set it depending on project requirements (default value is 1000)

- Hints for [Shot Layers] (in Details)

• Layer 00 is root Shot layer, Blend In Range for it is always set to Scale Range Min, this Shot layer cant be removed
• Use Plus Button to add Shot layer and Cross button to remove Shot layer
• [Subdivision] defines how many pieces will be this Shot layer subdivided to - If Shot layer has [Subdivision] equal to 2x2 that means it will be subdivided into 4 pieces during generation process (check green gizmo in Editor Viewport)
• [Subdivision] is accumulated via multiplication - If Layer 00 has [Subdivision] equal to 2x2 and next Layer 01 has [Subdivision] equal to 2x2 as well, that means Layer 00 will be subdivided into 4 pieces while Layer 01 will be subdivided into 16 pieces
• [Texture Size] defines what will be output size for texture for each piece of Shot layer during generation process with respect to Aspect Ratio
• [Blend In Range] - Blend In Range (from Scale Value when layer just starts to appear to Scale Value when layer is fully blended)

- Create/open folder (in Content Browser)

- Open Actor Context Menu for Shot Camera Actor (with Right Mouse Button) and click on Make Shots (in World Outliner or in Editor Viewport)

Results:

• Textures will be generated and imported according to Shot Camera Actor placement and configuration
• UDataTable asset will be created and filled according to Shot Camera Actor placement and configuration

Now, this UDataTable asset can be set as value for [Background Data Table] property of UMapView panel.