0.3 UI Theme, galaxymap & planeview UI

Development of artwork, requests, suggestions, samples, or if you have artwork to offer. Primarily for the artists.
Message
Author
User avatar
utilae
Cosmic Dragon
Posts: 2175
Joined: Fri Jun 27, 2003 12:37 am
Location: Auckland, New Zealand

#16 Post by utilae »

Ah, that is awesome, really cool. Looks so good in colour.

muxec
Space Kraken
Posts: 152
Joined: Tue Jun 15, 2004 7:55 pm

#17 Post by muxec »

Is it possible to implement buttoncolor<-->Flagcolor dependency?

Tyreth
FreeOrion Lead Emeritus
Posts: 885
Joined: Thu Jun 26, 2003 6:23 am
Location: Australia

#18 Post by Tyreth »

That does look good, nice ideas.

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

#19 Post by eleazar »

Sure this is an old topic, but the idea needs more development...
Impaler wrote:I see the point about using Empire color/s in the User Interface, it could be over the top and look ugly/excessive. We should resolve to use Empire Color/s on "things" that are are "owned" by an Empire and be very carefull when extending it to anything else. UI might be colorable by the user but that would be independent of any Empire colors.
Agreed, Empire colors should only be introduced to the UI only in very specific circumstances.
Impaler wrote:...As far as Empire Icons go with DaveBaby's #2 option esentialy a Coat of Arms with several layers....
To simplify:
Color: Each player will choose a primary empire color from a predefined list. Each color may be chosen by only one empire, this will help keep each empire visually distinct. (So obviously the game should not allow more players than the primary colors available.) Each player may choose whatever they want for a secondary color. A tertiary color doesn't add value, IMHO, but just squeezes the secondary color out of some of it's limited available display space.

Flags: Each player will choose a unqiue "emblem". Emblems will be PNG or SVG files, solid black against transparent. The game will recolor the black as the player's secondary color. Behind the emblem will be a solid background of the players primary color. The background may be square or shaped, according to another SVG or PNG file, also black against transparent. Uniqueness will not be required of the background shapes. Any part of the emblem that extends beyond the boundry of the background shape should be trimmed off.

The emblem may also appear on the ships, again secondary color against the primary.

It's important for the usefullness of player-colors that the player can't just pick any image file which may or may not have any bearing on the colors he chose for his empire. The flag will not always be shown, so sometimes the primary color must be a stand it.


This kind of approach should allow a high degree of player customizability while limiting a players ability to choose stupid or stylisticly different flags. Of course a player might choose identical primary & secondary colors, but i don't see that as a problem. It's essentially the same as choosing "emblem=none".

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

#20 Post by eleazar »

I made a set of 5 SVG emblems and 5 background shapes, according to the scheme laid out in my previous post. Note, some of the emblem graphics have partially transparent elements. Support for that is not neccesary, but could be interesting.

Get the SVG flag graphics.

It would probably be just as good if the previous concept was changed so the game recolored everything non-transparent to the chosen color, not just black.

jmercer
Space Floater
Posts: 37
Joined: Tue Sep 27, 2005 11:22 am
Location: Newfoundland, Canada

#21 Post by jmercer »

It would probably be best if you didn't define semitransparent sections. The problem with these is that if you're aiming to select 2 complementary colours, the alpha 0.5 will end up mixing them and producing a colour which wrecks the scheme.

Your sample images are a good start, but they don't seem heroic enough. I don't think 10 variants on a lightning bolt are needed, but strong, primitive symbols would be good.

Say what you will, but the sickle and hammer is a good symbol. The Union Jack is also good, not exactly a symbol though. A cave painting style handprint might work. A procedurally generated graphic showing the home planet in relation to it's star and the other planets in the home system might be ok, I'm thinking something like http://en.wikipedia.org/wiki/Arecibo_message#Planets, but less blocky.

One thing that could be added to the emblems is hilights, shadows and outlines.

Image
Image
Image
Image

I think that the shaded versions may not fit the needs of a flag, but a 3-tone (hilight, main color, shadow) variant might give you the extra bit of expression needed.

