Settings and Keybinds UI

Overview

The Settings and Keybinds UI was redesigned to improve visual consistency, readability, layout and navigation across the game's settings screens. The updated interface uses the established Pixthulhu UI skin and the main menu background to maintain a consistent visual style throughout the game.

The implementation focuses on improving the presentation of settings controls and keybind entries while preserving the existing functionality.

Settings Screen

The Settings screen was updated to provide a cleaner and more consistent layout.

Visual Design

• Uses the existing main menu background image.
• Applies a dark overlay to improve the readability of UI elements.
• Displays the settings content inside a centred panel.
• Improves spacing and alignment between controls.
• Refines typography and button sizing to improve readability.

Settings Controls

The screen retains the existing settings controls, including:

• FPS Cap
• Fullscreen
• VSync
• UI Scale
• Resolution

The existing controls and their associated functionality are preserved.

Navigation Buttons

The Settings screen provides the following navigation options:

• Exit: Leaves the Settings screen using the existing exit behaviour.
• Keybinds: Opens the Keybinds screen.
• Apply: Applies settings using the existing settings functionality.

Keybinds Screen

The Keybinds screen was updated to improve readability and prevent UI elements from overlapping.

Layout Improvements

• Adjusts the layout and dimensions of the keybind display area.
• Keeps keybind entries within the available panel space.
• Prevents keybind entries from overlapping the bottom navigation buttons.
• Uses the same visual style as the Settings screen.

Dynamic Screen Title

The screen title updates according to the currently displayed content:

• SETTINGS when the Settings screen is displayed.
• KEYBINDS when the Keybinds screen is displayed.

This helps the player identify which screen they are currently viewing.

Back Navigation

When the player opens Keybinds, the navigation button changes from Keybinds to Back.

Selecting Back hides the Keybinds screen and restores the Settings screen. The navigation button label and screen title are also reset to their Settings state.

Implementation Details

The UI changes are implemented in:

core/src/main/com/csse3200/game/components/settingsmenu/SettingsMenuDisplay.java

The implementation reuses the existing Pixthulhu skin and main menu background asset rather than introducing a separate global UI theme.

Key implementation elements include:

• Background and overlay images.
• A centred panel built using the existing UI components.
• A stack to manage the Settings and Keybinds content.
• A shared screen title that updates during navigation.
• A navigation button whose label changes depending on the active screen.

The changes are limited to the Settings and Keybinds presentation and navigation, preserving the existing settings functionality.

Testing

The following checks should be performed when validating the implementation:

1. Launch the game and open Settings.
2. Verify that the background, dark overlay and centred panel display correctly.
3. Check that all settings controls and navigation buttons are readable and correctly positioned.
4. Open Keybinds and verify that the title changes to KEYBINDS.
5. Check that keybind entries do not overlap the navigation buttons.
6. Verify that the navigation button changes to Back.
7. Select Back and confirm that the Settings screen is restored.
8. Verify that existing settings and keybind functionality remains intact.

Automated tests should also be run to check for regressions.

Outcome

The Settings and Keybinds screens now follow a more consistent visual design, with improved layout, readability and navigation. The changes maintain the existing settings functionality while making the interface clearer and more consistent with the rest of the game.