MiniMap - UQdeco2800/2022-studio-2 GitHub Wiki

MiniMap

The concept for the mini-map was first designed in the early stages of game development:

Original MiniMap

  • The initial design inspiration was then transferred to a pixel art-style prototype which reflected the original map layout map layout
  • Simple design elements such as columns, and other environmental features have been added in this first iteration, and further detail will be added to the mini-map, which will be reflective of the game environment, as it evolves.

image

MiniMap Iteration

As the updated maps grew in scale and complexity, it became necessary to implement a minimap in both levels that could allow the user to more easily navigate through the level towards their highlighted objective. In order to access the minimap, esnure that the game is being run in 2560 x 1600 resolution, press the M key on either level to bring it up and then use the M key again to put the minimap away.

MiniMap Level 1

The first level's minimap utilises an aesthetic consistent with the maps tropical beach environment, helping to immerse the player in their surroundings even whilst studying the map.

MiniMap Level 2

The seconds level's minimap maintains the utilitarian aesthetic of the map, ensuring the player has no relief from the claustrophobic tension that the map elicits.

Minimap Implementation

The implementation of the minimap is triggered in the KeyboardPlayerInputComponent class: case Keys.M: entity.getEvents().trigger("toggleMinimap"); return true;

This trigger is read by a listener in the PlayerActions class: entity.getEvents().addListener("toggleMinimap", this::toggleMinimap);

This calls toggleMinimap(), which first checks if the minimap is open yet: private void toggleMinimap() { if (!miniMapOpen) { ServiceLocator.getInventoryArea().displayMinimap(); } else { ServiceLocator.getInventoryArea().disposeMinimap(); } logger.info("Minimap toggled: " + miniMapOpen); EntityService.pauseAndResume(); miniMapOpen = !miniMapOpen; }

If it is it calls disposeMinimap() to dispose of it from the GameAreaDisplay class: minimapGroup.remove();

If the minimap isn't already called, it calls displayMinimap() to draw the minimap image, with an if statement to determine which GameArea the player is in:

    if (gameArea.getClass().getSimpleName().equals("ForestGameArea")) {
        // Set Minimap Image to Level 1 Minimap
    } else if (gameArea.getClass().getSimpleName().equals("UndergroundGameArea")) {
        // Set Minimap Image to Level 2 Minimap
    } else {
        logger.info("Game area invalid for minimap");
        return;
    }

    minimapImage.setSize(1200, 1465);
    minimapImage.setPosition(Gdx.graphics.getWidth() / 2 - minimapImage.getWidth() / 2,
            Gdx.graphics.getHeight() / 2 - minimapImage.getHeight() / 2);
    minimapGroup.addActor(minimapImage);
    stage.addActor(minimapGroup);
    stage.draw();`

Minimap Sequence Diagram

image

Whole Map View Lvl2 lvl2map_mini

MiniMap Design minimap_des_1

In-Game After pressing 'M':

image

User Testing and Test Results

Interviews were conducted with four students after utilising the minimap feature in order to gain a better understanding of how effectively the feature is serving it's purpose. From these interviews, the majority of users found that the aesthetic of the minimaps helped it to feel like it belonged in each map, and the arrows made it clear where their goal was. However, one user found that it was not clear what the arrow represented without the context of the game. As well as this, it was clear that users would like for there to be more information on the maps, such as the users current location, locations of weapons and major enemies. Users also found that the minimaps were not responsive to the resolution of the game. This data has helped to provide the future direction for this feature in the next sprint, to further improve the user's experience.

Testing Purpose

The hypothesis of this testing is that the minimap will make it easier for users to understand the layout of the map, and thus will make it easier for them to navigate it. The purpose of this testing is to test this hypothesis and also to discover and failures of the feature and how it could be improved.

Testing Plan

  1. Inform the user that they press M to open and close the minimap
  2. Ask the user to open the game and use the minimap to navigate to the next level, thinking aloud as they go.
  3. When they reach the next level, ask them to navigate to the rightmost point of the map, and then to find the boss, thinking aloud as they go.

Sprint 4 MiniMap Redesign

USER TESTING MiniMap Redesign:

Objective of this testing: The objective of this testing is to obtain user opinion and feedback on drafted/prototype MiniMap designs for the redesign and improvement of the level 1 and 2 MiniMaps for this sprint. This testing also aims to find out user opinion on the emphasis of certain components such as crafting tables in the MiniMap. This user test is a version of A/B testing, whereby multiple options are presented and users are asked to identify which prototype (in this case the MiniMap) they prefer. This testing subsequently will inform the improved MiniMap design process.

Testing Plan:

Testing Method: Google Form Survey

  1. Create draft redesigns for MiniMap levels 1 and 2 (not separate, just general prototypes for both levels in order uphold design consistency).
  2. Create Google Form Survey that includes the proposed prototype redesigns, and provide a space for teams to give any further requests/comments on the designs. Include questions on the component emphasis for crafting tables, NPCs and Enemies.
  3. Based on the results/feedback, create a base design for both levels and change the design & colours accordingly to match each level.

Tested Prototype Designs:

User Test Results:

User Test Analysis/Evaluation

  • From the user testing, it was evident that Prototype 4 was the preferred MiniMap interface. Comments received mentioned the effective use of columns which were incorporated to create a cohesive tie between the MiniMap and the overall theme of the game.

  • One comment also mentioned: "Make sure the NPCs for the level 1 map and level 2 map are included in the respective minimaps". This informed our choice of placing NPC characters for our subsequent redesign and reinforced the notion to include NPCs within the MiniMap UI.

  • Additional survey questions within this user test confirmed that the location of the crafting tables should be included in the MiniMap, with 100% of responses in agreement. This was subsequently implemented into the design, in alignment with our testing feedback, and with a view to improving MiniMap functionality.

MiniMap Level 1 Redesign

Iteration 1

Initial redesign of MiniMap, acting as a base for both level 1 and 2. Subsequent design iterations will be customised to the theme of each level.

pixil-frame-0 21

Iteration 2

Addition of colours to match the theme of Level 1. Sandstone-coloured columns and green accents have been added to reflect Level 1.

pixil-frame-0 19

Addition of NPCs and Crafting Tables

craftingTable

npc 2

npc 1

Iteration 3

The locations of each crafting table were marked and crafting tables were added to the map. Additionally the NPC characters were added, as per design ideation and user-testing feedback.

pixil-frame-0 19

Final Design

After receiving further feedback, spawn and end points were marked on the MiniMap to improve usability.

image

MiniMap Level 2 Redesign

Added in crafting tables into the MiniMap: image

Iteration 1:

Changed base design colours to match Level 2 pallet.

image

Iteration 2:

Added in 2 NPC characters from Level 2.

The NPCs look a bit out of place and are too large.

Iteration 3:

Tried out 2 Crocodile NPCs instead and made them smaller.

The green used in the NPC is quite bright and doesn't contrast very well with the rest of the design.

Iteration 4:

Should include indications of endpoint (the plug location) and spawn point. NPC is more fitting than the crocodile due to colours.

Final Design

pixil-frame-0 (50)