Jump to content

  • Log In with Google      Sign In   
  • Create Account


Looking for feedback on UI components (Video)


Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.

  • You cannot reply to this topic
51 replies to this topic

#1 Orymus3   Crossbones+   -  Reputation: 6943

Like
0Likes
Like

Posted 29 October 2013 - 07:23 PM

Hi,

 

I'm currently working on a game in which there is a combat playback simulation sequence (all is automated).

In an effort to keep the player informed of what is happening, I've recently added 'gauges' to keep track of each ship's life and the status of their weapon.

 

I use the below color-coding:

 

Green: Friendly ships' life (also determines they are YOUR ships).

Red: Enemy ships' life (also determines they are your OPPONENT's ships).

Blue: Readiness status of each weapon (cooldown/reload).

 

There's currently a lot of gauges on screen and I was wondering if anyone had suggestion on how to better organize all of this information.

 



Sponsor:

#2 phil_t   Crossbones+   -  Reputation: 3222

Like
2Likes
Like

Posted 29 October 2013 - 08:07 PM

My suggestions:

- Bring the bars closer into the ships. They're quite far away right now, it's hard to tell which bar applies to which ship

- I think health should be the same color for all ships (regardless of friendly or enemy). Can you instead color the ships differently?

- Maybe the cooldown bar should be next to the health bar (i.e. on the same side of the ship).



#3 Orymus3   Crossbones+   -  Reputation: 6943

Like
2Likes
Like

Posted 29 October 2013 - 08:51 PM

Quick edit based on these comments:

I've taken 1 and 3 together by placing the readiness bars below the life (thus using the space efficiently).

 

As for ship colors, from an indie budget's standpoint, having each ship use color swaps would be a nightmare... Perhaps I could work using an icon on the side instead though?

 

 

gaugetry_02.png



#4 ShiftyCake   Members   -  Reputation: 516

Like
2Likes
Like

Posted 30 October 2013 - 04:46 AM

The improvement is exponential, it's all about that visual comfortableness for users. I can easily determine the ships bars now, however phil's last comment is quite optional.

 

If you are on a low budget, as one is in indie gaming, I'd suggest simply enlargening the health bars slightly to signify their colours. I'd sway from using logo's however, as their aesthetics are quite nice but very missable. It's all about making the user feel the information is there, having them search for it frustrates them.

 

However, take the time to look at it yourself, do the ships status seem hard to determine? While you are a game developer, you are also a game player. Think, where are life bars done right? How can I make my life bar stand out?


If, at any point, what I post is hard to understand, tell me. I am bad at projecting my thoughts into real words, so I appreciate the knowledge that I need to edit my post.

 

I am not a professional writer, nor a professional game designer. Please, understand that everything you read is simply an opinion of mind and should not, at any point in time, be taken as a credible answer unless validated by others.

 

I do take brief bouts of disappearance so don't worry if I either don't reply to you or miss certain things. I am quite a lazy fellow.


#5 Orymus3   Crossbones+   -  Reputation: 6943

Like
1Likes
Like

Posted 30 October 2013 - 05:21 AM

Thanks.

I must confess though that, looking at this representation so often lately, I'm affraid my judgment has become warped, hence why I felt I needed a bit of external feedback on this.

 

I have a fairly good control over the height of each bar, so I can definitely stretch the life bar to make it bigger in comparison to the other bars.

 

That's still a heavy UI component to have (especially on a ship with, say, 6-10 weapons!). Perhaps I should come up with the worst-case scenario upfront and see whether this approach is viable.

 

Thanks again.



#6 mippy   Members   -  Reputation: 1002

Like
2Likes
Like

Posted 30 October 2013 - 05:35 AM

The grouping helped a lot! Here are some more tips:
  • The bars look a bit similar. Adding a pattern-texture to them (dotted, striped etc.) can make them easier to differentiate. The dots don't have to be individual items like they are in some games, it's enough that they are distinct. 
  • The green and red colors are easy to mix up by people who are color blind (I think ~5% of males are). Test this easily by setting your color picker into HSL and drag the (S-saturation) bar down to zero for both your green and your red colors. If they are too similar then you will have have to adjust them a little. 
  • Finally, to make it easy to distinguish class of vessel and team, you can add a sprite indicating which fraction they belong too. 

Here is an example: 

 
Separating life and energy meters

 



#7 ShiftyCake   Members   -  Reputation: 516

Like
3Likes
Like

Posted 30 October 2013 - 06:45 AM

It'd be better to simply create a color blind option mippy, as is done in most games now.


