UFO:Alien Invasion

Development => Artwork => Topic started by: Destructavator on May 04, 2010, 09:37:10 pm

Title: GUI Design
Post by: Destructavator on May 04, 2010, 09:37:10 pm
As we already have more than 8 actors on the alien and civ teams, there shouuld be no prob with the general code. Afaik it's mostly a GUI thing (and some GUI-related code maybe).
AND a matter of game balance of course.

Goodness!  Well, making the GUI is certainly something I can help out with - Is anyone else already working on it, or should I look at the proposals in the wiki and get started on something?  GUIs typically aren't that hard for me to do - the graphics portion that is (coding it is another story) - It wouldn't take me too long to come up with something.
Title: GUI Design
Post by: Bartleby on May 04, 2010, 10:03:02 pm
that would be great. the gui is ugly =)
Title: GUI Design
Post by: BTAxis on May 04, 2010, 10:39:41 pm
At risk of being redundant, note the mockups (http://ufoai.ninex.info/wiki/index.php/Proposals/New_UI) on the wiki.
Title: GUI Design
Post by: Duke on May 04, 2010, 10:50:18 pm
There doesn't seem to be any suggestion for the battlescape GUI, right ?
So as a first approach (just to get into testing) I'd suggest to place a second row of buttons below the existing ones named 9 through 16.
We can think of a 'beautiful' design any time later.
Title: GUI Design
Post by: Destructavator on May 04, 2010, 11:10:35 pm
I've already got several ideas fired up in Blender - more than one style, I'll post screen shots soon.

Heck, I could probably re-do the entire battlescape GUI - I've got several variants in mind, and when I get some things together I'll let you guys pick out your favorite one (or two, for an alternate as well), then work on developing those.

I'm surprised we didn't have very many people doing this already.  If I had known that we didn't have a new GUI ready, I would have started sooner.
Title: GUI Design
Post by: BTAxis on May 04, 2010, 11:14:31 pm
Also, you don't have to make just one battlescape GUI. We already have two as it is, and they're switchable ingame.
Title: GUI Design
Post by: BTAxis on May 04, 2010, 11:16:00 pm
As we already have more than 8 actors on the alien and civ teams, there shouuld be no prob with the general code.

I'm not sure - I seem to remember mattn saying otherwise. mattn - can you comment?
Title: Re: GUI Design
Post by: Destructavator on May 05, 2010, 05:23:13 am
OK, here's a quick, early idea for handling the units in the GUI.  To be honest I don't really like how this one came out, but for making it better I could take a number of aspects and develop them in different directions, and that's the part I'd like to get feedback on.

In the second graphic, unit 2 is selected, 19 and 20 don't exist because the team wasn't that large, unit 5 is greyed because it already used some time units, and unit 8 got killed, which is why it is in red.

The larger buttons are of course for Tanks, UGVs, larger units, whatever.

As I said I don't really favor this design the way it is, but just about everything can be changed.  This took less than an hour of work.

Edit:  These are not to scale, if these were used in-game they would first be re-scaled!

- - - - - - - - - - - - -

On a different idea, I've been thinking about a translucent GUI much like the mockups for other interfaces shown in the wiki.  Something that glows and looks kinda like a heads-up-display, but still has parts that can be seen through.  That would actually be easier for me to build, and if done right would look quite impressive.

I'm also open to other ideas, of course.
Title: Re: GUI Design
Post by: Marte on May 05, 2010, 08:30:51 am
Also, you don't have to make just one battlescape GUI. We already have two as it is, and they're switchable ingame.

as new user, I can say that second interface could be "standard one" for battlescape

In general I don't think that Ufo-ai need a new interface: need some kind of "optimization" in where buttons are, some internal standard things like:
- main menu on first main screen is on right, when i load / start a new game is on left, and so on..

i would help, but I don't know how to help, can anyone point me on right direction? I see that script could be my graal, but when I change it, i must compile it or just modify&go ?
Title: Re: GUI Design
Post by: bayo on May 05, 2010, 09:29:46 am
This took less than an hour of work.
You really dont need to spend 1 hour to said that. A simple mockup with box take, at worst, 5 minutes.

In general I don't think that Ufo-ai need a new interface: need some kind of "optimization" in where buttons are, some internal standard things like:
- main menu on first main screen is on right, when i load / start a new game is on left, and so on..
That's half wrong. The gameplay itself need a lot of user interface for managment, then the GUI is a very important part of the game, and need a lot of work. It is not an "arcade" game. We can improve a lot the current 2.3-dev, cause there is a lot of problems. For example, the geoscape itself have some problems (but it is a very simple interface).

i would help, but I don't know how to help, can anyone point me on right direction? I see that script could be my graal, but when I change it, i must compile it or just modify&go ?
1/3 of the code is script inside /base/ufos/ui/, 1/3 is UI lib inside /src/client/menu, and 1/3 is a "binding" code script<->game inside /src/**/*_callback.c. You can found documentation about scripts in http://ufoai.ninex.info/wiki/index.php/Category:GUIs.

Sure you dont need to compile anything when you only edit scripts.
Title: Re: GUI Design
Post by: geever on May 05, 2010, 10:48:13 am
OK, here's a quick, early idea for handling the units in the GUI.  To be honest I don't really like how this one came out, but for making it better I could take a number of aspects and develop them in different directions, and that's the part I'd like to get feedback on.

Do we really need 20 buttons? I doubt. Why the original idea in XCom enough for us (nextUnit button) ?

-geever
Title: Re: GUI Design
Post by: BTAxis on May 05, 2010, 11:01:12 am
I think the interface should not make any assumptions about the amount of units on the field. If the amount of soldiers is more than the amount of buttons you can't select them all, and if it is less you end up with useless buttons that take up space.

So instead of buttons for each soldier, make something generic that applies to any amount of soldiers, like a "next soldier" button.
Title: Re: GUI Design
Post by: bayo on May 05, 2010, 11:28:02 am
"next soldier" can be a nice shortcut, but i dont think it must be the only way.
I think we often want to select a soldier we know (cause we know he use rockets, cause we know he'v got the only medikit...)
We can create the real number of buttons it is need, there is no problem.
Title: Re: GUI Design
Post by: BTAxis on May 05, 2010, 11:32:21 am
On that note, maybe any new GUI should be done purely as vector graphics, for optimal scaling behaviour?
Title: Re: GUI Design
Post by: Mattn on May 05, 2010, 12:07:37 pm
hm? we don't have vector graphics support - nor do we need that imo. bayo did a great job with "scaling" on the menus/huds already.
Title: Re: GUI Design
Post by: bayo on May 05, 2010, 12:12:00 pm
I never really understand what "vector graphics" mean. Any example?
md2 models for buttons? generating right sprite size from svg before opengl rendering?
Title: Re: GUI Design
Post by: BTAxis on May 05, 2010, 12:31:51 pm
In that case we should make the GUI in a high resolution, because upscaling doesn't look so great.
Title: Re: GUI Design
Post by: BTAxis on May 05, 2010, 12:33:04 pm
I never really understand what "vector graphics" mean. Any example?
md2 models for buttons? generating right sprite size from svg before opengl rendering?

Vector graphics are graphics that exist as vectors, and that get rendered at runtime. This means that no matter how you scale or deform them, they will always look smooth.
Title: Re: GUI Design
Post by: Destructavator on May 05, 2010, 02:11:52 pm
I agree that vector graphics would look good in this case - Some people still have smaller 1024x768 monitors that they would play the game on, others like myself have the newer, big 1920x1080 deal or such.

Given that there's a number of ways the GUI could be re-designed, I think we need to be clear on how the new design should really work first, and then I could work on putting it together.

- Do we use vector-based graphics?  (I'd recommend "yes" as I think it would work much better.  On my big screen, yes, up-scaled graphics DO look "clunky.")

- Do we go for a "solid" GUI like the one we have now, or something translucent, like the glowing HUD-type deal I was talking about?

- Should we have individual buttons for each soldier?  (I personally favor "yes" here.)

- For icons (For example, showing crouching vs. standing, and others) should we use pics made from renders of actual models used in the game, which are then altered post-process to be made into a button?  (Duo-tone would look cool, wire-frame render in monochrome might also work.)

- How much of the GUI should be drawn from graphics files vs. generated by code?
Title: Re: GUI Design
Post by: BTAxis on May 05, 2010, 02:25:45 pm
Okay, let's see.

Quote
- Do we use vector-based graphics?  (I'd recommend "yes" as I think it would work much better.  On my big screen, yes, up-scaled graphics DO look "clunky.")
I'd like that. I don't agree with mattn that we "don't need it", but even if no support is forthcoming then a vector-graphic design can be rendered at any resolution, so the sources could be vector-graphic based in any event.

Quote
- Do we go for a "solid" GUI like the one we have now, or something translucent, like the glowing HUD-type deal I was talking about?
That's a matter of preference, I suppose. Some translucency wouldn't be bad, in my opinion.

Quote
- Should we have individual buttons for each soldier?  (I personally favor "yes" here.)
I suppose so, but only the buttons for soldiers that actually participate in the mission, so the amount of buttons should vary from mission to mission (but they should still look good in all cases). Buttons for dead soldiers probably shouldn't disappear, though.

Quote
- For icons (For example, showing crouching vs. standing, and others) should we use pics made from renders of actual models used in the game, which are then altered post-process to be made into a button?  (Duo-tone would look cool, wire-frame render in monochrome might also work.)
Don't know, but doesn't sound like a bad idea.

Quote
- How much of the GUI should be drawn from graphics files vs. generated by code?
All text should be generated by the code (to allow for translations). The rest can be done with graphics.
Title: Re: GUI Design
Post by: bayo on May 05, 2010, 03:10:18 pm
Quote
Vector graphics are graphics that exist as vectors, and that get rendered at runtime. This means that no matter how you scale or deform them, they will always look smooth.
Use bigger texture that what you need, and you will have the same result, you dont need any vector description. Anyway no body will display and icon in 400x400.
Title: Re: GUI Design
Post by: Marte on May 05, 2010, 04:34:09 pm
thanks bayo!

You really dont need to spend 1 hour to said that. A simple mockup with box take, at worst, 5 minutes.
That's half wrong. The gameplay itself need a lot of user interface for managment, then the GUI is a very important part of the game, and need a lot of work. It is not an "arcade" game. We can improve a lot the current 2.3-dev, cause there is a lot of problems. For example, the geoscape itself have some problems (but it is a very simple interface).
1/3 of the code is script inside /base/ufos/ui/, 1/3 is UI lib inside /src/client/menu, and 1/3 is a "binding" code script<->game inside /src/**/*_callback.c. You can found documentation about scripts in http://ufoai.ninex.info/wiki/index.php/Category:GUIs.

Sure you dont need to compile anything when you only edit scripts.

So for example is possible to move a menu from right to left without compile? Great news, I'll try! :D

"next soldier" can be a nice shortcut, but i dont think it must be the only way.
I think we often want to select a soldier we know (cause we know he use rockets, cause we know he'v got the only medikit...)
We can create the real number of buttons it is need, there is no problem.

a cool idea could be to generate soldiers button and have different kind of icons according to type of soldier ?
For example one equipped with rocket have different icon from one with plasma pistol?
Title: Re: GUI Design
Post by: Destructavator on May 05, 2010, 06:37:47 pm
Quote
a cool idea could be to generate soldiers button and have different kind of icons according to type of soldier ?
For example one equipped with rocket have different icon from one with plasma pistol?

I got almost the same idea, different stand/crouch toggle icons for different armors and such.

I've found that loading soldier poses in Blender and applying post-process FX can make all kinds of interesting pictures, some that might make a good icon.

This is just one example.  With some blurring and outline enhancements, it could be turned into a "crouch" command icon (perhaps with some arrows added as well).

Title: Re: GUI Design
Post by: geever on May 05, 2010, 06:50:36 pm
a cool idea could be to generate soldiers button and have different kind of icons according to type of soldier ?
For example one equipped with rocket have different icon from one with plasma pistol?

Maybe cool but useless. It won't add much to the gui and ofc. nothing to the gameplay but eat resources.

-geever
Title: Re: GUI Design
Post by: Winter on May 06, 2010, 12:49:56 am
Maybe cool but useless. It won't add much to the gui and ofc. nothing to the gameplay but eat resources.

-geever

I have to concur on this one, it's pointless frippery and would be detrimental to the user experience. What we really need is a clean, well-designed UI, and it ought to be a priority because the UI affects every area of player interaction with the game, all the time. That means clear and easily-identified buttons (not constantly-changing ones -- how horribly disorienting that would be, especially for new players!) with reliable tooltips and consistent effects. That's what we should be working on.

Regards,
Ryan
Title: Re: GUI Design
Post by: zapkitty on May 06, 2010, 09:12:16 am
re: number of "soldier" buttons... how about a GUI where you have "next soldier", "current soldier" and "previous soldier" buttons etc and an additional button that will tab out an array that shows a button for every soldier? Select a soldier and the array goes away and your selection becomes the "current soldier." button.

That way the battlescape GUI is the same from battle to battle but you will have a button array that slides out *on demand* that shows all of the assets that you have in any given battle... and only the assets that are available for that specific battle.

Add the ability to assign custom hotkeys on the fly for your special units and I think you'd have it covered.

Edited for clarity...
Title: Re: GUI Design
Post by: geever on May 06, 2010, 10:42:26 am
I have to concur on this one, it's pointless frippery and would be detrimental to the user experience. What we really need is a clean, well-designed UI, and it ought to be a priority because the UI affects every area of player interaction with the game, all the time. That means clear and easily-identified buttons (not constantly-changing ones -- how horribly disorienting that would be, especially for new players!) with reliable tooltips and consistent effects. That's what we should be working on.

Read his comment again, please. It would be the "constantly-changing one"! (Soldier drops rocket launcher ~> icon change; pick up a pistol ~> icon change...)

-geever
Title: Re: GUI Design
Post by: BTAxis on May 06, 2010, 10:53:23 am
I don't think you read HIS post properly. He wasn't talking about changing icons, only about having exactly as many buttons as there are soldiers. Which is a good thing.
Title: Re: GUI Design
Post by: Marte on May 06, 2010, 01:44:12 pm
I agree with simplicity, consistent Gui :D

So.. where we start discussion?
Title: Re: GUI Design
Post by: zapkitty on May 06, 2010, 03:10:43 pm
I agree with simplicity, consistent Gui :D

So.. where we start discussion?

Well, my idea greatly simplifies the battlescape GUI by reducing the clutter of actor selection buttons to just 4: "previous" "current" "next" and "all" which can be represented here as ...

                                             < 8 >  V

... with the number 8 representing your current selection.

And if you want to select a character directly rather than paging with the "next" and "previous" buttons you just hit the "all" button and your current list of actors slides out...

                                             < 8 >  V
                                   1 2 3 4 5 6 7 8 9 10

... but this intrusion onto screen real estate is only temporary as this array slides back in when you make a selection.

So say you selected number 2 then your display will now look like this...

                                             < 2 >  V

The one disadvantage is that you need two mouse clicks to select a particular soldier.

The advantages are several, including a simplified GUI and the ability to add actors at will. Also note that this method does not have the main battlescape GUI dictating what actor attributes are displayed or how they are displayed when you hit the "all" button. Variations could have anything from just a number to a portrait with color bars for HPs and TUs to the current weapon to advanced combat stats... modders should be able to work with that idea.
Title: Re: GUI Design
Post by: Winter on May 06, 2010, 04:46:21 pm
Zapkitty, your heart's in the right place, but I reckon that drop-down would be a pain in the arse for both devs and players. Cut that part entirely and replace it with actor selection by hotkeys. 1-0 for the first 10 actors, then shift+1-0 for the next 10. I don't think we'll need more than that.

Regards,
Winter
Title: Re: GUI Design
Post by: Marte on May 06, 2010, 05:06:26 pm
+1 for buttons for just first, prev, next, last and no drop-down list: simply, elegant solution (maybe using icons <<, <, >, >> ?)
Title: Re: GUI Design
Post by: MXcom on May 06, 2010, 05:33:20 pm
Please do not remove the one-button-per-soldier - I would feel horribly lost if I had only a "next" and a "previous" button, as it was in X-Com.
On the contrary, I would actually like seeing these buttons extended with a little bit of information about each soldier, e.g. two (very small) bars, one for TUs and one for health.
The first one would e.g. spare me from what I'm doing up till now every turn: Flipping through all soldiers to see if I accidentally forgot to move one; the second one would e.g. spare me from doing the same if I know someone was hurt in alien turn, but don't know exactly who.

Jagged Alliance had such info (they only had to fit 8 though): http://forevergeek.com/wp-content/uploads/2008/08/jagged-alliance_2.png
Title: Re: GUI Design
Post by: Kildor on May 06, 2010, 05:45:35 pm
MXcom, look to the altHUD.
Title: Re: GUI Design
Post by: H-Hour on May 07, 2010, 10:46:29 pm
About the # of soldiers and the GUI. What about a slider design, where it displays n soldiers at the top and you can then scroll left or right (using a slider or buttons) to show different numbers. See the attached image. When clicking on the right arrow it would show new soldier numbers.

Not to create too much work for the coders, but perhaps it could also display a certain amount of information about each unit as it scrolled through, like the attached image. But it could work just as well without the details.
Title: Re: GUI Design
Post by: Duke on May 07, 2010, 11:38:32 pm
I like the slider design, as it is not too far away from the the current design.
But as the 'additional info' is displayed elsewhere in the HUD anyway once the soldier is selected, we shouldn't duplicate that info in the slider imho.
Title: Re: GUI Design
Post by: Marte on May 11, 2010, 01:15:40 pm
I like the slider design, as it is not too far away from the the current design.
But as the 'additional info' is displayed elsewhere in the HUD anyway once the soldier is selected, we shouldn't duplicate that info in the slider imho.

i agree
Title: Re: GUI Design
Post by: Ain Soph Aur on May 11, 2010, 11:05:39 pm
slider design sounds interesting. thumbs up
Title: Re: GUI Design
Post by: Marte on May 14, 2010, 01:21:37 pm
H-Hour can you post a mockup of all battlescape gui proposal?
Title: Re: GUI Design
Post by: H-Hour on May 14, 2010, 01:37:01 pm
H-Hour can you post a mockup of all battlescape gui proposal?

No, sorry, the little time I have I'm focusing on getting the +city RMA up and running for 2.3. Destructavator has already indicated he's working on a GUI and there's already a well-developed proposal somewhere in the Wiki.
Title: Re: GUI Design
Post by: Bartleby on May 16, 2010, 11:56:45 am
Destructavator still working on this? cant wait to see a new gui ;D.
Title: Re: GUI Design
Post by: Destructavator on May 17, 2010, 07:33:20 am
Destructavator still working on this? cant wait to see a new gui ;D.

Actually I've been forced to put it on hold for a little bit - I still have ideas that I'm more than capable of creating, but I've got a lot of things going on right now.

My life is like that, I don't work a regular 9 to 5 job, I do various odd stuff here and there which makes my spare time wildly jump up and down unpredictably.

If anyone else wants to start a new GUI while I work on other stuff, they're more than welcome to, otherwise I'll get back to it later.
Title: Re: GUI Design
Post by: MCR on May 17, 2010, 08:31:16 am
I want to start with the game's menus, backgrounds & loading pictures first...
I would suggest high resolution (1920x1440) jpgs, which the engine can downscale if people running lower resolutions & upscale for the few running higher ones ;)...
Best for the menus would be our 3d engine rendering the background imho, but that can also wait ;)

I hope it is okay for everyone here, if I start experimenting on some new upgraded styles not forgetting about the roots of this project, but showing visually from the first moment that we are developing 2.4 now ?!

Fresh gfx will showcase our progress with UFO:AI for everyone knowing the old version from the first moment starting the new one !
Title: Re: GUI Design
Post by: TrashMan on May 18, 2010, 08:37:45 pm
I'd reccomed splitting soldiers into squads of 6-8 men, and hten simply haveing "next squd" and "next sodlier" bottuns.

Kinda like Jagged Alliance did.
Title: Re: GUI Design
Post by: Arthur on May 18, 2010, 09:46:14 pm
I can make the graphics for the new hud if you want?

mfg
Title: Re: GUI Design
Post by: geever on May 19, 2010, 11:53:31 am
I'd reccomed splitting soldiers into squads of 6-8 men, and hten simply haveing "next squd" and "next sodlier" bottuns.

Kinda like Jagged Alliance did.

Oh, yes. I remember. Every third-fifth comment of you is to change the game more like Jagged Alliance...

-geever
Title: Re: GUI Design
Post by: Prinegon on May 19, 2010, 02:33:38 pm
Well, there is no reason not to orientate your efforts on a game, that improved the gameplay of ufo.

Don't get me wrong, ufo was an incredible game for its time, and if this game gets completed exactly the way, ufo was, it is a great game. But this project is in a state it almost is completed the way ufo was, so it is really fair to look around to other games of this genre to see, what was done better there.
If it was on me to change one thing in ufo:ai the way, Jagged Alliance is working, I probably would change the movement system to the hybrid: realtime, when no enemy is around, turn-modus otherwise. This really helped keep action in flow during missions. But I know, this change would probably turn the whole game system arround and will not be implemented (at least not for a time).

But the Jagged Alliance games do have some things, whose integration is not illusorial in this game, like jumping over fences or opening crates. And yes, some of the gui-decisions of JA were quite good. Please, don't turn this game into a jagged alliance clone, no one is (or should be) wanting that. But please don't be closeminded towards ideas just because its origans are in JA.
Title: Re: GUI Design
Post by: BTAxis on May 19, 2010, 02:40:10 pm
This particular idea is rather useless, though - there won't be enough soldiers on the battlescape to warrant organizing them in squads.
Title: Re: GUI Design
Post by: TrashMan on May 19, 2010, 02:49:31 pm
Groups, squads....IIRC; 12 people in battle...easier to manage if you can custom divide them into groups.
Groups having as many or as few soldiers in it as you want.

It's basicly like CTRL groups in strategy games. For convenince..you can group snipers together..or a sniper and a spotter...or a group for close combat..whatever.
Just throwing it out there. There's technicly no need for interface changes....
Title: Re: GUI Design
Post by: BTAxis on May 19, 2010, 02:55:40 pm
Even then, you can't move soldiers as groups, anyway. You have to move them one by one. So what'd be the point?
Title: Re: GUI Design
Post by: TrashMan on May 19, 2010, 06:04:20 pm
Quickly finding the soldier you're looking for?

Dunno. Maybe there's a better way to go about it. I cna think of a few variations:

a) having a list of soldier names

b) having a list of portrait+names

c) Having a way to mark a soldier. Like, marking soldier no.5 as a sniper, and the number 5 at the top of the screen having a specific color

