Map Display System

Map UI / Rendering

Overview

The Map Display System is the UI implementation of Map Graph System to show the player their progress on the game and allow for planning of routes.

The UI is centred around 'MapDisplay' class which creates a Group of UI elements including a 'ScrollPane', and 'Image' that render the background, Nodes and line connection. Based on the 'NodeState' and 'RoomType' from 'MapGraph' System the node's will change their Images (see Map Graph System for more information on States). Lines are drawn between Nodes if they are deemmed to have a connection as defined in 'RoomDistributionConfig'.

To create a MapDisplay you need to pass a MapGraph as a argument.

MapDisplay

• The background is added first to ensure it sits at the bottom so all proceeding elements are above. addBackground() creates a new Image and sets the size to be the size of the window and then adds the background as an Actor to the Group.
• Nodes are then Added with addNodes() which iterates through the list of Nodes and creates a MapNodeActor and attachs the node to the MapInputHandler for each node. The position of each Node is calculated in getNodeX() and getNodeY()', the position is also stored to position the MapConnectionGroup` on the Nodes.
• The Connections are added by iterating over each node and then iterating over each connection the node has given by node.getConnections() (given in MapNode class. The Vector2 start is the current node being iterated on's position, and Vector2 end is the current connection being iterated. if the end is not null it creates a MapConnectionGroup which handles calculating the length and angle required to draw line between the nodes.
• To ensure the Connections are behind the MapNodeActor's all the MapNodeActors are then sent to the front of the UI. This is done since Connections are dependant on addNodes() to run first so it can't be added second.
• All asset loading needed to render UI is done in loadMapAssets

MapNodeActor

This class is responsible for configuring how each Node will look on the UI.

• The size of the Icons is calculated by dividing the width of the Map (also width of the game Window) by the number of Nodes we want in each layer and the spacing between them. For example, the MapDisplay can render 7 Nodes in one layer with 6 gaps between them, then 6 + 7 = 13f. size = mapWdith / 13f.
• This class provides the correct icon image url's depending on the RoomType in getNodeIcon() by using a switch state with embedded if statements where needed.
• Nodes that have been completed call addCompletedCross() which overlays a cross image on top of the respective node.
• checkNodeState() is responsible to change the opacity and sizing of Nodes based on their NodeState either, LOCKED, AVAILABLE, COMPLETED, OR CURRENT
• setHovered() defines how the Icon responds to being hovered by the mouse, in MapInputHandler it checks if the node is AVAILABLE, if so call this function.
• addCompletedCross() creates a new actor on top of the nodeIcon to visually indicate it has been completed.

MapConnectionGroup

This class is responsible for drawing a line to represent a connection (a valid path) between MapNodes.

• In the constructer the class calculates the length and angle using the parameters Vector2 start and Vector2 end provided from MapDisplay. A dotted line image is used as the line art, it's size and angle is set by the calculated values. The position of the start and end is the centre of the MapNodeActor's.
• The width of the nodeLine is calculated from a ratio of 16:128 (16 wide, 128 high)

Testing

• Testing for MapNodeActor and MapConnectionGroup can be found in the maps folder here
• MapDisplay is tested visually instead since it’s the UI implementation. The nodes should have at least a node’s width distance apart if they are to be next to each other. The map should be scrollable and the height of the map will scale with the number of layers. Connections should be drawn below nodes. The image for each node is dependant on it’s RoomType and NodeState