If, at any point, what I post is hard to understand, tell me. I am bad at projecting my thoughts into real words, so I appreciate the knowledge that I need to edit my post.

 

I am not a professional writer, nor a professional game designer. Please, understand that everything you read is simply an opinion of mind and should not, at any point in time, be taken as a credible answer unless validated by others.

 

I do take brief bouts of disappearance so don't worry if I either don't reply to you or miss certain things. I am quite a lazy fellow.


#8 TechnoGoth   Crossbones+   -  Reputation: 2644

Like
2Likes
Like

Posted 30 October 2013 - 12:32 PM

It seems a bit messy there just seems to be too much going on especially if a ship can have 6-10 weapons each with their own bar.  

 

What about a red overly that covers a ship as damage increases representing the percentage of damage done?

Weapon recharges could either go entirely or maybe just a small do or icon for each weapon that changes from red to green or fills from empty to full.  Something that takes up less space then a full bar and can be lined up side by side.


Writing Blog: The Aspiring Writer

 

Novels:
Legacy - Black Prince Saga Book One - By Alexander Ballard

Current Projects: Rags to Riches -prototype increment game - Design V1

Android Apps:


#9 ActiveUnique   Members   -  Reputation: 797

Like
2Likes
Like

Posted 30 October 2013 - 05:16 PM

First thing that comes to mind is unless I moused over a ship, I'm not displaying any sort of interest in it. I could click a ship if I wanted to keep it toggled on. Otherwise this is more information than I need.

 

 

This will probably come as extra work . As the player, if this were a really important battle I'd use instant replay, rewind, and I'd capture it cool.png . This paragraph only applies if I was really into the game.


I've read about the idea guy. It's a serious misnomer. You really want to avoid the lazy team.


#10 Mussi   Crossbones+   -  Reputation: 1728

Like
3Likes
Like

Posted 30 October 2013 - 07:20 PM

In addition to the improvements you've made, I'd make the life bar slightly higher and add markers for 25%, 50% and 75% (this will also allow you to reduce the width of the bars without them becoming hard to read). Also, I'd get rid of weapon charge bars for charge times < 1 or 2 seconds.

 

Looks awesome so far, keep up the great work!



#11 Orymus3   Crossbones+   -  Reputation: 6943

Like
1Likes
Like

Posted 31 October 2013 - 05:58 AM


The bars look a bit similar. Adding a pattern-texture to them (dotted, striped etc.) can make them easier to differentiate. The dots don't have to be individual items like they are in some games, it's enough that they are distinct.

 

I actually thought about that. Initially, I was going to create the gauge using several small "segments" which meant I got to control the overall look. For optimization reasons however, I had to use a single bitmap that I'm stretching horizontally so as to avoid putting too much strain on my onEnterFrame events.

If you notice though, there's actually a gradient in the center of each bar (because the base bitmap is 128 width and resizes negatively).

 


The green and red colors are easy to mix up by people who are color blind (I think ~5% of males are). Test this easily by setting your color picker into HSL and drag the (S-saturation) bar down to zero for both your green and your red colors. If they are too similar then you will have have to adjust them a little.

Indeed, that is a concern. A bunch of people that are interested in my game are also colorblind, thus I'm already aware of this. I've considered reverting both gauges to green and find a different way to differentiate ship owners.

 


Finally, to make it easy to distinguish class of vessel and team, you can add a sprite indicating which fraction they belong too.

There's a lot of argument against doing so. I was interested in visiting this solution, but it seems like this is not the best approach unfortunately.

 


It seems a bit messy there just seems to be too much going on especially if a ship can have 6-10 weapons each with their own bar.

Yes, that's the reason why I've created this thread. I'm a bit concerned with information flow.

Although, realistically, I wouldn't expect most of the fights to be more than 2v2 or less. I went with pretty much the worst-case scenario to see how it looks though.

 


What about a red overly that covers a ship as damage increases representing the percentage of damage done?

This sounds like a suitable solution. I can think of various ways to implement this that shouldn't be too demanding.

 


First thing that comes to mind is unless I moused over a ship, I'm not displaying any sort of interest in it. I could click a ship if I wanted to keep it toggled on. Otherwise this is more information than I need.

This will probably come as extra work . As the player, if this were a really important battle I'd use instant replay, rewind, and I'd capture it . This paragraph only applies if I was really into the game.

This IS the instant replay (combats are not actually fought by the player as per an RTS, they are simulated and this is the graphical rendition that is returned to the player after the turn is processed).

I'm a bit concerned that not displaying this information would make the battles hard to understand (the "why did I lose" syndrom).

 


