Pixel Joint Forum: HUDvice

Author

Message

Zizka
Commander

Joined: 07 May 2021
Online Status: Offline
Posts: 139

Topic: HUDvice
Posted: 20 August 2016 at 4:24am

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.

IP Logged

FrostPumpkin
Commander

Joined: 18 January 2022
Online Status: Offline
Posts: 188

Posted: 21 August 2016 at 5:16am

Hey !
Actually, it's hard to tell what is doing what, and what you're supposed to do in the game. It may be obvious for you since it's your game, but it's not for everyone.

So far my guess is that you use different combination of hiraganas to trigger your abilities ?

I'm not sure what the green bar is, looks like a stamina bar by the way it behaves but graphically it's not really obvious and it's cluttered in the background.

Are these hp bars on the extreme right and extreme left ? They are not consistent with each other.

My general impression is that you HUD is a bit all over the place and it doesn't pop out enough. Player should be able to get all the informations he needs in a single glance, that's why you need to gather elements around a same area and make them very distinct from the background.

Maybe something more like this ? idk, it's certainly not the best but it's more readable and it has a bit of a fighting game feel which can fit the theme ? May be a problem if there are multiple enemies though.

Cards in the middle are taking a huge amount of space, it's not terrible but then you have to put the characters in the VERY bottom of the screen, letting a lot of empty spaces and I feel it's problematic.

Keep it up ! hoping to see more of this soon

Edit : I just found this while doing a quick googling on "fighting card game", might be interested too have an area dedicated to cards so they don't come over the level

IP Logged

Zizka
Commander

Joined: 07 May 2021
Online Status: Offline
Posts: 139

Posted: 21 August 2016 at 5:26am

Awesome reply! I just wanted to post real quick some explanation about my actual screen:

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

I want to try! ;D 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.

IP Logged

GameBoy
Midshipman

Joined: 31 May 2016
Online Status: Offline
Posts: 35

Posted: 22 August 2016 at 6:01am

If you don't want to redo things at least add some half-transparent black background behind each UI element. It will make it stand out more against map, because honestly now It's so hard to read.

I would also move ATB and health bars to the top of the screen. I think moving skill icons to one side (you could make ATB bar slightly wider) could be good idea too.

I get it that card placement is done in a way to mirror standard gamepad button placement, but when someone will be playing on keyboard then it's rather useless.

I would make this UI like this:

IP Logged

Zizka
Commander

Joined: 07 May 2021
Online Status: Offline
Posts: 139

Posted: 22 August 2016 at 6:04am

Good point.

The thing with the bars is that I don't want to put the life bar on the side because it's supposed to be a vial filled with liquid. If I put it on the side it doesn't make sense anymore. I'll try to put them vertically though and see what happens.

IP Logged

Zizka
Commander

Joined: 07 May 2021
Online Status: Offline
Posts: 139

Posted: 22 August 2016 at 7:25am

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

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

I mostly followed GameBoy's setup.

Thoughts?

So far my guess is that you use different combination of hiraganas to trigger your abilities ?

That's accurate.

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?

IP Logged

GameBoy
Midshipman

Joined: 31 May 2016
Online Status: Offline
Posts: 35

Posted: 22 August 2016 at 11:11am

You can write off #1 as it still isn't too much readable on first glance.
#2 or #3 should be enough.

Also I think you should arrange the buttons to A, B, X, Y, not X, Y, B, A, in my example I just pasted them without thinking. :P
Although I kinda like it right now.

If you have a friends who are not used to games or gamepad you could hand them a gamepad and ask them which combination is easier to handle. :d

IP Logged

WIP (Work In Progress)
Pixel Joint Forum : Pixel Art : WIP (Work In Progress)

Author	Message
Zizka Commander Joined: 07 May 2021 Online Status: Offline Posts: 139	Topic: HUDvice Posted: 20 August 2016 at 4:24am
	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.
	IP Logged

FrostPumpkin Commander Joined: 18 January 2022 Online Status: Offline Posts: 188	Posted: 21 August 2016 at 5:16am
	Hey ! Actually, it's hard to tell what is doing what, and what you're supposed to do in the game. It may be obvious for you since it's your game, but it's not for everyone. So far my guess is that you use different combination of hiraganas to trigger your abilities ? I'm not sure what the green bar is, looks like a stamina bar by the way it behaves but graphically it's not really obvious and it's cluttered in the background. Are these hp bars on the extreme right and extreme left ? They are not consistent with each other. My general impression is that you HUD is a bit all over the place and it doesn't pop out enough. Player should be able to get all the informations he needs in a single glance, that's why you need to gather elements around a same area and make them very distinct from the background. Maybe something more like this ? idk, it's certainly not the best but it's more readable and it has a bit of a fighting game feel which can fit the theme ? May be a problem if there are multiple enemies though. Cards in the middle are taking a huge amount of space, it's not terrible but then you have to put the characters in the VERY bottom of the screen, letting a lot of empty spaces and I feel it's problematic. Keep it up ! hoping to see more of this soon Edit : I just found this while doing a quick googling on "fighting card game", might be interested too have an area dedicated to cards so they don't come over the level
	IP Logged

Zizka Commander Joined: 07 May 2021 Online Status: Offline Posts: 139	Posted: 21 August 2016 at 5:26am
	Awesome reply! I just wanted to post real quick some explanation about my actual screen: Aw, you never made the water translucent even though multiple people suggested it I want to try! ;D 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.
	IP Logged

GameBoy Midshipman Joined: 31 May 2016 Online Status: Offline Posts: 35	Posted: 22 August 2016 at 6:01am
	If you don't want to redo things at least add some half-transparent black background behind each UI element. It will make it stand out more against map, because honestly now It's so hard to read. I would also move ATB and health bars to the top of the screen. I think moving skill icons to one side (you could make ATB bar slightly wider) could be good idea too. I get it that card placement is done in a way to mirror standard gamepad button placement, but when someone will be playing on keyboard then it's rather useless. I would make this UI like this:
	IP Logged

Zizka Commander Joined: 07 May 2021 Online Status: Offline Posts: 139	Posted: 22 August 2016 at 6:04am
	Good point. The thing with the bars is that I don't want to put the life bar on the side because it's supposed to be a vial filled with liquid. If I put it on the side it doesn't make sense anymore. I'll try to put them vertically though and see what happens.
	IP Logged

Zizka Commander Joined: 07 May 2021 Online Status: Offline Posts: 139	Posted: 22 August 2016 at 7:25am
	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. I mostly followed GameBoy's setup. Thoughts? So far my guess is that you use different combination of hiraganas to trigger your abilities ? That's accurate. 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?
	IP Logged

GameBoy Midshipman Joined: 31 May 2016 Online Status: Offline Posts: 35	Posted: 22 August 2016 at 11:11am
	You can write off #1 as it still isn't too much readable on first glance. #2 or #3 should be enough. Also I think you should arrange the buttons to A, B, X, Y, not X, Y, B, A, in my example I just pasted them without thinking. :P Although I kinda like it right now. If you have a friends who are not used to games or gamepad you could hand them a gamepad and ask them which combination is easier to handle. :d
	IP Logged

Topic: HUDvice