Advertisement

Looking for feedback on UI components (Video)

Started by October 30, 2013 01:23 AM
50 comments, last by Orymus3 11 years, 2 months ago


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)

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:

[attachment=18602: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.

Advertisement

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.


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?


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.

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.

Advertisement
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.

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)

[media]http:

[/media]

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).

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.

Yes I did consider that.

Wouldn't be very hard to implement actually.

Might as well do that.

This topic is closed to new replies.

Advertisement