Hudvice

[Zizka]

Get it? Hudvice, it's like advice. Funny right?

So basically my current HUD is not good enough for me, everything is all over the place, sizes are mismatched and just looks plain wrong, not to mention super-cluttered:



A screenshot isn't really representative however so I uploaded the trailer WIP so that you guys can have a better look. You can look from 0:43 to 0:47 (it's 4 seconds long).

https://www.youtube.com/watch?v=g_sL7z574y8&feature=youtu.be

Basically, I'd like to know where I could the various elements so that it forms a uniform, coherent whole as opposed to how things are right now.

One thing I've already done is make the battery bigger so that it's less cluttered and more readable.

[eishiya]

Aw, you never made the water translucent even though multiple people suggested it

The major issue I have with the UI is that it has no border or backdrop to make it stand out from the background. The ability(?) indicators on the battery(?) also seem pointlessly far away from it, so it's not immediately clear that it's connected, and would be even harder while moving and watching other things happen on the screen.
I also have no idea what any of it means, but I suspect that's mostly because I haven't played the game.

Could you please explain what each piece of the HUD is meant to be and what you refer to them as so that I and others can be on the same page with regard to terminology and provide feedback that doesn't run counter to their purpose?
I am guessing the yellow bar is your health and the red skull-bar is the enemy's health?


I think you are underutilizing your upper corners and overcrowding the lower corners. The bottom is where a lot of the action happens, it's where enemies first show up, it's where your path is. Do not put HUD elements there.

The kana cards feel a bit off-theme. I think they're very legible, but they seem like they're from/for a different game with the rest. They're good though, so perhaps the rest of the UI could be drawn in that relatively simple style too?

[Zizka]

Aw, you never made the water translucent even though multiple people suggested it

I want to try!  It's something I want to request to the programmer but his list already pretty long so we need to prioritize things. Sorry if it came across that I was ignoring the comment.

Could you please explain what each piece of the HUD is meant to be and what you refer to them as so that I and others can be on the same page with regard to terminology and provide feedback that doesn't run counter to their purpose?
I am guessing the yellow bar is your health and the red skull-bar is the enemy's health?

Yes, good idea!



1: The health bar. Goes down when you take damage. The numbers on screen looked bad so I redid them:


The reason why that is is twofold:
a. They are easier to read, look better and more cartoonish.
b. I want numbers in the game (RPG) to remain fairly low. So nothing like 9,999 max damage.

2. The enemy health bar.

3. This is the card who needs to be identified. Basically, the player needs to choose the right answer in the cards surrounding this word. 3 are wrong, one is right.

4. Each card is mapped to a button on the controller. That's how the player selects his answer.

5. The enemy energy meter. It fills up in battle (sort like of like ATB in Final Fantasy). When it's full to a certain point (to the icon), that ability can be used in battle. Maybe I should have different colors for the enemy energy bar though since I use a different health bar for the enemy. That would be the logical thing to do.

6. Same logic here but for the player.

7. Enemy abilities, can be used when the energy bar is filled up sufficiently.

I also redid the energy bar because it looked too small:

I think you are underutilizing your upper corners and overcrowding the lower corners. The bottom is where a lot of the action happens, it's where enemies first show up, it's where your path is. Do not put HUD elements there.

Very good point. Where would you put the various elements?

The kana cards feel a bit off-theme. I think they're very legible, but they seem like they're from/for a different game with the rest. They're good though, so perhaps the rest of the UI could be drawn in that relatively simple style too?

Since I'm getting ready for Steam Greenlight, I'd rather not have to redo all of UI elements although I'm open to adapting things. To be honest, I don't see how to adapt the elements to the cards.

[eishiya]

Are the numbers on the health bars necessary? I think they should be readable enough on their own.
If the numbers will always be very low (under 50, perhaps), you could also have the health bars made of segments that each represent 1 HP, and the bars would be longer with more HP.

I think I'd organize the UI a bit more like a fighting game:

Player's HP in the top left, enemy's HP in the top right. This could work with fixed-width bars and with bars that grow based on the HP, which would grow towards the center.
I'd keep the bar styles similar aside from colours, there's no need for them to be complex. The skull on your current enemy bar feels too grimdark for the rest of the game. Having the portraits there isn't necessary, but could serve as an additional disambiguator.

I think the energy bars should be sized in such a way that there is always enough room to have the ability icons lined up on them witohut having to have the staggering. If the HP is up top, you could have the energy bars either running down the sides (vertically), or down below like the energy bars in that fighting game example. If you have anything at the bottom like that, make sure the walking area is always higher than that, so that the bars don't overlap the action.
Also, I think the available abilities should either flash gently, or the unavailable abilities should be somehow faded out (e.g. monochrome) just for some extra clarity.

The prompt and options being in the middle is good and the controller button prompts are good, but I don't like how much the prompt recedes. I didn't even notice it at first. Is the book necessary? Maybe have something like a horizontal scroll that's the same or a similar colour as the options, with just the prompt on it, no other distracting elements. The whole thing could even be a single + shape instead of five separate elements, to avoid background elements cluttering it up in the gaps. I'd also change the font on the prompt to something more like the options, solid black and a little handwritten-looking.

[Zizka]

Alright, here's what I have right now:
1.


2.


3.


The icons are missing here but I would put it on the right of the battery.

Thoughts?

I can't have portrait in the top because there can be more than one enemy at once so that wouldn't work.

So, 1, 2 or 3? Also, numbers are necessary due to the RPG nature of the game where numbers need to be accurate for gameplay reasons.

[dpixel]

Since this game looks like a side scroller.  Why not make the level bars horizontal towards the top and out of the way?  And the cards seems like they would look good in a pop-up window that sits on top of the game when needed.

[eishiya]

I agree that the health and energy bars should be horizontal. That is what I had in mind when making my post, I am sorry for not stating it outright.

Also, the +-shaped options worked better since they corresponded to the positions of the buttons on the controller. With them all in a row instead, the player has to think consciously about the buttons.

[Zizka]

I can't use them horizontally because the health bar is a vial standing upright with an animation unfortunately.

[dpixel]

I can't use them horizontally because the health bar is a vial standing upright with an animation unfortunately.

Could you fit them into the bottom panel?  They seem a bit large anyway.  The bottom panel looks good and creates separation.  Right now the floating hud elements are distracting and seem lost with the other items in the game world.

[eishiya]

Do they have to be vials though? The vial look seems off-theme from everything else, but I don't have a very good idea of your theme. I thought it was kitchen stuff?