d) Having a small icon next to each soldier number (autgenerated depending on the weapon he's equipped with). A sniper would have a crasshairs icon. A regular assault rifle would have a bullet. Heavy machinegun would have 3 bullets, flamethrower would have flame, etc...
Title: Re: GUI Design
Post by: Winter on May 20, 2010, 05:08:19 am
Dividing troops into squads would be entirely wrong for a game of this nature. We don't have squads moving independently across a map, which is reason one why Jagged Alliance 2 did things that way. Copying without thought is always the wrong thing to do.

What I'm seeing:

Troops organised in a list order according to the player's preferences (drag and drop) during pre-deployment and/or aircraft troop assignment. This layout is saved from battle to battle. Troops are then selected by the number keys, 1-0 for soldiers 1 to 10 in the list, SHIFT+1-10 for 11 to 20, and so on.

Regards,
Winter
Title: Re: GUI Design
Post by: vedrit on May 20, 2010, 05:39:12 am
I, for one, greatly prefer the pre-assigned order. It would be a nice cross between X-COMs near-infinate troop amounts, and a modern games organization, giving the best of both systems, with none, or few, of the drawbacks (Not knowing which soldier out of how many you are on, limited number of troops allowed, etc)
Title: Re: GUI Design
Post by: TrashMan on May 20, 2010, 02:46:56 pm
Again, dividing is purely in a semantical sense.
The idea is to be able to quickly find the soldier you're looking for.

Which is why I propose that the numbers have icons and different colors, so you can easily see which soldier has what weapon equipped, how many AP or HP he has left
Title: Re: GUI Design
Post by: Prinegon on May 20, 2010, 04:32:20 pm
Even then, you can't move soldiers as groups, anyway. You have to move them one by one. So what'd be the point?

This is so at this moment. But this doesn't have to stay so. Even in a turn based setting movement formations are really possible and, imho, very wishable. And this is not only, because of a player would be able to move around more troops much easier, but once implemented, alien movement could be tactical, too.

Lets say, one is able to group i.e. up to 5 people and designate a group leader. As long as not ungrouped again, movement of the leader would move the whole group in formation. If you move other members of the group first, the formation is automatically changed. If you move in formation, the movement is automatically adjusted, so that each member of the group automatically keep their relative distances to each other, if possible. People would automatically slow down, if someone needs more movement points than the other to reach its designied position, using the pool of unused movement points for cover fire.
Of course, this would be problematic to implement, one would have to make sure blocking soilders would step out of the way as well as to prevent a soilder to move around the map alone while the others wait for him to reach his position indefinitely, because cause of a narrow passage his destination would be outside of something, while the destination of all other soilders is inside. But theese are all things, a little ai-work could handle. With a little ai-work this movement could be even extended, e.g. soilders automatically crack their formation up to move behind cover, if in reach, or so. 
Title: Re: GUI Design
Post by: BTAxis on May 20, 2010, 05:17:03 pm
Actually, I'm pretty sure it's going to stay that way.
Title: Re: GUI Design
Post by: Borsti67 on May 20, 2010, 08:06:23 pm
Which is why I propose that the numbers have icons and different colors, so you can easily see which soldier has what weapon equipped
Did you already try both of the methods mentioned in another thread here?
Title: Re: GUI Design
Post by: TrashMan on May 20, 2010, 08:19:51 pm
The method I proposed is better - it gives you all important info on all soldiers at a glance.

If needed, I can make a quick mockup of what I mean...
Title: Re: GUI Design
Post by: TrashMan on May 25, 2010, 06:17:47 pm
Here, the mockup:

(http://img404.imageshack.us/img404/1588/ufogui.jpg)

As you can see, this way one can easily see the status and specialization of all soldiers.

Now, the specialization icon can either be generated depending on what weapon your soldier is carrying, or determined before the mission. Or some other way.

The icons could be generic (sniper, explosive, assault, close combat, heavy) or rather specific, right down to the weapon (railgun has a different icon than a sniper, granade launcher a different icon than a missile launcher, etc..)
Title: Re: GUI Design
Post by: Hertzila on May 25, 2010, 06:38:24 pm
Now, the specialization icon can either be generated depending on what weapon your soldier is carrying, or determined before the mission. Or some other way.

The icons could be generic (sniper, explosive, assault, close combat, heavy) or rather specific, right down to the weapon (railgun has a different icon than a sniper, granade launcher a different icon than a missile launcher, etc..)

The soldier equipping GUI could be changed to also have an option to change that logo, correct? It would be the best implementation IMO.
And if the texture artists would make them, you could also have additional insignia further down your agents sleeves that shows his/her specialisation.
Title: Re: GUI Design
Post by: H-Hour on May 25, 2010, 11:20:13 pm
If equipped icons are incorporated, I think they should be user assignable rather than automatically assigned. If I want to have an assigned medic, I may want to give him an icon showing that rather than his primary weapon, for instance.
Title: Re: GUI Design
Post by: TrashMan on May 26, 2010, 04:09:59 pm
A dropdown menu next to the soldier name with a list of icons might do the trick.
Title: Re: GUI Design
Post by: Winter on May 27, 2010, 06:19:01 am
Here, the mockup:

(http://img404.imageshack.us/img404/1588/ufogui.jpg)

As you can see, this way one can easily see the status and specialization of all soldiers.

Now, the specialization icon can either be generated depending on what weapon your soldier is carrying, or determined before the mission. Or some other way.

The icons could be generic (sniper, explosive, assault, close combat, heavy) or rather specific, right down to the weapon (railgun has a different icon than a sniper, granade launcher a different icon than a missile launcher, etc..)

I like this, but it would take up a lot of GUI space for larger squads. Any way you could shrink it down a little?

Also, don't forget a UGV icon. ;)

Regards,
Winter
Title: Re: GUI Design
Post by: geever on May 27, 2010, 11:29:23 am
Here, the mockup:


It is almost the same as altHUD btw..

-geever
Title: Re: GUI Design
Post by: vedrit on May 27, 2010, 12:16:53 pm
why not put scroll arrows? That way it doesnt have to be any bigger, while still providing GUI space for large squads. I know its not very good looking, but isnt the mind-set "function before fashion"?
Title: Re: GUI Design
Post by: BTAxis on May 27, 2010, 12:49:34 pm
Scroll arrows are annoying.
Title: Re: GUI Design
Post by: Bartleby on May 27, 2010, 01:00:32 pm
i dont like scrolling. popups or sliders are ok.. but scrolling.. :/.
its great to see ppl are working on the gui :).
to make a smaller image with more information i like transparent infos as i added.
Title: Re: GUI Design
Post by: TrashMan on May 27, 2010, 02:21:19 pm
Icon needs to be more visible. Naturally, that was a mockup, so some elements (like the number) can be smaller  and more tighly packed.

another idea is that instead of having bars to show health, AP and morale, you cna jsut have 3 boxes/dots that change color. They don't have to give you an exact reading/value, just an average.

So:
green = over 70% left
yellow = between 40 and 70%
red = less than 40%

Instead of scroll arrow, have a tab, that instantly switches to the next 8 soldiers
With 8 soldiers pr tab, that gives you plenty of room for 12 soldeirs and 2 UAV's.
Title: Re: GUI Design
Post by: Prinegon on May 27, 2010, 06:22:06 pm
Why not adapt the principal from starcraft 2? Build some groups (A,B,C,D) (or I,II,III,IV). Each member within the group can be chosen with the keys 1 to 6 (or to 8 ), each group can be chosen with STRG+ 1 to 4.

To help the player orientating even better, the position of each soldier relative to the current selected soldier could be added. In my attachment I did this with (okay, I admit, ugly) red arrows and a red circle for the selected player (I used paint and didn't want to spend much time for it). Other representation like highlighting the respective direction would also be possible, of course.
Title: Re: GUI Design
Post by: TrashMan on May 27, 2010, 09:34:04 pm
The arrows wouldbe useless. The trick to interfaces it to put only the information you need, in a clear, concise way. Minimize what is shown, maximize what can be aditionaly shown.

For example, mousing over a squad memebr number could make the squad memebr flicker or glow on the screen.

OR, if oyu enter a MAP view, you could have icons with numbers representing you soldiers. More intuitive and gives a better overview.
Title: Re: GUI Design
Post by: Prinegon on May 28, 2010, 01:42:38 am
The arrows wouldbe useless. The trick to interfaces it to put only the information you need, in a clear, concise way.

This may be true for you. But since I normally don't move my squad by number, but by position, the relative position to each other would be a more useful information to me than the number of the unit itself. Of course there are other ways to represent is, like the way it is done in civilization, where offscreen-units are displayed as a little arrowed bubble at the edge in the direction the unit would be. And yes, the red arrows are over the top. To color one piece of the border in green of the units button would be enough to show its direction relative to the selected unit (as well as there could be added a second border on which enemy sightings would be colored in red in its direction).
In my example the unit 6 would be northern-west to the currently selected unit and would face aliens coming from three directions: north, northern-west and southern-west.

But as I said, I wanted to point out a principle, not to actually do the design.
Title: Re: GUI Design
Post by: TrashMan on May 28, 2010, 06:50:10 pm
Again, switching to map view gives you a much clearer overview. One button does a better job than all this interface clutter.

I know what I'm talking about, I had interface design as a subject in college.
Title: Re: GUI Design
Post by: vedrit on May 28, 2010, 08:14:47 pm
some people want more info than where the unit is, and unless there is a unit info popup when you hove over the unit on the map, there will be a lot of clicking to find the unit they want
Title: Re: GUI Design
Post by: TrashMan on May 28, 2010, 10:03:22 pm
Hover over a number in normal view to get the soldier highlighted (and an arrow pointing towards it)

Hover over the number in the map view to have it's info pop up.
Title: Re: GUI Design
Post by: Winter on May 29, 2010, 10:25:37 am
Again, switching to map view gives you a much clearer overview. One button does a better job than all this interface clutter.

Truth. People in this thread are getting very carried away into the realm of gimmicks and information overload.

Rather than trying to design the battle GUI piecemeal, we need to get a full mockup to keep track of exactly how much information the interface is throwing at the player. TrashMan, if you're willing to work with me, we can try to hash something out together in IRC.

Regards,
Winter
Title: Re: GUI Design
Post by: Prinegon on May 29, 2010, 04:12:54 pm
I know what I'm talking about, I had interface design as a subject in college.

As I had. Doesn't say too much theese days.
Of course a map view is more preciese in where your team members stand and from where danger occurs. And if this game would be real time strategy, I would totally agree a map is indispensable. For a turn based strategy game the map is over the top. There would be two ways to implement a map view: A permanent map, or a callable map.
If the map is permanent, like in games like starcraft, you are using much display expanse reducing the area for the main window. You are not able to do a too small map, since a map you could not recognize anything (or recognizing anything would take more efford than simply scrolling to the right position) is no good. And since maps are not common in round based strategy games many players probably won't use the map at all anyhow.
Making the map callable would make things even worse. However the action would be to call the map (pressing "m" to show the map, moving your mouse to a specific edge do drag in the map, zooming out, until the area display becomes a map), a player would have to take efford to call a map, in some implementations even his attention is dragged away from the main window (like if you press m and you see the map, instead of the main window). Scrolling around to find the desired location may prove as the prefered solution, even if it will take longer in the middle, since the player has not to change his attention.
There is a reason why a map is uncommon in turn based games and only used, if the playable area is really big (like in heroes of might and magic or civilization). And to be fair, how often did you really use the map in theese games? How often did you zoom out maximal in civ4 to see the whole world, just to zoom in in the desired location? Of theese reasons I think a map is over the top: Too much unused information and too much display area for its usefullness.

As I played Ufo Enemy unknown (Terror from the deep was not my game, though), I normally knew the relative position of each team member to each other. I knew, if I moved Joe, next to him was another XCOM-Operative to cover him, far to the north were two Operatives charging a house and 3 Operatives try to get to the ufo in the south. Even if you increase the number of operatives you will use, the action will not take place all over the map, there will be 2 to 5 spots where your people will be. Showing the relative position of your operatives may not help you distinguish between the left or the right operative charging the house far to the north, but you will get one of them, if you select one in the gui based on the information the arrows will give you and normally this will be good enough (since you normally would move both operatives charging the house one after the other). So more information is not needed and I can't imagine a more simple way to give this information to the player.

My second design combining the relative position with the position of opponents, however, is flawed, since I use the same representation for two different concepts. The directive position marker shows the relative position refering to the current selected operative, but the opponents marker shows the direction opponents are relative to the person represented by the gui button. Using the same representation for different things is confusing and should be avoided.

The same mistake is already done in the actual gui, since you use the same buttons once for selecting a operative and selecting a floor level. But since a new gui is searched in this thread this mistake is to be avoided in the future, once the new gui is implemented.
Title: Re: GUI Design
Post by: misiek on May 29, 2010, 08:23:43 pm
What about something like that for showing soldier positions?

Of course it should be made much less obtrusive - maybe with transparency. Or maybe it should be only shown when some key would be pressed.

This means, that soldier 1 is in upper side, soldier 2 in left side, soldier 3 in right side.

It could also show aliens, maybe in red color?
Title: Re: GUI Design
Post by: TrashMan on May 29, 2010, 09:15:39 pm
Rather than trying to design the battle GUI piecemeal, we need to get a full mockup to keep track of exactly how much information the interface is throwing at the player. TrashMan, if you're willing to work with me, we can try to hash something out together in IRC.

I never used IRC. We could try via MSN or Skype.

Either way, I'll try making a full mockup. Already have a few ideas.
Title: Re: GUI Design
Post by: Prinegon on May 29, 2010, 10:46:54 pm
Of course there are other ways to represent is, like the way it is done in civilization, where offscreen-units are displayed as a little arrowed bubble at the edge in the direction the unit would be.

As I wrote before, that way of repräsentation would also be a way to help player orientating and it would be a very nice one, too. Make the numbers clickable and center the view on the soldier selecting him, once clicked the number bubble, and it would be perfect. However, implementation of this may be a little more complicated, though.
Title: Re: GUI Design
Post by: misiek on May 30, 2010, 07:36:44 am
I never used IRC. We could try via MSN or Skype.

You can use http://webchat.freenode.net/ - it's very simple to use.
Type ufoai in channels.
Title: Re: GUI Design
Post by: TrashMan on May 31, 2010, 01:44:45 pm
Here's mockup 1. This one is farely self-evident.
(http://img706.imageshack.us/img706/7758/ufoaigui1.th.jpg) (http://img706.imageshack.us/i/ufoaigui1.jpg/)


A lot of space is freed because some of the stuff in the current GUIK is nedlessly large or unnecessary.

Clicking the weapon image could be used for shooting, instead of a crosshair icon.
Next soldier and next visible enemy icon (next to the number of enemies seen by the soldier).

There's also extra space in the soldier status window for all kinds of stuff - physical soldier stats, affliction, specilizations, etc...


The other possible gui would be very similar to UFO: Aftershock of JA2. The whole bottom is taken up by portraits of soldiers with carried weapons. I'll make a mockup of that too.

EDIT:

Normal soldier screen
(http://img189.imageshack.us/img189/6812/uaigui21.th.jpg) (http://img189.imageshack.us/i/uaigui21.jpg/)
Was thinking adding solider nicknames as aditional ID.
Really, we should add this. Wonderfull for personalizing your team and easier to ID soldiers when you have "Shadow", "Steroid", "Scope", "Sgt. Slaughter" and such over their heads.



When one of the soldiers is selected
(http://img704.imageshack.us/img704/8556/uaigui22.th.jpg) (http://img704.imageshack.us/i/uaigui22.jpg/)

Leaves a lot of room below for more icons and information and stuff. You even have room for a basic inventory (no backpack)

Title: Re: GUI Design
Post by: Winter on June 01, 2010, 12:10:04 am
(http://img706.imageshack.us/img706/7758/ufoaigui1.th.jpg) (http://img706.imageshack.us/i/ufoaigui1.jpg/)

This is going in the right direction. However, in addition to a new layout, we really want to update the bland green and grey look of the GUI for something slicker and higher-tech to help improve the feel. Blue would be the operative colour. Think there's anything you can do there?


Quote
Clicking the weapon image could be used for shooting, instead of a crosshair icon.

I'm thinking single-click on weapon for a shot, double-click to change firemode.


Quote
Next soldier and next visible enemy icon (next to the number of enemies seen by the soldier).

Works for me.

I think we can also condense the various pop-up information windows on the right -- perhaps even removing the useless EEG/ECG readout entirely.


Quote
Normal soldier screen
(http://img189.imageshack.us/img189/6812/uaigui21.th.jpg) (http://img189.imageshack.us/i/uaigui21.jpg/)
Was thinking adding solider nicknames as aditional ID.
Really, we should add this. Wonderfull for personalizing your team and easier to ID soldiers when you have "Shadow", "Steroid", "Scope", "Sgt. Slaughter" and such over their heads.

I don't like this idea. There's no way we could pull off a JA-style interface simply because we can't do that level of personalisation. Our troops don't have individual voice tracks and specifically-written lines to establish their characters, so if anything we just end up with a bunch of cookie-cutter faces staring blankly back at the player. Thinking as a player myself, that would actually decrease my immersion and level of emotional investment in the troops.

Regards,
Winter
Title: Re: GUI Design
Post by: TrashMan on June 01, 2010, 08:40:19 am
I don't know about you, but I always personalize the s**** out of everything.

Now, we can already change the soldiers name, so I figured adding a nickname field wouldn't be a problem (I guess I could always just name the soldier "Viper" or "Phoenix" or sumtin', but Dennis "The Menace" McAnal sounds so much better.

How to improve personalization? Well, for once, we don't really need the voices. However, the abiltiy to choose a head model for a soldier would be nice (and a few aditional heads)

Second, the profession icon thing - if it just lists all the icons from a specific folder, then players can add simple icons themselves, to further help to personalize. So I can add a small phoenix icon for my Uriel "Phoenix" Baddasovski. That makes it even easier to track soldiers.

Personally, the upper mockup offers more space so I agree we go with it. We can simplyfy it even more by using the same left/right hand method as the  lower mockup (one large field devided into two. Big weapons take up both field, small weapons take up one).

Since we have so much free space left, we could add the basic inventory preview (without backup) for hte soldier, and in the space below the health/AP bars we could add a toggle for soldier stats or something.
Title: Re: GUI Design
Post by: H-Hour on June 01, 2010, 11:36:48 am
I'm thinking single-click on weapon for a shot, double-click to change firemode.

The game doesn't feature much double-clicking. New users will learn the interface as a single-click interface, so they may never learn that weapons have multiple firing modes.
Title: Re: GUI Design
Post by: BTAxis on June 01, 2010, 11:47:18 am
Double-clicking to change firemodes sounds like a bad idea to me. If a weapon has more than 2 firemodes (and there are many of those in the game), picking the right one becomes a chore, especially if you accidentally overshoot.
Title: Re: GUI Design
Post by: TrashMan on June 01, 2010, 12:26:43 pm
Nah, I mean that clicking on the weapon image has the same effect as clicking on the blue crosshairs icon.
That, or we could add a small fire mode icon next to the weapon image. Clicking on it would change the fire mode.
Title: Re: GUI Design
Post by: geever on June 01, 2010, 12:33:33 pm

The game doesn't even support doubleclick if I'm right.

-geever
Title: Re: GUI Design
Post by: Kildor on June 01, 2010, 12:58:39 pm
I like idea about «Click on weapon to shoot», but I don`t like any «double-clicking». We can add something like button to open menu with choises. I`m looking to the hud, and have some ideas, how to improove it. Unfortunately I don`t have time to finish mockup and show it to you, but may be tomorow?
Title: Re: GUI Design
Post by: H-Hour on June 01, 2010, 03:35:57 pm
Well, I love GUI design and I couldn't help getting in on the fun. Here are some ideas about how we can represent some useful information to the player in a way that isn't too visually distracting.

Ok, now I really need to get back to work.
Title: Re: GUI Design
Post by: H-Hour on June 01, 2010, 03:41:29 pm
Looking at my mockup again real quick, I think it would be good if we used a different background shape to represent the list of levels, something shaped like a building. Just to help differentiate the levels from the soldiers. Or we get rid of numbers for the soldiers and use names, but then the right panel would need to be set out differently.
Title: Re: GUI Design
Post by: Kildor on June 01, 2010, 04:29:44 pm
H-Hour, look to the 2.4 hud, there is such icons.
Title: Re: GUI Design
Post by: Prinegon on June 01, 2010, 06:49:39 pm
@H-Hour: I really love the unit-indicators at your floor marker.
Title: Re: GUI Design
Post by: Winter on June 01, 2010, 07:00:29 pm
Double-clicking to change firemodes sounds like a bad idea to me. If a weapon has more than 2 firemodes (and there are many of those in the game), picking the right one becomes a chore, especially if you accidentally overshoot.

I don't think that's true, but in any case, I had a thought that we could put firemode choice to RMB over weapon. That'd make things simpler and reduce any hassle.


Quote
We can simplyfy it even more by using the same left/right hand method as the  lower mockup (one large field devided into two. Big weapons take up both field, small weapons take up one).

This is a good idea. I've always hated the two big hand windows.


Quote
Since we have so much free space left, we could add the basic inventory preview (without backup) for hte soldier, and in the space below the health/AP bars we could add a toggle for soldier stats or something.

Agreed. Keep it small and simple though, its main use will probably be switching stuff between hands and body storage/belt/holster.

Regards,
Winter
Title: Re: GUI Design
Post by: Winter on June 01, 2010, 07:07:05 pm
Well, I love GUI design and I couldn't help getting in on the fun. Here are some ideas about how we can represent some useful information to the player in a way that isn't too visually distracting.

I actually really like your levels and indicator tabs, but your soldier panel is fiddly and cumbersome, with its tiny tiny buttons and forced scrolling through a list. We want to avoid arrow buttons and especially click-based scrolling.

Regards,
Winter
Title: Re: GUI Design
Post by: Ain Soph Aur on June 01, 2010, 11:13:36 pm
Well, I love GUI design and I couldn't help getting in on the fun. Here are some ideas about how we can represent some useful information to the player in a way that isn't too visually distracting.

Ok, now I really need to get back to work.

I really like this one. But for me personally the right side needs more work
Title: Re: GUI Design
Post by: Kildor on June 02, 2010, 07:22:16 am
Ok. Here is my idea:
Most of information placed on image. All HUD can be maked slimmer without any problem.

About weapon:
Ammo info is shown on the weapon. If no ammo is left, ammo-counter is replaced with button.
Click on weapon to shoot, click on arrow to select firemode. Selected firemode is shown in status field.

Current popup (in 2.4) can be easy added to this HUD.
Title: Re: GUI Design
Post by: H-Hour on June 02, 2010, 09:35:55 am
The expandable space for the soldiers is good and I like how less space is taken on the bottom. But shouldn't the player be able to reload even before they are out of ammo? Wouldn't want to be forced to run into a building with one shot left.
Title: Re: GUI Design
Post by: Kildor on June 02, 2010, 09:58:34 am
Oh, yes. Thanks for this notice. It is easy to fix, just add symbol for ammo.
Btw, there is one more possible solution, add popup menu to select needed ammo.
Here is it.

Also, status log can change it`s color to show current turn, aliens or player.
Title: Re: GUI Design
Post by: TrashMan on June 02, 2010, 12:06:49 pm
FYI - I don't think we'll need scrolling.

The screen is big enough to fit all 12 soldiers in the bar.
If no, we can always apply the bars horizontally instead of vertically. That will surely fit them all.

@HH - those markers for levels are a great idea.
Title: Re: GUI Design
Post by: BTAxis on June 02, 2010, 12:09:52 pm
Don't make assumptions about the screen too lightly - you don't know what resolution people will be playing at.
Title: Re: GUI Design
Post by: Kildor on June 02, 2010, 12:55:44 pm
Should HUD be normalized for 1024x768 resolution, shouldn`t?
Title: Re: GUI Design
Post by: TrashMan on June 02, 2010, 02:20:21 pm
Well there's gotta be some minimal resolution. These days 1024x748 is the lower norm.

You can only go after backwards compabiltiy for so long..or should we try to support 320x240 resolutions too?

I mean, UFO:AI isn't resource intensive, so bumping up resolution shouldn't be a issue, even on weaker computers. And if people don't have monitors for that...well, sucks to be them.
Title: Re: GUI Design
Post by: BTAxis on June 02, 2010, 03:03:02 pm
I was thinking more of portable devices such as the Pandora.
Title: Re: GUI Design
Post by: misiek on June 02, 2010, 07:27:34 pm
What about making good gui for pc with at least 800x600 resolution and worry about gui for handheld devices if someone will port ufo: ai to them?

After all, ufo: ai should support multiple guis? IMHO it would be better to have one gui for normal computer and second (simpler) for handheld devices than have one universal gui.
Title: Re: GUI Design
Post by: Borsti67 on June 03, 2010, 08:33:50 pm
Kildor, if the soldier-selectors could include the 3 stats (eventually the way TrashMan proposed) it would be more useful IMHO.
Also I like that level-indicators (H-Hour).  :)
Title: Re: GUI Design
Post by: H-Hour on June 05, 2010, 02:08:51 am
More pie in the sky ideas for the soldier panel, now with fiddlier buttons!
Title: Re: GUI Design
Post by: vedrit on June 05, 2010, 05:50:29 am
I like that mock-up, but I think the stat bar options is a little useless. TU's, Health and Morale should be the only options, as those are the most important on the battlefield
Title: Re: GUI Design
Post by: Marte on June 08, 2010, 11:51:42 am
H-Hour I like your mockup, some suggestions (IMHO):
1) make soldier panel resizeable when therea are less or more soldiers. For example if I enter into battlefield with 4 soldier, could be smaller, with 16 soldiers max size and so on?
2) no names for a soldier? maybe could I set advanced option to see it?
3) soldier with no more TU could have corresponding item with a background that explain this state ? For example with gray background, like in windows, linux, etc ?
4) Can I select more icon at same time ? For example to show health and weapong, or just health?
Title: Re: GUI Design
Post by: H-Hour on June 08, 2010, 12:43:48 pm
I think Vedrit's right: TU, Health and Morale are the most important (I completely forgot about morale!).

H-Hour I like your mockup, some suggestions (IMHO):
1) make soldier panel resizeable when therea are less or more soldiers. For example if I enter into battlefield with 4 soldier, could be smaller, with 16 soldiers max size and so on?
2) no names for a soldier? maybe could I set advanced option to see it?
3) soldier with no more TU could have corresponding item with a background that explain this state ? For example with gray background, like in windows, linux, etc ?
4) Can I select more icon at same time ? For example to show health and weapong, or just health?

1. It would expand or contract to the number of soldiers that enter the battlefield.

2. I would probably put soldier names on the long bar below, so that it appears when you mouse over the soldier.

3. I think no-TU is not very useful, since players will reserve TUs for reaction fire, and you could get to 2 TUs but not be able to move one more square, etc. I prefer the light that says only when a soldier has not yet moved in the turn.

4. Well, the icon system would need entirely new features to be developed, so I wouldn't count on it that soon.

None of this is likely to go anywhere for a while, but it's fun to think about different options. There's talk of having a GUI preview feature in the Eclipse IDE some of the devs are working on, and that would make it a lot easier for me, since I'm still learning how it all works and prone to lots of errors. But who knows what the priority is on this, or what priority there is on expanding the cvars available to the GUI. A lot of what I've proposed is not currently possible because the GUI doesn't have that kind of information.

No reason not to think about it, but just putting it out there so we don't get too far ahead of ourselves.
Title: Re: GUI Design
Post by: Prinegon on June 09, 2010, 08:05:42 am
Afaik the most common and also most effective way to show TU (or TU used) would be TU shown on the field you are about to move as mouse_hover_over effect (using an extra symbol, if moving to this field means, you will not be able to sit down).

I think, since it depends most of personal preferences if one experiences a gui of a game to be good or bad, it even might be a good idea to make the gui costomizable. One loves really small gui not using up much screen size at all, the other one prefers the gui to hold up more information. One might be fine orientating by unit numbers, the other one likes the units heads inside, one needs the names, the other one not and one even doesn't use the gui at all. Being able to costumize the gui to ones own needs may improve the usability of the game significantly.
Title: Re: GUI Design
Post by: Soul on June 16, 2010, 06:27:18 pm
Hi. Would it be possible to use some more detailed graphics for GUI? I guess it would be necessary to change something in the engine, but maybe that's not insanely time consuming?

I think it looks very nice with the attention to detail of... i.e. UFO:ET.

(http://img204.imageshack.us/img204/4163/ufoetheavyarmourdesertt.th.jpg) (http://img204.imageshack.us/img204/4163/ufoetheavyarmourdesertt.jpg)   (http://img193.imageshack.us/img193/7578/desertbase.th.jpg) (http://img193.imageshack.us/img193/7578/desertbase.jpg)
Title: Re: GUI Design
Post by: Kildor on June 17, 2010, 05:42:09 am
Oh no, please, do not ufoet. It is very ugly piece of graphic.
Title: Re: GUI Design
Post by: Bartleby on June 17, 2010, 07:05:35 am
More pie in the sky ideas for the soldier panel, now with fiddlier buttons!
great design :)
Title: Re: GUI Design
Post by: Soul on June 17, 2010, 10:08:14 am
Oh no, please, do not ufoet. It is very ugly piece of graphic.
;D

I meant only the details (resolution) of the GUI.
Title: Re: GUI Design
Post by: TrashMan on June 18, 2010, 01:57:34 pm
Well, it does demonstrate that portraits could be small and still very visible and distinct.

In that example, there are 11 soliders and their portrait bar takes up only a small fraction of available space.
Title: Re: GUI Design
Post by: Winter on June 19, 2010, 03:37:31 am
Well, it does demonstrate that portraits could be small and still very visible and distinct.

In that example, there are 11 soliders and their portrait bar takes up only a small fraction of available space.

Yes, but what point is there to having a portrait bar when the portraits are randomly generated? This kind of dead, dull facelessness is perfectly demonstrated in those UFO:ET screenshots. Even if there were no duplicate portraits it would still look awful. Uncanny valley, man.

Also, strangely enough, I think the portrait bars in ET are actually a bit too small for what they are. I would've given up 1 or 2 faces for extra size and clickability. They're already tiny on 1024x768; imagine how small they'll be on higher resolutions.

Regards,
Winter
Title: Re: GUI Design
Post by: Bartleby on June 19, 2010, 09:22:51 am
Yes, but what point is there to having a portrait bar when the portraits are randomly generated?
hm... if a portrait is fexed to a soldier, when soldier is generated, i wont call it randomly. i liked it like it was in ufo afterlight (also gui was too big in that game). and it was also great that the biginning crew had a "history" :).
btw. i still like h-hours disign and would like to see it added by portraits. makes things more personal. well... it feels personal and individual then :).
Title: Re: GUI Design
Post by: Origin on October 14, 2010, 03:57:57 am
Since I havent seen any progress on this, I though I would try making some new GUI graphics myself.
I dont know anything about actually moving stuff around, or adding new features though, so only visual stuff so far.
Tell me what you think.
Title: Re: GUI Design
Post by: Crystan on October 14, 2010, 04:06:04 am
Nice! I really like it.
Title: Re: GUI Design
Post by: Kildor on October 14, 2010, 04:52:19 am
First image is wrong :-)
There are more buttons on the sidebar (where radar, nation borders and so on placed). XVI button will be shown later in the game.

Also, by my opinion we need not repainting but complete redesign geoscape. But I like color scheme.
Title: Re: GUI Design
Post by: Mattn on October 14, 2010, 08:00:57 am
please upload and share it somewhere. that would allow us to start to implement different skins for the menus (like we have for the hud already.
Title: Re: GUI Design
Post by: bayo on October 14, 2010, 11:14:50 am
Quote
... that would allow us to start to implement different skins for the menus (like we have for the hud already.
I really hope we will not doing it. Hud support different layout, not different skins. Skin and layout is not the same subject.

Supporting officially more than one skin is time consumption for nothing. And anyway everybody can already change the skin with pk3.
Title: Re: GUI Design
Post by: H-Hour on October 14, 2010, 11:28:09 am
Yes, I think it's an improvement over the existing GUI. But I would also say on the art side I think you could do better. It feels a bit incomplete. Having messed around with the GUI system, though, I'm hesitant to make any critiques because I know you're quite penned in and there's not a lot of room to develop a different concept, short of doing a whole lot of work with the GUI scripts.
Title: Re: GUI Design
Post by: Mattn on October 14, 2010, 12:28:57 pm
indeed - replacing pk3 files would work, too.
Title: Re: GUI Design
Post by: bayo on October 14, 2010, 02:30:09 pm
Quote
Having messed around with the GUI system, though, I'm hesitant to make any critiques because I know you're quite penned in and there's not a lot of room to develop a different concept, short of doing a whole lot of work with the GUI scripts.
I dont want to be so much off-topic, but I dont understand what you mean. Sure you can ask or say what you need, what work and what dont. Anyway, please be more explicite, or open a new discussion. This thread already talk about many many things without a global coherency.
Title: Re: GUI Design
Post by: mor2 on October 17, 2010, 09:44:06 pm
More pie in the sky ideas for the soldier panel, now with fiddlier buttons!
i love what you are doing  :)

btw what game are those guns icons from? they look familiar but i cant seem to pin it down  :(


First image is wrong :-)
There are more buttons on the sidebar (where radar, nation borders and so on placed). XVI button will be shown later in the game.

Also, by my opinion we need not repainting but complete redesign geoscape. But I like color scheme.
i'll try to give it ago for half an hour and will see how it goes (i warn you my paint skill are pitiful)
Title: Re: GUI Design
Post by: mor2 on October 17, 2010, 10:38:23 pm
this the scheme i came up with http://i53.tinypic.com/311s6eh.jpg (http://i53.tinypic.com/311s6eh.jpg)

1. i used green/blue/brown/metalic colored parts  so you can choose which theme works best for you. (i prefer less "glowy" theme)
2. got past the time frame i set for myself, so i didnt finish the options part and used icons instead (i was planing to leave it as is mins the the 'message options', should be in options).
3. the navigation moved to the bottom right corner, its great but in my opinion less precise/fast than working with the mouse.
the rest is pretty much the same.

EDIT:
side bar, naturally i prefer a side bar, since most monitors are or moving in the direction of 16:9 (so it keeps more working space for our globe) but there is not much you can fit in there, so as such its just a dead spaces for the most part.

Title: Re: GUI Design
Post by: bayo on October 17, 2010, 10:41:07 pm
* A circle is better is a square, then i think, a right bar is better.
* Scrollbar at right left, is uncommon.
Title: Re: GUI Design
Post by: mor2 on October 17, 2010, 11:07:15 pm
i am not exactly sure what you said, beside liking the right bar (unless its intended so to mimic my enlgish?) .

you can flip it around but i think it has more natural flow in the reading direction.
Title: Re: GUI Design
Post by: H-Hour on October 17, 2010, 11:32:16 pm
For the top, I like the brown color scheme as it is slightly unexpected for an aliens game, but the buttons on the right look better. I'm not sure about the layout in general, though.
Title: Re: GUI Design
Post by: mor2 on October 18, 2010, 03:31:50 am
ok so how about this one (http://i55.tinypic.com/2ezlkww.jpg) how is the general layout feels now? any better?

i am trying to decide where to put the menus in II similar to what it looks now or at I as icons strip?
Title: Re: GUI Design
Post by: Origin on October 18, 2010, 04:08:10 am
I like this last one alot, I think we should do something in this direction.

Not much to comment, exept I would personally prefer it on the right side of the screen. and do we really need the globe control panel? I mean using the mouse to rotate and zoom works fine (better even). It made sense in the old x-com games since the mouse control was pretty limited.
Title: Re: GUI Design
Post by: H-Hour on October 18, 2010, 11:33:15 am
 
i am trying to decide where to put the menus in II similar to what it looks now or at I as icons strip?

I agree with origin about it being on the right side, including the scrollbar. I would say the menus should be icons, but we'll need to do some work to make it clearer what the icons represent.

do we really need the globe control panel? I mean using the mouse to rotate and zoom works fine (better even).

I agree the mouse is much better, but I think it should remain for those users who don't right-click. Otherwise we run the risk of assuming the player has discovered how to rotate when they may not know how. In the future it could be something that could be toggled on/off by the player.
Title: Re: GUI Design
Post by: Crystan on October 18, 2010, 12:22:15 pm
Otherwise we run the risk of assuming the player has discovered how to rotate when they may not know how.

Well if i renember correctly its now possible to add sequences to the geosphere screen? Iam not sure but i think bayo said something like this.
Then we can just add a tutorial check box in the options which start just after the campaign intro a tutorial.
Title: Re: GUI Design
Post by: H-Hour on October 18, 2010, 01:13:32 pm
start just after the campaign intro a tutorial.

You can't trust players to follow a tutorial either. If it were anything other than an absolutely vital function, I wouldn't mind so much. But if the player can not rotate the earth he can't play the game, so this needs to be as clear and present as possible.
Title: Re: GUI Design
Post by: geever on October 18, 2010, 01:32:08 pm
You can't trust players to follow a tutorial either. If it were anything other than an absolutely vital function, I wouldn't mind so much. But if the player can not rotate the earth he can't play the game, so this needs to be as clear and present as possible.

I think the best will be putting it to a little popup, showing it by default and let players disable it if they want.

-geever
Title: Re: GUI Design
Post by: mor2 on October 18, 2010, 01:56:48 pm

I agree with origin about it being on the right side, including the scrollbar. I would say the menus should be icons, but we'll need to do some work to make it clearer what the icons represent.

I agree the mouse is much better, but I think it should remain for those users who don't right-click. Otherwise we run the risk of assuming the player has discovered how to rotate when they may not know how. In the future it could be something that could be toggled on/off by the player.

with consistency in mind it make sense to put it on the right side, since most of the other menus are on the right and probably most of you got used to it through 2.3 but for me its much more natural to place it on the left, nevertheless you can flip it easily. (just center the  text so it doesnt look weird)

other than that i think accessibility is a little better, mostly as before i grouped frequent used controls around the most used control(time). making the time control bigger, moving the less used globe control (as said before its not as useful as right mouse but still needed from user friendlessness prescriptive plus its looks good  ;) )

other than that i grouped the alerts (allow much more place for additional info without breaking the layout) although i am not sure if such changes are in the scope of the redesign and what about moving the 'message options' button to options?


anyway its just a suggestion (http://i55.tinypic.com/2ezlkww.jpg), trying different color scheme, location, design, hopefully it will help (i also included the pdn - paint.net file if someone want a hack at it)
Title: Re: GUI Design
Post by: bayo on October 18, 2010, 07:23:13 pm
Quote
I agree the mouse is much better, but I think it should remain for those users who don't right-click. Otherwise we run the risk of assuming the player has discovered how to rotate when they may not know how. In the future it could be something that could be toggled on/off by the player.
I think we can work on the globe to use left click to move it. For example Google map do it.

Quote from: geever
I think the best will be putting it to a little popup, showing it by default and let players disable it if they want.
I would prefer a button to display it... i mean it is not displayed by default.
Title: Re: GUI Design
Post by: mor2 on October 19, 2010, 01:00:18 am
here is another attempt, this time its the tactical screen  (click to see full size)
(http://i55.tinypic.com/5ogn5i_th.jpg) (http://i55.tinypic.com/5ogn5i.jpg), (http://i52.tinypic.com/xqdg7m_th.jpg) (http://i52.tinypic.com/xqdg7m.jpg)
the second is the same but with menus open.


1. location for additional info (edit: probably soldiers name)
2. Added button to soldiers portrait to allow access to its statistics.
3. H-hour bar, which i really love (hope to see more of it)
4. Weapon control, shows currently equipped weapon and ammo quantity/ type (useful for weapon with multiple ammo types) - i am really not happy with this and will rework it, suggestions will be greatly appreciated.
also as before you click the button (which i forgot to add) to open the inventory.
5. simple to use, click to use(change stance or change RF mode) or right click to reserve, which will light a red light (inspired by H-hour bar)
6. the rest of the menu option will be there.


its wip, mostly a proof of concept, so i'll appreciate any suggestions, questions etc...
dont forget, i hate XYZ, fix this or this doesnt work for me - is also input and is better than none at all (although my skill at editing is very limited especially without access to photoshop)

few questions from the top of my head:
a. How would you feel with one weapon control for both hands?
b. Clicking on equipped weapon to use or do you prefer a special button for this?
c. How is the color theme?
d. do you prefer minimalistic approach, small icons, etc?  how will you feel about down sizing the floor 1-8 bar, even thou its very used?
e. how does this looks on higher res? (here i have a few years old laptop that cant get any further than this)

X. what font is used in ufoAI/ your favorites ??????? i am tried of copy pasting because the fonts i try looks ridicules.
 

p.s. sorry for no background and poor quality screenshots but even as it is i had to retry 3 times to upload them with this crappy wifi.
Title: Re: GUI Design
Post by: Kildor on October 19, 2010, 05:42:26 am
I like dropdown button below soldier`s head, I don`t like reload button, it is very large, also there is very much space eaten by borders and other nonsence elements
Title: Re: GUI Design
Post by: Mattn on October 19, 2010, 07:36:26 am
this (http://ufoai.git.sourceforge.net/git/gitweb.cgi?p=ufoai/ufoai;a=blob;f=contrib/7th.zip) is the font we are using at some places - but it isn't free

the font we are using for the menu depends on the translation, but the defaults are here (http://ufoai.git.sourceforge.net/git/gitweb.cgi?p=ufoai/ufoai;a=tree;f=base/media)

Title: Re: GUI Design
Post by: H-Hour on October 19, 2010, 10:19:34 am
I like the drop-down from the soldier's head as well. The 4 and 5 elements do tend to waste space and could stand to be improved a bit. The overall look of it is nice, but it seems pretty generic to me.

If we anchor the bottom elements to the left-hand weapon like you have, it would be nice to have the right-hand weapon slot shrink horizontally when not used.
Title: Re: GUI Design
Post by: mor2 on October 19, 2010, 12:53:19 pm
I don`t like reload button, it is very large
me neither, its was just a temporary overlay to fill in the gap and test something, personally i dont intend to place a reload button at all.
in my opinion, what can be more natural than clicking the gun to shoot and clicking the ammo to reload and near have easy access to the inventory so you can replace both, no?

also there is very much space eaten by borders and other nonsence elements
in general i agree but you cannot make the borders much smaller and keep them easily distinguishable from everything going on the map.
plus with those borders the bottom bar is 25% smaller than the current one.


The 4 and 5 elements do tend to waste space and could stand to be improved a bit. The overall look of it is nice, but it seems pretty generic to me.

If we anchor the bottom elements to the left-hand weapon like you have, it would be nice to have the right-hand weapon slot shrink horizontally when not used.
the reason its this way its because i just placed them as anchors, while i was trying to decide how to make the weapon control, here few of the variants i was considering:

(http://i55.tinypic.com/2s80oxj.jpg)

left side are the two weapons variants and right side are the one hand variants either shrinking or providing additional info instead (we can also make it as two separate controls and hide the left-hand control when not in use, like you said).
one of the problem's is that i dont know enough about all the weapons combination's and layout to be sure i cover all scenarios.


as for the generic part, i am not sure what you mean, you mean the schematics or the design? you want something more hitec?
Title: Re: GUI Design
Post by: H-Hour on October 19, 2010, 01:26:11 pm
as for the generic part, i am not sure what you mean, you mean the schematics or the design? you want something more hitec?

I mean that the metal borders look nice, but they look like a lot of website templates (PHPNuke!) or game GUIs I've seen before. It isn't very distinct, I think.
Title: Re: GUI Design
Post by: mor2 on October 19, 2010, 01:45:27 pm
i was trying to go for the same metallic/greyish look the current hud use but make it more sharp, its can be replaced. right now its mostly placeholders, so i can focus on the most important part - improving functionality (like you did with bar), any suggestions for the weapon control? ( or better any intention to make one yourself  8) )

btw is it possible at all to have two different layouts for one weapon and two weapons?
Title: Re: GUI Design
Post by: mor2 on October 19, 2010, 06:24:50 pm
ok here where i got so far:

clean look.
(http://i52.tinypic.com/9tjuqq_th.jpg) (http://i52.tinypic.com/9tjuqq.jpg)

comments, soldier stats and inventory.
(http://i54.tinypic.com/3590qpe_th.jpg) (http://i54.tinypic.com/3590qpe.jpg)

fire mod control, possibly second hand placeholder and other unfinished stuff.
(http://i56.tinypic.com/2w32h3l_th.jpg) (http://i56.tinypic.com/2w32h3l.jpg)


so any suggestion what todo with the second hand weapon ? (pop it on the right side or change the current)
any functionality change ( i think i included most of the previously discussed ideas, no?)
should i still downsize the borders? (wouldnt it look empty on larger res screens?)
any future additions that i should account for ? (something from 2.4 or further?)
 

i'll try to upload the pdn (this time more layer and easier to play with) in case someone want to give it a hack
but its 660K even after using 7z so i might have to wait until i'll be back home.
Title: Re: GUI Design
Post by: mor2 on October 19, 2010, 11:28:06 pm
(http://i53.tinypic.com/vynw41_th.jpg) (http://i53.tinypic.com/vynw41.jpg)

a little fix to the above, showing the stance/RF mode  + reservations, and the 2 weapon combination.
which leaves me only with un implemented end turn, spotted aliens and way to dark option/floor control.
Title: Re: GUI Design
Post by: H-Hour on October 20, 2010, 12:49:37 pm
This thread has become a mess because we're juggling too many things: changes to the UI layout and functions, suggestions for entirely new artwork, etc.

I've started a reassessment of the battlescape HUD here (http://ufoai.ninex.info/forum/index.php?topic=5468). That thread will try and organize existing and new suggestions for the battlescape and figure out what can be implemented in the near future. I hope that it will be the beginning of a long process that will see adjustments to the UI and new artwork, but we must take it one step at a time.

This thread remains the place to discuss new artistic themes, though, so please continue as you were. I only want to make it clear that new artwork won't likely be implemented soon unless a complete set of graphics exists to replace the currently-used graphics (as they fit into the current UI layout). Suggestions that require new UI layouts or functions are still very much welcome, because I think this thread has generated a lot of interesting ideas.
Title: Re: GUI Design
Post by: Bartleby on October 20, 2010, 01:22:28 pm
avatar had a great gui. is there a way to make parts transparent?
Title: Re: GUI Design
Post by: H-Hour on October 20, 2010, 01:34:50 pm
avatar had a great gui. is there a way to make parts transparent?

Are you referring to this  (http://uk.xbox360.ign.com/dor/objects/843156/avatar-the-game/images/avatar-the-game-20091123081052713.html?page=mediaFull)or this (http://forum.notebookreview.com/2311374-post5.html)?
Title: Re: GUI Design
Post by: mor2 on October 20, 2010, 04:11:17 pm
This thread remains the place to discuss new artistic themes, though, so please continue as you were. I only want to make it clear that new artwork won't likely be implemented soon unless a complete set of graphics exists to replace the currently-used graphics (as they fit into the current UI layout). Suggestions that require new UI layouts or functions are still very much welcome, because I think this thread has generated a lot of interesting ideas.

obviously (i never thought my brownish theme had any chance) although this thread objective is unrealistic you will never get a complete set without feedback, you dont really expect anyone to waste his time redoing everything before he has a go, which requires a lots of steps a head.

which is why i told you the "design" (its not PHP nuke, its some games screenshot from google image) is un important only the schematics behind, the rest can be easily fitted in photoshop (gradients and overlays makes life so much easier).
Title: Re: GUI Design
Post by: Bartleby on October 20, 2010, 10:11:42 pm
i mean the movie. cant find a good picture right now. was the commandshipnavigation.
but whatever gui is a bit transparent and doesnt make the screen smaller is good. not that all thing should be transparent, but the space between a small border an the buttons should be half-transparent. or buttons without border like in wow. well... im going to sleep now, maybe more later.

EDIT: cant find better link atm.

the wow interface is also great: http://www.ullebambulle.de/images/wow_002.jpg (http://www.ullebambulle.de/images/wow_002.jpg)
or deus ex: http://thisgamesucks.files.wordpress.com/2008/11/deus_ex_002.jpg (http://thisgamesucks.files.wordpress.com/2008/11/deus_ex_002.jpg)

EDIT: i dont play wow, but i like the interface.
Title: Re: GUI Design
Post by: Borsti67 on October 21, 2010, 08:58:14 pm
the wow interface is also great

Why? I see a sh*tload of pictures meaning nothing to me (as a non-WOW-player). THIS would certainly NOT let my ever try it...
Title: Re: GUI Design
Post by: mor2 on October 25, 2010, 02:19:09 am
we have a lot of great ideas and approaches through the thread about layout, functionality, accessibility, graphics, etc
the way i see it, we can roughly put the interface in 3 categories:
1. weapon control, we had a lot of ideas here and on this thread as well
2. soldier selection, we had very little discussion on this.
3. everything else, their placement depends on the above and changes to their functionality doesn't effect the global scheme.

considering that  in the future the soldier selection panel needs to support 16 soldiers, its will be the biggest most space consuming panel and we must decide how to implement it and where to put it.

we have few options:
A. stay on course and have 1-16 blue buttons.
B. replace the buttons with bar showing either soldier portraits or their function(or both)
in which case we need to decide how big soldier slot should be, since 16 of them takes some space as it can be seen here (http://i53.tinypic.com/4tprwm.jpg)

so we need to either decrease the slot size, use sliders, put few rows etc, here is a few solution put together:
(http://i55.tinypic.com/3021csn_th.jpg) (http://i55.tinypic.com/3021csn.jpg)

we also need to decide what (if any) additional info the slider should show, like names, weapons, 3 stats (see H-hour bar on p.8 for nice multi function slider suggestion)  and equipped with this knowledge we can finally do some damage  and place everything together 8)


some other games research background for reference: Enemy Unknown (http://www.ibiblio.org/GameBytes/issue19/greviews/ufo2.gif) and other UFO interfaces aftermath (http://img.gamespot.com/gamespot/images/2003/news/07/29/ufo/aftermath_screen001.jpg), afterlight  (http://www.ufo-afterlight.com/images/scr_33.jpg), aftershock (http://www.file-extensions.org/imgs/app-picture/2905/ufo-aftershock.jpg) also UFO:ET (http://www.cpugamer.com/downloads/UFO:%20Extraterrestrials/117794980310.jpg) and JA2 (which we all know)
and my personal favorite X-com apocalypse (http://chinwags.files.wordpress.com/2010/07/dosbox-2010-07-07-13-07-45-97.jpg) altough its not something we can expect, even if someone agree we need groups it will have to wait until they restructure the current troop scheme.



so any ideas, thought, critics, like/dont likes, one liners/life stories regarding any of the above or new directions will be welcome.
Title: Re: GUI Design
Post by: bayo on October 25, 2010, 09:15:51 pm
if we continue to use the current hud, i think we would use character (a, b, c, d), or veryvery small heads instead of number. Especially for this problem of digits.

The 2. need too much work, and ask too much questions. I can develop.

I think 3. is better than 4. and 5. but, there is a but. It must allow to drag the panel with a click-and-move on the soldiers heads. Without this feature all of this one will be very annoying to use.

6. is the more easy to create.

7. i dont like multi rows cause... i can't argue.
Title: Re: GUI Design
Post by: mor2 on October 28, 2010, 04:00:19 pm
well, here is my latest progress, noting big but many little touches.

i am going to stick with lower panel, the left/right arm will be toggleable exactly like in the a.hud
the soldier selection bar will show 8 soldiers at a time with buttons to show next 8 (hopefully in the far future it can be expanded to teams like it was in XCOM APOC)
Title: Re: GUI Design
Post by: Kildor on October 29, 2010, 04:52:59 am
It is not a good HUD design. It is very unintuitive, small and is not fitted to translation needs. Also, if I understand this mockup right, is row above soldiers used for level-switch? This is not a good idea, current version is better and more logical.
Title: Re: GUI Design
Post by: mor2 on October 29, 2010, 05:32:17 pm
i would say its small, at least i dont think it buttons are smaller than the a.hud version, for example to shoot you click the weapon icon, so while the total surface area is smaller(so you i can see more) the buttons/function area is bigger.
there are few problems like the weapon button switch but its small in the a.hud as well, still i already made it bigger and probably will make additional adjustments in the future.

"is not fitted to translation needs" - agreed, i'll try to refrain from using it but at the moment i am still keeping it to make it self explanatory what everything does (since an image doesnt have an tooltip)
as for the floor selector i just placed him there to fit it in, here it is a screen from the other thread with it in the traditional position (http://i56.tinypic.com/106doqx.png) i also made an a.hud like suggestion (http://i56.tinypic.com/2w511qv.png), what direction you prefer?

in either case it doesnt intended to replace the default version but server as another hud version a mod if you like, here is the idea i had for the default layout (http://i53.tinypic.com/263fsbs.jpg) with minimal change.


and most importantly can you please be more specific regarding what make it feel unintuitive an illogical to you, thanks.
Title: Re: GUI Design
Post by: H-Hour on October 30, 2010, 12:19:57 am
I like the background for the soldier selection panel, but is it possible to have an image as the background (or a transparent background) for a rendered model node?
Title: Re: GUI Design
Post by: Origin on October 30, 2010, 12:44:05 am
I think the main problem with that suggestion is the frames, the draw way too much attention, with the shiny crome and details that draw the eye.

Another thing im not a big fan of is the small dots on portraits and buttons. I guess they are meant to indicate if a character or ability is active, but I think there are better ways of achieving that. The dots are just too small and abstract. (I realise that illustrating how a UI works with just a static image is a challenge so i might be wrong here.)

On the positive side of things, the layout is greatly simplified, and instead of having elements spread all over the screen, its nicely organised in a bottom bar, wich I personally think is the way to go,

Please dont take offence at criticism, as none is intended. I dont think anyone has a complete image of what we need/want/is doable right now.



I dont know if any of you have ever played the Silent Storm series, so im gonna post a pic. I think there is some inspiration to draw from there

(http://img102.imageshack.us/img102/8165/s2il6.jpg)


The tab system for soldier selection is slick, and makes it easy to track the status of soldiers at a glance.

All actions are gathered on the right side of the screen, and should be familiar to anyone who has ever played an rts.

Simple level select with a vertical layout that makes sense, and doesnt take up alot of space.

Color coded buttons that indicate what type of action the button represents at a glance. (in this case red=offensive blue=movement black=modechange & misc)

Buff/debuff window to the right of portrait, enables user to quickly see any effects applied to the currently selected character (such as stat changes due to injury, or status changes such as stunned or panicking)

Clickable spotted enemy indicator, allows user to quckly center on a spotted enemy.

Fairly anonymous frame, with little to no "bling".

Not saying that its perfect (or doable :P), but i think that we should look into most of those things.

I like the background for the soldier selection panel, but is it possible to have an image as the background (or a transparent background) for a rendered model node?

Yes, I tried this with just replacing the existing frames.




Title: Re: GUI Design
Post by: Kildor on October 30, 2010, 07:30:58 am
I really like SS`s feature «Showing which turn is now». And hope there will be some like this in ufoai. Also, I want to have normal combat-log, may be with turn indication. May be one day I`ll try to do something with it.
Title: Re: GUI Design
Post by: mor2 on October 30, 2010, 09:36:34 am
Please dont take offence at criticism, as none is intended. I dont think anyone has a complete image of what we need/want/is doable right now.
...
I think the main problem with that suggestion is the frames, the draw way too much attention, with the shiny crome and details that draw the eye.
...
Another thing im not a big fan of is the small dots on portraits and buttons. I guess they are meant to indicate if a character or ability is active, but I think there are better ways of achieving that. The dots are just too small and abstract. (I realise that illustrating how a UI works with just a static image is a challenge so i might be wrong here.)

1. its the other way, i love it. especially the attention to details.
2. i noticed its bright and doesnt fit the mood well but its easily adjustable and will be done at the end after i see how it fits with the rest of the graphics (for example here 2sec frame adjustment (http://i52.tinypic.com/2i1npc0.png)).
about the details, you mean the pure graphical ones or the additional info causing information overload?
3. i have tried to get feedback on that bar for ages, the bar dots are actually h-hour idea from p.8, they suppose to be small and un intrusive and their whole purpose is to bring attention to soldiers who has yet to be moved. (with 16 soldiers i assume its will be a pro)
the other dots on the stance/RF are an indication if the action was reserved to avoid this tiny button (http://i52.tinypic.com/ddov0y.jpg), i just combined the two buttons together (L.click use, R.click reserve)



Quote
The tab system for soldier selection is slick, and makes it easy to track the status of soldiers at a glance.
...
Simple level select with a vertical layout that makes sense, and doesnt take up alot of space.
...
Color coded buttons that indicate what type of action the button represents at a glance. (in this case red=offensive blue=movement black=modechange & misc)
1. agreed, i to want a normal sat's bar instead of that 3px line i manged so far but its my understanding that people wanted portraits and the 3 stats in their selection bar.
and portraits do take a lot of space...
i was toying with idea of simplified and advanced view toggleable by a button/key(ctrl?) but i am getting over my self here, in either case i am not looking for the plain default hud look but i am exploring ways to present additional information better. nice big buttons are nice for "streamlined design" but i am not going to cut down on information. in hopes the game will continue in the path of tactical shooter instead of point and click.
what i do like about the interface as whole it's simplistic big design, i may not have choosen this path but if required more space to make it more easy on the eye, i'll make it bigger (vertically).

2. i like a.hud style better but its simply a matter of if i have h.spaces on the bottom, otherwise i prefer a side option without a background.
3. well we dont need most of that, we use the mouse to do it, for example the 'move' button is pointless, even the default hud doesnt include those. as for the nicely colored icons for the buttons, its would be a blast, if only we had someone who can do it   ;)


Quote
Buff/debuff window to the right of portrait, enables user to quickly see any effects applied to the currently selected character (such as stat changes due to injury, or status changes such as stunned or panicking)
...
Clickable spotted enemy indicator, allows user to quckly center on a spotted enemy.
...
Fairly anonymous frame, with little to no "bling".
1. this is not something we can do, this why we have the big stats bar.
2. we already has an button for it on both huds.
3. its only a bling if it doesnt serve any purpose and i do like the hitec'y style in my opinion it fits better with 2070 advance.
Title: Re: GUI Design
Post by: Bartleby on October 30, 2010, 06:49:21 pm
many people like me today use widescreens. thats why i like interfaces that also use the left and right side of the screen.

mor2, i dont like the dots very much. i liked ure version with the active soldier having a normal border more.
Title: Re: GUI Design
Post by: mor2 on November 01, 2010, 09:34:46 pm
the active soldier does use normal border to distinguish him from the rest, the dots has nothing todo with the active soldier, they mark the soldier who are yet to move... (maybe i'll move it or play with stats colors)

the dots over the RF/stance will be replaced with something more informative since there are more than 2 reservation options and the weapon will have a better indication.

i already has most of it working, now i am working on the code and then moving to the little things.
Title: Re: GUI Design
Post by: mor2 on November 04, 2010, 12:02:59 pm
ok i am done with playing with the code and now that i implemented it, i know that i can do it not only talk about it  ;D
now i am back for the design board.

looking at this older mockup (http://i56.tinypic.com/106doqx.png) i think the active soldier portrait should be moved to the lowe panel as well, the stats panel should be butchered and inc operated or add to it the status panel.

any other suggestions and everything goes, yes even changing to plainer simpler background (for the background some kind of illustration that fit the current color scheme will be greatly appreciated)


I dont know if any of you have ever played the Silent Storm series, so im gonna post a pic. I think there is some inspiration to draw from the
Not saying that its perfect (or doable :P), but i think that we should look into most of those things.
something like this (http://i54.tinypic.com/2h4b8s4.jpg) perhaps  ;D


many people like me today use widescreens. thats why i like interfaces that also use the left and right side of the screen.
any suggestion that i can look into?
Title: Re: GUI Design
Post by: Bartleby on November 04, 2010, 12:34:31 pm
widescreen:
i would set as much as possible of the gui in the corners or the right and left side.

EDIT:
but ure on the right way and i am sure that the new gui will be better.
- the healthbar of the active soldier or the list of all soldiers shoulnt be in the middle of the screen.
- i like to see the active soldier with his health in a corner (the upper-left maybe).

EDIT 3:
well... quick edit of ure graphic.
but this will be bad for non widescreend users. so maybe enough, when active soldier and his moral/health is in the upper-left corner.
Title: Re: GUI Design
Post by: mor2 on November 04, 2010, 07:04:08 pm
its might be a good idea to pursue this to add some verity to our options, especially since h-hour is working on bottom bar(or at least i think he is).

about your mockup i dont like that specific placement, i prefer if the layout is spread max on two walls, not like the red one (http://i52.tinypic.com/2ccv7zt_th.jpg)
how about something like this (http://i53.tinypic.com/24pi97s.jpg), basically its the same as what you suggested, i can also reduce the team panel size and make it show additional details on hover like the new 2.4 hud does.

meanwhile, i'll try to shake my initial mockup and see if u can fit the portrait in a bottom bar as well ( and make it less blingy for origin  ;) )
Title: Re: GUI Design
Post by: Bartleby on November 04, 2010, 08:29:15 pm
something like this?
Title: Re: GUI Design
Post by: mor2 on November 04, 2010, 09:06:27 pm
or maybe like this  (http://i51.tinypic.com/i3xvcw.jpg) the problem is that we are doing the opposite of what you wanted, widescreen support, so for that purpose your first idea was better. how about breaking down the weapon control? also before when i said hovered i meant this (http://i53.tinypic.com/2mfejvd.jpg).


also here is my latest rework (http://i53.tinypic.com/2rpsck2.png) of the bottom panel, it still looks chromy, that because i cant use anything without cheating on the UFOIA gray/black/green theme but adding normal colored icons its will make it look much better, so any ideas?

@Origin, this as little "bling" as i can mange and as close to plain with big panels/buttons like your silent storm as i can do.
Title: Re: GUI Design
Post by: Bartleby on November 04, 2010, 09:22:39 pm
the small soldier is really a great idea :). much better than just a big face.

main idea of widescreen-suppport is to keep the center (x) free and set all information in the left and/or right side of the screen (y).

  --------------------------------
  |    y     |      x      |     y    |
  |    y     |      x      |     y    |
  |    y     |      x      |     y    |
  |    y     |      x      |     y    |
  |    y     |      x      |     y    |
  --------------------------------
Title: Re: GUI Design
Post by: mor2 on November 04, 2010, 10:09:19 pm
this one is mostly luck, my hud is to high so i already dont have enough space for my "head" nodes, so it was either use the additional space for the name which came out ugly, so i tried to the model from a.hud, why not little something to break the strict lines.(reminds me the commandos backpack)

as for wide screen, if you use that scheme you'll have to run from side to side with the mouse, which is why i prefer this:
  --------------------------------
  |    y/x   |      x      |    x      |     x    |
  |    y/x   |      x      |    x      |     x    |
  |    y/x   |      x      |    x      |     x    |
  |    y/x   |      x      |    x      |     x    |
  |    y     |      y      |    y      |     y    |
  --------------------------------

either placing your hud on the side and bottom or place it on the bottom and make all the info panel open on the side(the y/x), in either case i try always to keep an area that will always be dedicated to the action.
Title: Re: GUI Design
Post by: mor2 on November 06, 2010, 01:29:13 am
well here is that new bottom idea and a color cheat on my part (trying to sway people from the gray/black/green)

(http://i56.tinypic.com/2uzfsjb_th.png) (http://i56.tinypic.com/2uzfsjb.png)
Title: Re: GUI Design
Post by: bayo on November 06, 2010, 11:32:15 am
i love it, btw,
* if the aiming cross icon is used to open a popup, it is better to move this 3 button slots on the top of the weapon. and maybe this 3 slots can be shoot,inventory,and reload.
* the blue icon near ammo model is useless (if it is a stylised bar, maybe you should use a classical bar, as u done for the soldier status)
* the clock icon must be redone imo, but it is a good idea (for the last icon bar, it can be something like a smilly with some stats, like the Doom guy)
Title: Re: GUI Design
Post by: mor2 on November 06, 2010, 03:23:41 pm
which one, the bottom or the other one where i was little cheating with colors?  i still dont know how much room do i have with them  :-\

the blue ammo icon its just something until the node showing ammo arrives, someone has to fall for the puppy face request ;)
and i added the buttons there for those who dont like to use R.click and it can go up.
btw which colors for the stats do you prefer?  i think maybe TU-blue/green, HP-red/green, Moral-yellow/purple

but graphics aside, what about the whole layout?  is there something needed to be added or removed? given additional attention/thought ?
different way to represent data ?  or  should i add the floor selection here as well, in the a.hud fashion?