Character Display Stats Health, Mana, and Stamina - UQdeco2800/2022-studio-2 GitHub Wiki

Sprint 2

Description:

The health, mana, and stamina graphics display on the screen to indicate the statistics of the health, mana, and stamina of the player is at. We wanted to make the presentation look more interesting with some elements related to the characterisation. For example, the character's weapons and accompanying tools

Inspiration of the initial design

https://www.freepik.com/premium-vector/pixel-art-life-bar-mana-bar-health-energy-bar-vector-icon-8bit-game-white-background_22198147.htm

https://i.reddit.com/r/PixelArt/comments/9dw58h/oc_health_bar_wip/

https://opengameart.org/content/ui-pieces

https://www.newgrounds.com/art/view/tacua28/health-and-mana-bars-design

https://www.vectorstock.com/royalty-free-vector/pixel-art-8-bit-red-yellow-green-health-heart-bar-vector-27629949

https://bioshock.fandom.com/wiki/Health

https://flyclipart.com/pixilart-health-bar-png-854365

Possible Ideas:

  • Use level 1’s colour scheme, use the inventories and hotkey buttons colour scheme in terms of blues to keep the consistent design.
  • Pure bar is too vague, keep text to indicate what the thing is
  • Keep number within the symbol
  • Different colours are a good indicator of high and low-level health - wouldn’t need the numbers and it becomes universally understood (suggested by Leo)
  • Consideration of colour blindness, hence keep numbers
  • First, third, fourth, fifth
  • Stat bars changing visually to indicate buffs or debuffs from potions have occurred.

Drafting process of Health Bar

First version

image

We think the round end would be more suitable to the general look.

image

It was then thought that this shape could be changed to a plunger as it has a rounded end and a bar shape much like a plunger.

Second Version

image

image

Pixel Version

image

image

image

image

image

image

image

image

Gif file for the health bar.

Video file for the health bar gif

https://user-images.githubusercontent.com/70302896/189125184-fb6c8750-d1da-41d9-9406-0c235d266c53.mov

Drafting process of Stamina Bar

Initial idea

image

We think we could make the stamina bar look like a paper roll.

Pixel version and inspiration

image

image

image

image

image

image

image

image

GIF file for the stamina bar

Video file for the stamina bar gif

https://user-images.githubusercontent.com/70302896/189125363-f33601c6-d852-4bf1-9b40-0c7750faf710.mov

Drafting process of Mana Bar

Initial idea

image

Pixel version

image

image

image

image

image

image

Gif file for the mana bar

Video file for the mana bar gif

https://user-images.githubusercontent.com/70302896/189276425-1f57f3dc-b386-4229-875b-1a43d9509b3f.mov

Testing Plan

Aim:

  • Gauge if the studio is happy with the concepts
  • Confirm this is suitable for the game
  • To have the majority or the studio like the stat bar graphics

Survey:

  • Asking if they like it y/n for each gif
  • Asking if they have any questions or comments about the design

Responses:

Mana Stat Bar - Do you like it?

Any feedback or comments about the mana bar?

Stamina Stat Bar - Do you like it?

Any questions or comments about the stamina bar?

Health Stat Bar - Do you like it?

Any questions or comments about the health bar?

Take Away:

  • Positive feedback to the stat bars, in the next sprint the mana should be revised but ultimately they are liked, fit with the theme and meet our intended goals

User Testing:

Aims:

  • The aim of the user testing is to confirm with people outside of the studio that the graphics for the player stat bar is interesting, connected to the theme, and understandable at first glance

Plan:

  • Ask users to view the graphics without the context of the game and ask what they are, write down initial thoughts
  • Provide context of the game, and confirm that it aligns with initial thoughts, write down any comments, thoughts and opinions
  • Ask open-ended questions about their comments to insight further feedback, ie "what do you mean by...?", "why do you think that?" etc.

Responses:

User test one:

  • Initial thoughts with no context: Bucket was a bucket, toilet paper was toilet paper, plunger was initially thought to be a dildo, all designs liked
  • Thoughts with context: Designs liked, confused if there was a plumber in ancient Greece, after confirming yes they did agree that the designs make sense, they loved the toilet paper and stated it made sense, they explained that they initially thought the plumber looked like a dildo due to the shape and positioning, suggested it be upright and immediately decided no that would be worse.

User test two:

  • Initial thoughts with no context: Love it, in order like the bucket, toilet paper and plunger. When asked to identify what each where they confidently identified the toilet roll and bucket but took longer to identify the plunger
  • Thoughts with context: Once provided context they thought all looked amazing, really loved the bucket and didn't see any issue with the overflow, they suggested the bucket have poop in it to represent the plumber aspect more. They commented that the toilet paper didn't make sense since there wasn't toilet paper in ancient Greece, they suggested we use a crumbling tablet that crumbles to indicate reducing and increasing stats. Prompting helped me understand that they wanted to see grungier grosser aspects of toilets, they said they'd find it funny and really enjoy that part of the game. I confirmed their understanding of greek mythology only went as far as Percy Jackson.

Take Aways:

  • Consider the toiler paper and whether it truly fits with the theme
  • Consider gross aspects of the game and whether to include them.

Code Implementation

Stamina-and-Mana-System-Code-Implementation