jmercer
Space Floater
Posts: 37
Joined: Tue Sep 27, 2005 11:22 am
Location: Newfoundland, Canada

#22 Post by jmercer »

Another thought on the flags. What if they actually conveyed information about the state of your empire? If you're doing quite bad, the flag might look tattered. Alpha Centauri rated your integrity. Perhaps this could be incorporated into different emblems, a hand giving food to a world, a hand wrapped around a world, a hand crushing the life out of a world.

It would be tough, but done properly it would be quite neat.

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

#23 Post by eleazar »

I didn't mention it in this post, but perhaps i should have.
These aren't meant to be polished examples, just something to jump-start a coder whenever one chooses to start working on this. I don't know if this feature will every be added, or if these kinds of images will even be relevant. These are just quick test images.
jmercer wrote:It would probably be best if you didn't define semitransparent sections. The problem with these is that if you're aiming to select 2 complementary colours, the alpha 0.5 will end up mixing them and producing a colour which wrecks the scheme.
If no semi-transparent pixels are allowed, the PNGs would have nasty bit-mappy edges. Any decent interface for this will let you instantly preview your choices, so players will be able to avoid either color schemes that don't work with transparency, or emblems with transparency. I expect there to eventually be a huge selection of emblems since it will be trivial for people to create and contribute them. (The real problem will be sorting through all the lousy contributions)
jmercer wrote:Say what you will, but the sickle and hammer is a good symbol...
One thing that could be added to the emblems is hilights, shadows and outlines.
The quality of a nation's graphic design has no connection to the morality of it's policies. The hammer & sickle is a strong symbol, but i'd say Nazi Germany had perhaps the best national graphic design of any modern nation. Not that distinctive symbols from earth's present or past should be included in a futuristic-space-opera-game, but we can learn from them.

Many symbols don't work as quasi-3D-shaded objects. And i think shading takes away from the intuitive "flagn-ess" or "logo-ness" of the image. Even today most corporate, national, and organizational logos/symbols are made from flat shapes of a few colors. There are reasons for this besides tradition, but lets stick with tradition, a few flat colors are what our players expect a flag to have.

MareviQ
Space Kraken
Posts: 100
Joined: Tue Aug 09, 2005 6:47 pm
Location: Somewhere in Poland

#24 Post by MareviQ »

I'd say that those colors are a great idea. This could be used in the combat sim the way homeworld 2 does it (for those who don't know: you choose 2 colors and those appear on spaceships hulls) - we'd need a black .png with alpha map to add the second color layer and then another .png with alpha map providing all the hull details and non-colored sections (windows, engine exhausts, etc.).

As for the flags themselves:
- the alpha will be required, at least on the edges. Unless you want to do all the color overlaying in svg, then porting that to a bitmap (which would be more fuss than it is worth). Still, the use of alpha on parts other than edges should be discoruaged

