Skip to content

E-Jay Tripoli

A documentation of my work for Year 2 – Studying Games Design and Art at the University of Southampton

Menu
  • Lament
    • Development
      • Procedural Room Generation
        • PRG – Pt 1
        • PRG – Pt 2
        • PRG – Pt 3
        • PRG – Pt 4
        • PRG – Pt 5
      • Dungeon
        • Stalagmites
        • Pitfalls
        • Health Potion
        • Dungeon Bug Fixing
      • Player
        • Player – Pt 1
        • Player – Pt 2
        • Player – Pt 3
        • Player – Pt 4
        • Player – Pt 5
      • UI/HUD
        • Start Menu – Pt 1
        • General UI
        • Skill Tree – Pt 1
        • Skill Tree – Pt 2
        • Skill Tree – Pt 3
        • Skill Tree – Pt 4
        • Skill Tree – Pt 5
        • Skill Tree – Pt 6
      • Enemies
        • Whispers – Pt 1
        • Whispers – Pt 2
        • Wrought – Pt 1
        • Wrought – Pt 2
        • Boss
      • Scenes
        • Tutorial
        • Hub
        • Depression Gate
        • Gateway Scenes
    • Logs
      • Initial Plan
      • Teamwork
        • GitHub
        • Discord
      • Weekly Logs
        • User Analysis
        • Accessibility
        • Testing
        • Marketing
        • Formative Feedback
      • Playtests
        • Playtest 1
        • Playtest 2
        • Playtest 3
      • Showcase Event
      • Post-Project Reflection
    • Research
      • Understanding Learning Outcomes
      • Understanding my role
      • Researching Tools
      • Researching Pipelines
      • GDD Breakdown
      • Researching Procedural Generation
      • Existing Games
  • Arcadia GDD
    • Weekly Logs
      • Week 1 – What is a GDD?
      • Week 2 – Game Worlds
      • Week 3 – Concept Art
      • Week 4 – Character Design
      • Week 5 – Narratives
      • Week 6 – Gameplay and Game Systems
      • Week 7 – Feedback week
      • Week 8 – Audio
    • Research
      • Analysing Existing Games
      • Genre Research
      • Research into Psychological Abuse
      • Character Research/Moodboards
      • Environment/Map Research
      • Researching Medieval Knights
      • Researching Enemies
      • UI Research
    • Ideation & Development
      • Initial Development
        • The Essential Experience
        • Initial Game Ideas
        • Choosing a Game Genre
        • Choosing the Game’s Title
      • Game Play
        • Gameplay Loops
        • Mechanics/Tech
      • Story/Narrative
        • Twine
        • Summary of Narrative and Story
      • Game Art
    • GDD
      • Game Overview
      • Game’s Vision
        • Game Pillars
        • Project Focuses
      • Gameplay
        • Mechanics
        • Skills
        • Enemy Behaviour
      • Story & Narrative
        • Twine Prototype
        • Story
        • Narrative
      • Character & NPC Profiles
      • Map/ Level Design
      • UI & HUD
        • Creating the logo
      • Prototype/ Proof of Concept
      • Sound
      • Target Audience
      • Controls & Platform Specs
Menu

UI & HUD

Posted on December 21, 2024December 22, 2024 by et4g23

A game’s UI (User Interface) and HUD (Heads up Display) are essential to creating a good game experience, it provides the player with vital information and provides feedback for their actions.

World Map

HUD

Mock-up HUD, using the Witcher 3: Wild Hunt gameplay as a background:

Skill Tree

This is a mock-up of what the skill tree will look like in game, skills that are have links to them are locked until the skill before it is unlocked. Starter skills, the large skills closer to the middle, are only available to be unlocked when the first area in the corresponding boss’s area is complete. For example, ‘Fire Ball’ can only be unlocked after the first area of the Demon King’s region is completed.

The larger the icon of the skill is, the better the skill is – however, this means that the skill costs more SP (Skill Points). Each skill element has its own corner in the skill tree, yet they all require SP to unlock.

Red – Fire Skills | Blue – Ice Skills | Purple – Shadow Skills | Green – Trickster Skills

Skill Elements in a clockwise direction are weaker, whereas ones that are anti-clockwise are stronger. For example: Fire is strong against Ice (anti-clockwise) , Fire is weak to Shadow (clockwise).

These skills can be inspected in order to read the skill’s description, found out how many SP it costs before unlocking, and upgrading skills that are already unlocked.

These upgrade and skill descriptions can be found in the skills tab in the GDD.

While unlocking skills, the player will be made to hold the unlock button, this is to ensure players don’t spend their SP accidentally. Furthermore, the use of SP can be un-done as long as the player hasn’t exited the skill tree. Lastly, when the player has finished using the skill tree, they will be prompted with ‘Are you sure?’ to allow them to put one last thought into their expenditures.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

©2025 E-Jay Tripoli | Built using WordPress and Responsive Blogily theme by Superb