UI & Skin Updation - UQcsse3200/2026-studio-1 GitHub Wiki

Overview

The UI Finalisation feature establishes a consistent visual style across the game using the Pixthulhu III UI skin. The existing game interface was updated to use a unified visual style across the main menu, gameplay HUD, pause menu, settings screens, and other gameplay UI elements.

The main menu was redesigned around the game's title, Ascent Of The Mortal, with a custom atmospheric background. The pause menu was designed as a compact and functional in-game interface while maintaining visibility of the gameplay world behind it.

The finalised UI includes:

  • Pixthulhu III visual styling
  • A redesigned main menu
  • A custom main-menu background
  • A redesigned pause menu
  • Settings, audio, and keybind screens
  • Gameplay HUD styling updates
  • Consistent button, label, window, and font styling
  • A darkened gameplay background while the pause menu is active

Core Workflow

When the game starts, the UI uses the Pixthulhu skin as the shared visual foundation.

The main workflow is:

  1. Pixthulhu UI assets are loaded from the game's assets directory.
  2. UIComponent provides the shared UI skin to UI components.
  3. Gameplay HUD components use the available Pixthulhu fonts, buttons, and drawables.
  4. The main menu displays the game title and navigation options over the custom background.
  5. When the game is paused, the pause UI is displayed above the gameplay screen.
  6. A dark overlay reduces the visibility of the gameplay world while keeping the pause controls clear.
  7. The pause menu provides navigation between the main pause screen, settings, audio, keybinds, and restart confirmation.

Team Dependencies

The UI finalisation integrates with the existing rendering, screen, and UI systems.

  • UIComponent provides the shared Pixthulhu Skin used by UI components.
  • MainGameScreen integrates the main menu and level/game-area UI.
  • Gameplay HUD components use the shared UI skin for consistent styling.
  • The pause menu manages its different navigation states and overlays the active gameplay screen.
  • The existing game camera and Scene2D stage systems are used to position UI elements.
  • The Pixthulhu assets are stored under core/assets/pixthulhu.
  • The custom main-menu background is stored under core/assets/images/ui/main-menu-bg.png.

Behind The Scenes

Pixthulhu UI Skin

The game uses the Pixthulhu III skin to provide a consistent pixel-art visual style.

The skin assets include:

  • pixthulhu-ui.json
  • pixthulhu-ui.atlas
  • pixthulhu-ui.png
  • font-export.fnt
  • font-subtitle-export.fnt
  • font-title-export.fnt

The shared UI skin is loaded by UIComponent:

protected static final Skin skin =
    new Skin(Gdx.files.internal("pixthulhu/pixthulhu-ui.json"));
<img width="1586" height="992" alt="Ascent bg" src="https://github.com/user-attachments/assets/25447362-2d8d-4434-b90b-22f8f024ff5d" />