In addition to the improvements you've made, I'd make the life bar slightly higher

Yes, I am also unhappy that it has pretty much the same height as everything else, though its definitely a more critical information.

 


and add markers for 25%, 50% and 75%

Do you mean like, vertical yellow bars across the gauge to segment it?

 


Also, I'd get rid of weapon charge bars for charge times < 1 or 2 seconds.

It could look odd if some weapons' cooldown were accounted for and others weren't?

Also, I'm anticipating that most weapons will take 2+ seconds to reload. The values I'm using right now are simply random because I didn't get around to creating the external XML balancing document yet for these.

 


Looks awesome so far, keep up the great work!

Thanks :)

 

 

Couple thoughts on where to go next:

- Add a top-of-screen gauge on each side that represents the total amount of hp of each faction. This way, it will tell you who has the most "life" overall left. I think its the closest indicator to winning/losing trend.

- Implement a red mask overlay (that starts with the back of a ship and slowly progresses towards the helm). I'm thinking this mask should be something around 25-50% transparency so that, whily ou undeniably see it, you can still see the ship sprite.

- Enlarge the HP gauge vertically

- Find a way to differentiate ship owner instead of gauge colors (and reinstate enemy ship gauges as "green").

- Find a way to make the cooldown gauges less intrusive (though I'm not sure which way to go with that just yet).

- Apply consistent damage text color (red)



#12 Mussi   Crossbones+   -  Reputation: 1728

Like
2Likes
Like

Posted 31 October 2013 - 07:00 AM

Do you mean like, vertical yellow bars across the gauge to segment it?

 

 

Yes, though I did not have yellow in mind tongue.png. Here's an example:

gaugetry.jpg

 


It could look odd if some weapons' cooldown were accounted for and others weren't?

Also, I'm anticipating that most weapons will take 2+ seconds to reload. The values I'm using right now are simply random because I didn't get around to creating the external XML balancing document yet for these.

My thought was that there'd be at least two categories of weapons, one that fires rapidly(think pew pew lasers) and one that takes a significant time to charge/reload(seems like your rockets belong to this category). The rapid fire category wouldn't be that interesting to display the charge bar for.

 

Alternatively you could use circular gauges for each weapon, you could colorize these by weapon type as well without getting a rainbow bar effect.



#13 bhawk245   Members   -  Reputation: 137

Like
1Likes
Like

Posted 31 October 2013 - 10:09 AM

 

Do you mean like, vertical yellow bars across the gauge to segment it?

 

 

Yes, though I did not have yellow in mind tongue.png. Here's an example:

attachicon.gifgaugetry.jpg

 

 

 


It could look odd if some weapons' cooldown were accounted for and others weren't?

Also, I'm anticipating that most weapons will take 2+ seconds to reload. The values I'm using right now are simply random because I didn't get around to creating the external XML balancing document yet for these.

My thought was that there'd be at least two categories of weapons, one that fires rapidly(think pew pew lasers) and one that takes a significant time to charge/reload(seems like your rockets belong to this category). The rapid fire category wouldn't be that interesting to display the charge bar for.

 

Alternatively you could use circular gauges for each weapon, you could colorize these by weapon type as well without getting a rainbow bar effect.

 

 

Honestly, I'd scrap the recharge bar unless you've actively selected the ship. It seems to add a ton of clutter to the screen that is unnecessary. I'd display the health bar and maybe add a separate UI element on the bottom or the top of the screen to view the details(like your charge bar) for the actively selected ship.



#14 Orymus3   Crossbones+   -  Reputation: 6943

Like
1Likes
Like

Posted 31 October 2013 - 10:42 AM


Honestly, I'd scrap the recharge bar unless you've actively selected the ship. It seems to add a ton of clutter to the screen that is unnecessary. I'd display the health bar and maybe add a separate UI element on the bottom or the top of the screen to view the details(like your charge bar) for the actively selected ship.

 

Well Gratuitous Space Battles does pretty much that, and I ended up quickly browsing all of my ships repeatedly to figure out what was going on.

This game is great, but it lacks some clarity as far as weapons/defenses are involved, and its very hard to min/max based on that.

Since player skill and experience in my game will be focused on predicting outcome, I want to provide tools that allow them to understand how their DPS is calculated (because DPS alone is an extremely misleading stat).

 


My thought was that there'd be at least two categories of weapons, one that fires rapidly(think pew pew lasers) and one that takes a significant time to charge/reload(seems like your rockets belong to this category). The rapid fire category wouldn't be that interesting to display the charge bar for.

My game ref for these gauges used two models:

- linear gauges for fast weapons

- lit-up dots for heavier gear (torpedoes): it would be red, then turn yellow, then green when ready, and fire back to red (cooldown).

 

Although the dots are not as "precise" they still give a bit more info than nothing, so perhaps a series of colored dots underneath the healthbar could do (might be able to squeeze 10 of them on a single line actually).

 


Yes, though I did not have yellow in mind . Here's an example:

Yes, I understand, thanks.

Not sure if that would be necessary though, and it kind of breaks the pace of the gauge?



#15 Mussi   Crossbones+   -  Reputation: 1728

Like
2Likes
Like

Posted 31 October 2013 - 12:03 PM


Yes, I understand, thanks.

Not sure if that would be necessary though, and it kind of breaks the pace of the gauge?

It depends on the importance of hit point levels(e.g. there are special things you can do when a ship is below 25%). If this is not a factor at all than I think you should stick to what you have.



#16 TechnoGoth   Crossbones+   -  Reputation: 2644

Like
2Likes
Like

Posted 31 October 2013 - 12:24 PM

I'd keep damage colours the same unless the colours have meaning.  Like in MOO2 where shield damage was blue and then actual ship damage was red.    Or If you have different damage types then those could be colour coded to give the player an idea of what type of weapons their opponent is using and can build defense accordingly.  So if I see lots of high green damage numbers appearing I know you use powerful biological weapons so I'll spend my research points on tech that reduces bio damage.

 

If you don't have things like that then keep all to a nice easy to see colour against your background.


Writing Blog: The Aspiring Writer

 

Novels:
Legacy - Black Prince Saga Book One - By Alexander Ballard

Current Projects: Rags to Riches -prototype increment game - Design V1

Android Apps:


#17 The Moldy Crow   GDNet+   -  Reputation: 158

Like
2Likes
Like

Posted 31 October 2013 - 02:44 PM

Multiple weapon bars I think could be solved by having them oriented vertically underneath the health bar.

Make them as tall as say two bars, and the width would depend on how many weapons are on a given ship. Since they're charging and firing much quicker than the health tends to change, having them take up the exact same amount of space isn't really necessary.

To distinguish weapons from each other, you could use sprites or icons that fill vertically instead of just bars

--

 

Nothing will work. Everything might. 


#18 Orymus3   Crossbones+   -  Reputation: 6943

Like
1Likes
Like

Posted 31 October 2013 - 08:46 PM

Here's where I stand after a few minutes spent trying to implement my earlier reasoning. 

 

 

 

Couple thoughts on where to go next:

- Add a top-of-screen gauge on each side that represents the total amount of hp of each faction. This way, it will tell you who has the most "life" overall left. I think its the closest indicator to winning/losing trend.

- Implement a red mask overlay (that starts with the back of a ship and slowly progresses towards the helm). I'm thinking this mask should be something around 25-50% transparency so that, whily ou undeniably see it, you can still see the ship sprite.

- Enlarge the HP gauge vertically

- Find a way to differentiate ship owner instead of gauge colors (and reinstate enemy ship gauges as "green").

- Find a way to make the cooldown gauges less intrusive (though I'm not sure which way to go with that just yet).

- Apply consistent damage text color (red)

 

 

Still trying to figure out the red mask replacement for the ships, as I'm interested in testing this one out.

Status quo for everything else for now (I try not to introduce too many changes per iteration, by risk of making wrong judgment calls about why things better/worse).

 



#19 TechnoGoth   Crossbones+   -  Reputation: 2644

Like
3Likes
Like

Posted 01 November 2013 - 10:14 AM

Looks good, but have you tried the versus bar at the top as being full screen that shows the contest between the two sides?  The bar represents the percentage of hp that each side currently has against the total current hp of all sides.  So if both sides have 500 hp then it would have half red half green if one side has 250 and the other 750 it would be 25% green and the rest red.  That way it shows which side is currently dominating.


Writing Blog: The Aspiring Writer

 

Novels:
Legacy - Black Prince Saga Book One - By Alexander Ballard

Current Projects: Rags to Riches -prototype increment game - Design V1

Android Apps:


#20 Orymus3   Crossbones+   -  Reputation: 6943

Like
1Likes
Like

Posted 01 November 2013 - 10:54 AM

Yes I did consider that.

Wouldn't be very hard to implement actually.

Might as well do that.






Old topic!
Guest, the last post of this topic is over 60 days old and at this point you may not reply in this topic. If you wish to continue this conversation start a new topic.



PARTNERS