Sprint 3 Implementation: Key Binds Menu

Description

The key binds menu will be found in the pause screen ("Controls"). The user will be able to see keys that are used in the game such as how to open the inventory or which buttons to use for each skills. In this feature, the players will also be able to change the key binds.

How to use

• To be able to access the key binds menu, the user has to press "esc" to access the pause screen and from the pause screen, the "controls" button need to be clicked. The user can change the key binds and customise it to their preference. This can be accessed by clicking on the letter and typing a letter that will be assigned as the new key.

Inspirations

Source: https://www.reddit.com/r/PixelArt/comments/1rnxgw/occc_game_menu_screen/

Source: https://github.com/Maescool/Catacomb-Snatch/issues/477

Draft 1: Base Design

The initial design is inspired by the hanging board in the first inspiration photo. However, a banner was included at the top to inform the user the current screen menu they are in as it will also be used for the pause menu.

Draft 2: New Background + Texts

To add Greek elements to the design, pillars in the background were included.

Draft 3: Level 2 Design

To ensure that the designs are consistent, a level 2 themed key bind menu is created.

User Testing Plan

Aim: To attain constructive feedback regarding the key binds screen design. In addition, the pause screen will be redesigned for a consistent design menu.

Instructions: Fill the survey link: https://forms.gle/ZLuRpZ5fH46Sma4b9

Questions:

• What do you like about the design? [ Lvl 1 and 2 ]
• What do you not like about it?/ How can it be improved? [ Lvl 1 and 2 ]

Results

Due to the factor that it is currently semester break. Unfortunately there was only a limited response of 3 people who did the survey. The results are listed below:

Level 1: What do you like about the design?

From these feedback, people seemed to like the simplicity of the design as well as the colour scheme. This information was collected from the user to determine which elements they liked to help iterate other level designs.

Level 1: Dislikes + Improvements / Recommendations

It is a common issues with the button positioning as well as including more tree vines or water / atlantic elements. The design can be improved by creating an outline on the next to match with the theme further as well as moving the position of it. However, due to the limited space taken up by the key bind texts such as "Enter is used to enter the portal", it is hard to play around with the text alignment of the next button. This can be experimented during the iteration phase.

Level 2: What do you like about the design?

According to the survey, the users enjoyed the rugged and metallic look of the screen. Keeping its simplicity like level 1's design.

Level 2: Dislikes + Improvements

From the survey feedback, someone suggested to include wear and tear to the design as well as adding a little bit more colour as it is slightly overlapping. In the future design, little wear and tears can be added in the background to add texture as well as including a player sprite to add more colours to the screen. Experimentation to the colours will also be conducted to better match with the theme as well as the colours of level 2.

Note: The survey included questions regarding the pause screen menu but the results will be posted on the Pause Menu wiki page.

New Design - Level 1

This is the new design for level 1 key bind menu. New screen layout with vein as atlantic elements was added as well as a new "next" button with a new positioning (a little bit more away from the corner). The iterated design includes:

• Veins - to add texture to the background
• New button - Instead of the plain text with the arrow, a button was made for consistency purpose as all other buttons in the game have a background and outline.
• New text alignment - The next button is positioned so its not too close to the corner but have enough space for the key binds information.

New Design - Level 2

The new design for level 2 included more wear and tear to add texture to the background as well as a new button to keep consistency throughout both screens.

New Design - Individual Letters / keys

To allow the key binds to be changed, individual letters was made so the image can be replaces depending on the user's keyboard input. Below is an example of an individual letter created for level 1 and 2.

A total of 34 keys has been made which contains the following letters and characters:

• A - Z
• 1 - 4
• Esc
• Shift
• Space
• Enter

Future Testing Plans

Adding a double key bind option can be a possible future feature. Similar to the game "Valorant" the user can have two key bind slot, just in case they have a mouse with micro / different functionalities for easier access and gameplay. In addition, since there was a limited amount of answers from the survey, another survey can be attained to further enhance the design of the screens.