- I agree with eleazar that no highlights or shadows should be added (I'm a bit hesistant about outlines) - the flags should use as few colours as possible, and besides, when was the last time you saw a national flag with highlights and shadows added to it?

- conveying the state of the empire by flags is a bad idea as then the flag should be put somewhere on the main screen causing unnecessary clutter, besides the implementation of proper good-looking damage to the flags could be problematic.

jmercer
Space Floater
Posts: 37
Joined: Tue Sep 27, 2005 11:22 am
Location: Newfoundland, Canada

#25 Post by jmercer »

- I agree with eleazar that no highlights or shadows should be added (I'm a bit hesistant about outlines) - the flags should use as few colours as possible, and besides, when was the last time you saw a national flag with highlights and shadows added to it?
I don't like the shaded emblems myself, it doesn't fit in with the rest of the icons and the concept of a flag in general. Subtle highlights and shadows still might be ok; the specular dot on an apple. This would also allow you to have the union jack with 2 colours (and use the highlight as the white). Also you could put in white, shining eyes in the silhouette of a some predator bird.
- conveying the state of the empire by flags is a bad idea as then the flag should be put somewhere on the main screen causing unnecessary clutter, besides the implementation of proper good-looking damage to the flags could be problematic.
On the main screen, I don't imagine you'd be able to tell the difference between a tattered and pristine flag, and so, such detail should be omitted. However, in the diplomatic screen and the final "civ score" screen, a detailed flag would be possible. It would be a nice touch to enter into diplomatic discourse and have to represent yourself with a thread bare sheet.

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

#26 Post by eleazar »

An outline should be provided for the flag as a whole according to the circumstances where the flag is displayed.
jmercer wrote:...Subtle highlights and shadows still might be ok; the specular dot on an apple. This would also allow you to have the union jack with 2 colours (and use the highlight as the white)...
If the subtle highlights are going to look good, they will have to be placed by a human, which makes to emblem creation process, more complicated than the idiot-proof "everything that's not transparent turns into a single color." The code will also be harder. If we need to make something like a union jack it would be better to just implement a 3rd color outright, which may not be a bad idea, but certainly has a lower benefit-to-effort ratio than the second color.

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

#27 Post by eleazar »

eleazar wrote:Color: Each player will choose a primary empire color from a predefined list. Each color may be chosen by only one empire, this will help keep each empire visually distinct. (So obviously the game should not allow more players than the primary colors available.) Each player may choose whatever they want for a secondary color. A tertiary color doesn't add value, IMHO, but just squeezes the secondary color out of some of it's limited available display space.
I'd like to qualifiy this a bit more:

All primary empire color options should contrast well against a black or dark grey background. It will be easy to come up with 8 options, and should be possible to mix 16 or 32 reasonably distinct, useable colors

Black, all greys, and white should not be available as empire colors, to avoid confusion with various UI elements. On the galaxy map grey should be used for unexplored systems, and white (the result of combining all colors of light) should be used for systems with multiple owners.

User avatar
Geoff the Medio
Programming, Design, Admin
Posts: 13587
Joined: Wed Oct 08, 2003 1:33 am
Location: Munich

#28 Post by Geoff the Medio »

eleazar wrote:On the galaxy map grey should be used for unexplored systems, and white (the result of combining all colors of light) should be used for systems with multiple owners.
Can you explain what you mean by "used for unexplored systems"? The colour of the name of the system, perhaps?

What's wrong with using a combination of the colours of empires in a system, as is done now? Multiple colours conveys a lot more information than just white.

User avatar
eleazar
Design & Graphics Lead Emeritus
Posts: 3858
Joined: Sat Sep 23, 2006 7:09 pm
Location: USA — midwest

#29 Post by eleazar »

Geoff the Medio wrote:
eleazar wrote:On the galaxy map grey should be used for unexplored systems, and white (the result of combining all colors of light) should be used for systems with multiple owners.
Can you explain what you mean by "used for unexplored systems"? The colour of the name of the system, perhaps?
Yes.
Geoff the Medio wrote:What's wrong with using a combination of the colours of empires in a system, as is done now? Multiple colours conveys a lot more information than just white.
True, but changeing colors in the middle of a word, or especially in the middle of a letter can makes it hard to read, and is often ugly. I cringe to think of what a system with pieces owned by 3 or 4 empires looks like.
But this isn't something i'll fight long and hard for.

User avatar
General_Zaber
Space Kraken
Posts: 130
Joined: Wed Jan 09, 2008 6:43 am
Location: Iserlohn Fortress

Re: 0.3 UI Theme, galaxymap & planeview UI

#30 Post by General_Zaber »

Considering this is a UI thread I though I'd offer some minor suggestions so you don't have to worry about going over everything in v1.0a:

1) Remember to put Xs on the top-right corner of every window that can be closed

2) Make the SitRep closable by left clicking outside of it (To make optional, place a toggle on this feature in the Options menu)

3) Don't forget to add arrow key bindings and screen-edge bindings for moving galaxy view and space-combat map (Add toggles in Options)

It's no rush, but I thought I'd just post this here so someone can touch these things up when not coding something more important.
The enemy is retreating! As always, there is no cuteness about them. Dammit

Post Reply