UFO:Alien Invasion

Development => Artwork => Topic started by: SoulRipper on October 17, 2008, 10:12:46 pm

Title: GUI - 2.2.3 dev gui revamp
Post by: SoulRipper on October 17, 2008, 10:12:46 pm
As i've read your open for suggestions regarding some new design for the bit dusty GUI graphics, so here comes one of them. I tried to spice it up a bit, also, i didn't exactly like the 2.2.3 development version UI which was aligned to the right side of the screen, so i changed it to resemble the 2.2 design.

Anyway, those issues are not a problem right now, i'm rather curious what you think about the graphical style in general. Here are two screenshots ilustrating my design on the geoscape menu. For now this is the only screen that i changed, and not all elements are done yet, also, please bear with the mess of old buttons i left there  ;).

The first screenshot "screencap1.png" was taken in-game, in the left bottom corner of the screen is the Description element of the menu (it didn't have enough space with the default 2.2.3 dev menu) which already works fine. In the top right corner is the info screen with credits, time, date, and the timelapse buttons (those already work too). Beneath that are three buttons intended for (from left to right) Eventlog, borders and radar range (not in working condition yet).

Also, i noticed that the more finer elements of my graphics get distorted when i put them in-game (i suspect because of resizing), that's why i attached the second screenshot "project1.png" with the original graphic showing how it's supposed to look.

Anyway, it's just a proposition for now, so... what do you people think about it? Constructive criticism is welcome ofcourse.

Here are the files


[attachment deleted by admin]
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: ghosta on October 17, 2008, 10:39:56 pm
I like the bottom left box with the information about the current ship
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: Destructavator on October 17, 2008, 10:55:34 pm
Looks nice - To be honest, I'm not a huge fan of the current development GUI where everything is on the right, and IMO there was something I grew tired of with the old GUI from stable releases as well.  Even if this doesn't replace the GUI, this might be nice as a choice in the game options menu that the player could use if they wanted it.

What would be really nice is if alternate GUIs were more customizable, choice of fonts, color schemes, etc.  Not being a coder I don't know how much of a headache that would be for the programmers.
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: SoulRipper on October 18, 2008, 02:43:10 pm
Well, for now i'll just try to finish the first geoscape screen. Later we'll see if there is need to redo the rest of the screens in the game too.
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: RudolfoWood on October 18, 2008, 11:06:40 pm
just in case you missed these two wiki articles:

http://ufoai.ninex.info/wiki/index.php/Proposals/GUI_comment
http://ufoai.ninex.info/wiki/index.php/Proposals/New_UI

I think this looks interesting, lower left "info" screen would have more place than actual on the right side (e.g. german translations are wrapped more than once)
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: Drag D on October 21, 2008, 01:29:57 am
While SoulRipper's effort is a solid one i think that the proposal from here : http://ufoai.ninex.info/wiki/index.php/Proposals/New_UI looks more stylish  .
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: bayo on October 21, 2008, 09:20:50 am
I agree with Drag D. It also more easy to implement it with resisable window.
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: pielroja on October 21, 2008, 10:46:01 am
The UI proposals in  http://ufoai.ninex.info/wiki/index.php/Proposals/New_UI  look nice as well as more manageable than those of the 2.2.1 version. Just two little comments about them here.

1."Basescape" UI. Could you also display the remaining free room for new recruits in the upper-left corner? Maybe including the total figure of current recruits just beside the "PERSONNEL" header, while adding a text line named "BASE CAPACITY" or something similar to display the current total room of the base (being placed in the "base name" box, in the "personnel" box or as a different boxt located between both of them). Or maybe an alternative way...

2. "Research" UI. Would it be possible to indicate the total laboratory room in each base? Perhaps including a new icon (for example, a microscope) to identify this figure, at the same height than the names of the bases, and at the right of the two already existing icons with figures?
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: SoulRipper on October 21, 2008, 04:12:06 pm
The UI proposals in  http://ufoai.ninex.info/wiki/index.php/Proposals/New_UI  look nice as well as more manageable than those of the 2.2.1 version. Just two little comments about them here.

1."Basescape" UI. Could you also display the remaining free room for new recruits in the upper-left corner? Maybe including the total figure of current recruits just beside the "PERSONNEL" header, while adding a text line named "BASE CAPACITY" or something similar to display the current total room of the base (being placed in the "base name" box, in the "personnel" box or as a different boxt located between both of them). Or maybe an alternative way...

2. "Research" UI. Would it be possible to indicate the total laboratory room in each base? Perhaps including a new icon (for example, a microscope) to identify this figure, at the same height than the names of the bases, and at the right of the two already existing icons with figures?

From what i've seen it shoudn't be that hard pielroja, actually i already thought about that. And if i ever make it to the base and research UI's then i'll probably put that stuff on the screen. It's just a matter of knowing the right variables and displaying them.

I agree with Drag D. It also more easy to implement it with resisable window.

I think resizable windows is gonna be hard to do no matter how the GUI looks, unless they are boxes filled with one color. So i don't know if it woudn't be a better idea to use the limited coding manpower for more important tasks like fixing bugs or adding new content to UFO:AI.

While SoulRipper's effort is a solid one i think that the proposal from here : http://ufoai.ninex.info/wiki/index.php/Proposals/New_UI looks more stylish  .

Yeah, i know what you mean, i like them too. Although thats exactly why i picked a different approach. In my opinion stylish glossy menu's and stuff like that look good on webpages, but for me, a game GUI, especially a Sci-Fi one should be heavy. And i also noticed that lot's of professional game productions stick with that attitude too. When designing i was keeping in mind GUI's like in these games:
Dawn of War, Sins of a Solar Empire, Gallactic Civilizations and a couple more.
Look up em' screenshots on google from those games if you like.


On another note, from what i've read, for now everything is mostly just propositions. Is there some wiki page or other place where somebody wrote down some guidelines for designing those UI's? I mean something like:

"1. In the future menu's are intented to be resizable, keep that in mind when designing
 2. Window's and pop-ups are intented to be draggable in the future.
 3. [Ideas about the general preffered style]"

I know beggars can't be choosers, but writing up some preferences really helps the artists. I don't know who, but somebody already wrote that somewhere on the forum.
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: freegamer on October 21, 2008, 11:52:01 pm
While SoulRipper's effort is a solid one i think that the proposal from here : http://ufoai.ninex.info/wiki/index.php/Proposals/New_UI looks more stylish  .
It's reminiscent of the Syndicate Wars UI (which was one of the nicest UIs I ever encountered in a game).
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: Winter on October 22, 2008, 12:50:56 am
Let me just note that the new UI on the wiki is the one that we're intending to use for future versions of UFO:AI. The only problem is that the creator (Blywulf) has gone AWOL without giving us his source files. A lot of hard work and thought has gone into Blywulf's UI, though, and we're not really considering using anything much different from it in the main game.

If you really want to do something useful for a new UI, SoulRipper, please try recreating Blywulf's files with layers and transparency intact. That would be a big big help in getting the UI updated sooner rather than later.

Regards,
Ryan
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: bayo on October 22, 2008, 03:12:04 pm
Quote
I think resizable windows is gonna be hard to do no matter how the GUI looks, unless they are boxes filled with one color. So i don't know if it woudn't be a better idea to use the limited coding manpower for more important tasks like fixing bugs or adding new content to UFO:AI.
Resizable window is not so hard, but constraint the design.

But, i dont talk about allowing the user to change the size of a window (which need a GUI architecture UFOAI dont own), but to a developper to use the contrainted size he need. For the moment UFO:AI are very dependant of the texture (nothing is (easily) resizable), that why thing change, but need a lot of work.
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: SoulRipper on October 23, 2008, 03:47:13 am
I'll see what i can do Winter, if i get the time.

btw: I hope it's alright if i don't make a 100% copy of it, but instead apply some of my own touch. Ofcourse i'll try to keep it similar to the original.

btw2: Are these windows supposed to be scalable or not? Would be good to know now i suppose.

edit: Hmmm, i came up with something like this on the spur of the moment. Would something along those lines be acceptable, or is this overkill? As long as windows are not supposed to be scalable it would be a piece of cake to make this work, with scalable windows it would require a bit of tweaking though.

[attachment deleted by admin]
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: BTAxis on October 23, 2008, 12:10:03 pm
I think they needn't be "scalable" by the user ingame, though it would be good if their dimensions would be editable in a script. You'd still need to provide graphics that can handle being stretched/tiled/otherwise lenghtened, but you wouldn't have to do it on the fly.
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: Winter on October 23, 2008, 12:20:32 pm
Yes, echoing what BTAxis said, the windows won't need to be resized on the fly, only in scripts. They will however be moveable and transparent in order to give the player the biggest and most open view of the game.

Regards,
Winter
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: SoulRipper on October 24, 2008, 02:12:40 am
Well, basically a window like that could be constructed the following way (see attachment). The process would be very similar to constructing a webpage. But in order for it to be convenient in use for the menu scripter, somebody would have to implement some function which would put together a menu like that after inputting the right parameters, or at least a script generator which would generate the necessary Code.

Either way, should i go and try to recreate at least the geoscape screen of the proposed new UI http://ufoai.ninex.info/wiki/index.php/Proposals/New_UI (http://ufoai.ninex.info/wiki/index.php/Proposals/New_UI) using my modified style? Or should i put together some source files with which people could recreate my design themselves?
Because from what i understand, your stuck with the old GUI because the original creator of the new one dissapeared into the great void of the internets.

Now, regarding another matter. I almost forgot, but when i started playing around with with the GUI, the first things that i changed were the geoscape background and the map_sun.tga. If you like them i'd be happy to send them to you. (see second attachment)

[attachment deleted by admin]
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: BTAxis on October 24, 2008, 02:38:30 am
We do still need an image for the starry background. But it really needs to rotate with the Earth, so at the very least it should be bigger than it is. I'm not really sure what the plan for that is though.
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: SoulRipper on October 24, 2008, 02:52:27 am
Well, the way i create it is really fast and easy to use. So size doesn't matter, it can be as big as you need it to be. Also modyfing an existing star background to make it bigger is a piece of cake, so just say the word and it'll be done.
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: Mattn on October 24, 2008, 06:41:50 am
yes, please (re-)create the image - even if we don't have worked out how we will rotate the starfield with the earth yet.

but the sun is not needed, the sun is rendered and will be replaced soon (tm) with glsl shader stuff.
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: Winter on October 24, 2008, 09:01:49 am
Hi SoulRipper,

I like the idea of putting windows together with functions. Can anyone tell us how much time/effort it would take?

Also, your current design looks fine, but it won't work for the entire GUI -- for example some windows simply do not contain enough text to justify having a textbox centre. Could you also create a set for building these (probably smaller) windows such as time controls?

Please feel free to rip Blywulf's icons out of the proposal JPEGs, by the way, they should be salvageable and most of them were really good.

Regards,
Winter
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: bayo on October 24, 2008, 11:21:38 am
Quote
I like the idea of putting windows together with functions. Can anyone tell us how much time/effort it would take?
I dont look at the code of the popup yet. If the background popup is create with common node(s) (like image), creating a special node to display that is only at worst 4 hours of work (for the left bottom preview). For the last step (the gradient on the header) it need more time (or not). If we want a constant transparency with a gradient of color it maybe to hard for the moment to do it like that (i am not sure the GUI architecture can do that, maybe it need a zbuffer, but im not very good with openGL), if its a "brutal" overloading, there are no problem.

I will done something like that for buttons. If you want, i can create this node this week end, but i only can commit it monday; so, if anybody want to do it, feel free to do.

For name of the node, i think about "windowpanel" (with header) and "panel" (without header)
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: Psawhn on October 24, 2008, 05:18:15 pm
For stars, one great resource I found:

http://maps.jpl.nasa.gov/stars.html

One problem I've run into on renderings is that a large image for a starfield has to be very large to counteract the effects of a small viewing angle. The images I linked to have 8 px/degree for the larger ones(2880x1440px), which still means that a fov of 64 degrees (like a 35mm lens) only gives a 512x512px image. Going with larger images helps, but you start to run into engine limitations and memory problems

Another method that might work well is to use a starmap and just draw the stars directly using the 3D engine. I don't know what the engine constraints are on drawing hundreds (or thousands) of small pixel-sized dots (maybe 2x2 dots for the very bright stars).

And of course, if accuracy to real-world stars isn't needed, it's a lot easier to use something like a repeating texture for the background stars.
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: Drag D on October 24, 2008, 07:02:03 pm
So far,  SoulRipper, your work looks very good !

Indeed, as Winter said, it would be a pity not to use Blywulf icons.
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: freegamer on October 27, 2008, 01:46:38 pm
Please feel free to rip Blywulf's icons out of the proposal JPEGs, by the way, they should be salvageable and most of them were really good.

They do look good but you don't want to be ripping them out of the jpeg.  Surely the originals are available somewhere?
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: BTAxis on October 27, 2008, 01:51:34 pm
That's the problem. Blywulf has them, and he's dropped out of the world.
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: bayo on October 27, 2008, 02:23:40 pm
It also exists the work of RaXaR
* http://ufoai.ninex.info/forum/index.php?topic=1648.msg8868
* http://ufoai.ninex.info/forum/index.php?topic=1594.msg8415
maybe we can use something, not only for the main menu.
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: freegamer on October 27, 2008, 03:54:53 pm
That's the problem. Blywulf has them, and he's dropped out of the world.

The forum admins have access to his email address.  Have you tried emailing him?
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: BTAxis on October 27, 2008, 03:56:46 pm
Uh, we ARE the forum admins. Of course we tried mailing him. Lots of times. He just isn't responding.
Title: Re: GUI - 2.2.3 dev gui revamp
Post by: SoulRipper on October 27, 2008, 05:15:53 pm
This weekend i'll probably have some time to spare, so i will try to look what i can use and what not from the other people who did some work on the gui too. But overall, it's bad to mix up different styles. It would be best if i did some tutorials, or at least made some source files for people to modify, so all the graphics in the game (or at least some of them) can be kept coherent.