Aurora 4x

Other Games => Pulsar 4x => Topic started by: SnopyDogy on August 17, 2012, 07:09:54 PM

Title: UI Design and Suggestions
Post by: SnopyDogy on August 17, 2012, 07:09:54 PM
I’ve Started working on the UI for Pulsar4X and thought I’d start a new thread for Discussing UI Design/Implementation.

To start with I’ll be doing everything in straight winforms to keep thing simple. This means using the Picturebox + .Net Drawing tools for System/Galaxy Map. This is similar to what Steve is doing with Aurora, so you can expect about the same from Pulsar. I might still swap this out for OpenTK’s OpenGL Canvas if the picturebox proves too limiting.
I’ve Implemented a basic Tabbed layout for the UI. The Tabs work in a similar fashion to those in a web browser, i.e. you can re-order them and drag them out into a new window (see screenshots). At the Moment all I have done I a preliminary layout of the System Generation and Display windows, taken directly from Aurora. This gives the guys working on Stargen and the DB something to link to for testing…

None of the above is set in stone and I’d happily implement anything we come up with that’s better.
I’m not the best designer when come to UI, so what I do will be very utilitarian. I would appreciate help from any Designer/Artists out there. If you produce Mock-ups for me I can code to them.

What We Need:
Pulsar4X Icons, For windows Title bar and shortcuts.
Pulsar4X Logo, For about box, splash screen, things like that.
System/Planet Images
Button icons.
Race Portraits.
Window Mockups\Wireframes.
Stuff I forgotten???

I would like to get some Icons/Logos ASAP, as this would really help the give the project its own flavour/personality.

Reminder: If you want to get involved then send your Skype Name to Sublight or Antagonist and join the developer Discussions on Skype. Or grab a copy of the current source from github and let us know what you think: https://github.com/PsiDog/Pulsar4x

Remember all feedback is welcome.
Title: Re: UI Design and Suggestions
Post by: Redshirt on August 21, 2012, 01:17:57 PM
Some basic control suggestions for the system map (I think I suggested some of these in another thread):

Left click should call up colony/fleet/tactical menu (depending on if it's a planet/task group/enemy contact, etc.)
Right click should center view on point clicked
Mouse wheel- zoom in/out. Pressing the mouse wheel recenters on the sun(?)

If you decide to go with OpenGL, would there be a way to render the system at a 3/4 overhead view? Still keeping the physics 2d, but with the illusion of 3d- and allow for some fancy special effects. Maybe switching back and forth between overhead and 3/4th view. Or even free rotate around the center point... Sorry, I don't know the limitations of the proposed graphics library.

If I have some time, I may work up a possible interface mockup. One thing that should be looked into is reducing the number of windows by combining functionality where possible. Any reason to have the targetting/combat overview separate from the task group commands, for example?

Some more off the top of my head- can we code battle formations to be click-and-drag, similar to the current galactic map? The task group can be displayed clustered together, and the player can click and drag each ship and position it where desired in the formation. Edit- also possibly even save multiple formations the task group can use depending on threat and situation. For example- scouting formation, defensive formation, assault formation, etc. The player could form a pre-saved formation as a task group command.
Title: Re: UI Design and Suggestions
Post by: SnopyDogy on August 21, 2012, 08:12:21 PM
Redshirt: I like you suggested System map controls. I’ll probably just add the ability to pan by holding down the right mouse button.

I have decided to use OpenTK/OpenGL for the system map and Galaxy map. I made this decision after doing some quick profiling of the .net System.Drawing classes for drawing lines, circles, etc. and comparing them to Open GL. The .Net code would take on average 1 millisecond to draw a line, or .8 milliseconds to draw a circle. If we have a real-time engine (and that is the plane atm) then we need a real-time display and the .Net functions would cap out at about 18 systems at 30fps. It is simply too slow for a real time display.
OpenGL on the other hand was drawing a single triangle at about 0.3 milliseconds in Immediate Mode (the slowest possible render mode). 
I haven yet tested exactly how they fair when scaling up to drawing hundreds or thousands of objects, but I suspect that OpenGL will scale up better then .Net will.
To begin with I’ll be keeping to a simple 2d interface to get something playable ASAP. Down the road we’ll look into making the planets/stars/ asteroids 3d, using particle effects for things like dust clouds, planetary rings, comment tails and other eye candy.

@redshirt, I hadn’t thought about swapping from 2d to 3d perspective… it’s not a bad idea; we’ll see how we go when I start adding some eye candy. But I wouldn’t expect anything anytime soon.
The Consolidation of screens is another good idea; I’d appreciate any mock-ups you could do in this regard. I always thought that we should have the ability to assign fire controls to weapons in the class design tab for example, so every ship comes from the yard with valid assignments and we only have to go to a special screen when we actually need to change them due to damage, etc.
Title: Re: UI Design and Suggestions
Post by: nadia911 on August 21, 2012, 09:05:00 PM
System images? . png? . jpg? . bmp?
Title: Re: UI Design and Suggestions
Post by: SnopyDogy on August 21, 2012, 09:39:38 PM
Coloured Primitives for the most part. If someone wants to provide icons for different classes of ships or different types of task groups I'd defiantly use them. Textures for different planet types might be nice to use when zoomed right in.
Title: Re: UI Design and Suggestions
Post by: SnopyDogy on September 03, 2012, 04:28:29 PM
Just thought I’d post some new screenshots showing progress on the UI.

We have System data in the f9 window now and it has the ability to scale to larger or smaller screens, tho that could be better. I'm targeting 1024x768 as the minimum resolution needed to avoid having to use scroll bars.

The system map supports panning and zooming; now we need to get it drawing actual systems.

I'd appreciate feedback, thoughts, etc.
Title: Re: UI Design and Suggestions
Post by: SnopyDogy on September 06, 2012, 12:03:16 AM
I was looking into how to solve resolution issues and the loss of precision when converting from double to floats when I found an interesting series articles on the issue of creating a full galaxy down to plant terrain using procedural generation thought would share it here for everyone to look at: http://www.gamasutra.com/view/feature/131393/a_realtime_procedural_universe_.php

At the moment I am ignoring the issue and just converting everything to floats and drawing tresult. This seems to be working for now. If I run into problem I thought the best solution would be to switch units from Km (current unit) to AU when zoomed right out. when zoomed in we could just adjust the position of everything in the system by the camera position, as discussed in the article above. thoughts?

Also see attached for new screenshots + full links to the article.
Title: Re: UI Design and Suggestions
Post by: SnopyDogy on September 21, 2012, 03:28:34 AM
Okay, I have added in support for rendering fonts into our OpenGL Controls. However the font I used from testing was reused from a previous project and not really up to scratch (see attached screenshot).

So we are looking for an official Pulsar4X font. If you know of a good font that would work for Pulsar4X let us know. Remember that it needs to be free to use for an open source project, so no proprietary fonts please.
Title: Re: UI Design and Suggestions
Post by: LB on October 10, 2012, 06:46:44 AM
Hi guys,

Certainly interesting to see a project which already has programmers, but needs artists.  I'm pretty sure you could recruit quite easily from any modding forum, which often tend to have hundreds of graphic artists and 3D modellers, but no programmers.

Anyway, unless you've already got something sorted for this, I had a quick go at a few potential draft logo things for you.  There's a handful of rough drafts on there, following the traditional styles of "writing on a black background, with glowing bits and swirly stuff".  There's some subtle, simplistic ones, and some with loads of swirly stuff on them.  Some may have pretty poor visibility when resized.  I've predominantly used "pulsar" inspired swirly-bits, but could just as easily replace them with any other space-like shapes.

About half of them use the Bank Gothic font (commercial), which you'll probably recognise as it's been very popular in sci-fi TV/Film/Games for the last 10 years .  The other ones are using a very rough temporary hand-drawn one (you'll notice the "4X" bit is particularly rubbish, for instance).  It's fairly easy to replace the rough hand drawn ones with properly drawn letters, if you like the general shape.  If necessary, I could expand that to a full font, but it won't be quick, especially if you need bold/italic variations etc.

There's 16 of them in a little grid here - you'll need to correct the link, as I don't have enough posts for a "not a spam bot" post count :)
http://i.imgur.com/A44RT.png

If any of them (or components of) are to your liking, I'll happily alter, repair, improve or change as necessary, or give you the source files to adjust and play with.  If you've got an idea in mind for what you want it to look like, I can work with that too.


*edit* fixed url - Erik
Title: Re: UI Design and Suggestions
Post by: Erik L on October 10, 2012, 11:51:11 AM
Hi guys,

Certainly interesting to see a project which already has programmers, but needs artists.  I'm pretty sure you could recruit quite easily from any modding forum, which often tend to have hundreds of graphic artists and 3D modellers, but no programmers.

Anyway, unless you've already got something sorted for this, I had a quick go at a few potential draft logo things for you.  There's a handful of rough drafts on there, following the traditional styles of "writing on a black background, with glowing bits and swirly stuff".  There's some subtle, simplistic ones, and some with loads of swirly stuff on them.  Some may have pretty poor visibility when resized.  I've predominantly used "pulsar" inspired swirly-bits, but could just as easily replace them with any other space-like shapes.

About half of them use the Bank Gothic font (commercial), which you'll probably recognise as it's been very popular in sci-fi TV/Film/Games for the last 10 years .  The other ones are using a very rough temporary hand-drawn one (you'll notice the "4X" bit is particularly rubbish, for instance).  It's fairly easy to replace the rough hand drawn ones with properly drawn letters, if you like the general shape.  If necessary, I could expand that to a full font, but it won't be quick, especially if you need bold/italic variations etc.

There's 16 of them in a little grid here - you'll need to correct the link, as I don't have enough posts for a "not a spam bot" post count :)
http://i.imgur.com/A44RT.png

If any of them (or components of) are to your liking, I'll happily alter, repair, improve or change as necessary, or give you the source files to adjust and play with.  If you've got an idea in mind for what you want it to look like, I can work with that too.


*edit* fixed url - Erik

For what it's worth, I like #8 (2nd row, far right)
Title: Re: UI Design and Suggestions
Post by: Redshirt on October 10, 2012, 05:31:43 PM
Eleven, for me. (third row down, three over.)
Title: Re: UI Design and Suggestions
Post by: sublight on October 10, 2012, 05:56:12 PM
Very Cool.
I think I like some of those better than our current splash/welcome screen, but we'll see what our other Devs think.

#8 looks good when blown up big, but is hard to read if zoomed out. It might make a better splash screen that what we currently have though. Personally, I like #11 and #12. (3rd and 4th of row 3).

Anyway, we have been considering using 3-d planets and ship icons, but, being programers, our focus has been on getting the game playable first. I'm afraid we won't be adding much in the way of in-game artistic touches until we have a stable cross-platform user interface in use.


What we will be needing sooner or latter is a desktop icon for the game. Perhaps one of the simpler ones like #5 or #15 against a black diamond with transparent corners, or else something colorful yet crisp like #10 against a black circle. As great as #11 and 12 look zoomed out, I can't visualize either one against anything other than solid black field.

Thoughts anyone?
Title: Re: UI Design and Suggestions
Post by: Nathan_ on October 10, 2012, 10:31:54 PM
I like the minimalist approach in 2 :)
Title: Re: UI Design and Suggestions
Post by: Antagonist on October 11, 2012, 02:54:50 AM
These are really good.

I assume these are logos, so meant to be on like a web site or so.  I like #2 or #11 for the simple reason that it is easier to remain clear when downscaled to 16x16 or 32x32 icons, so that our icons look like the logo, but otherwise I like #1, just without the slightly wobbly X.

As for splash screen I'm not sure how I feel about one of those icons just blown up to the size of our current splash. Since we have so much more space to work with we can see about integrating a logo into a real space photo.  Like our current setup with the Pulsar4X in top left corner, just more professionally done.

Lemme actually add some size information we need on art assets.

We can do with:
Icon (16x16) (32x32)
Logo for website or about (Any size, but within reason)
Splash screen (Any size, smaller than 800x600 though and with space for a progress bar, possible even to have a few we random pick per launch)


We found a nice icon library a while ago that should solve most of our icon needs, but there are a few things that can still do with icons, including the System Map and System Display.
Title: Re: UI Design and Suggestions
Post by: LB on October 11, 2012, 04:55:28 AM
Cool.  Yeah, they're a set of drafts to pretty much cover initial ideas of everything from shortcut icon, website logo and splash screen overlay etc as needed.  Hopefully we can get a set of "on light background", "on dark background" and "on mixed background" with a few levels of complexity, whilst being uniform enough to seem consistent throughout.

Anyway, I'll do a sheet of second drafts of the ones mentioned, with a few variations, outer shapes and sizes for different background colours and icon sizes.  They're all layered files, so I can easily test them against the existing splash screen background (or any other background colour).
Title: Re: UI Design and Suggestions
Post by: SnopyDogy on October 11, 2012, 05:41:25 PM
The existing splash screen background is just a place holder, it can be completely replaced. The same goes for the icons and other graphics I’ve used so far, they just place holders until someone like LB comes along and creates some Pulsar Specific stuff.

Personally i like 8, 12 and 14. i though that the black text in 8 getting brighter as Pulsar loads would be cool for the splash screen instead of the progress bar. Don't know how we'd do it tho.

It's a pity that the Bank Gothic Font is commercial, its the best font I've seen so far. LB's custom font would look good to if it was polished up, how would you create the full font? as a bitmap or would you create a font that can be used by windows? We really need both to be able to use it throughout the project.
Title: Re: UI Design and Suggestions
Post by: LB on October 11, 2012, 08:08:57 PM
I'm not sure how you'd program in a brightness equivalent of a progress bar - if it's possible to overlay images and adjust opacity, I could give a plain and bright version, which could be faded between i. e.  0% progress is 0% opacity on the brighter version, 100% is 100%.  I don't know enough on the programming side of things to know the feasibility of that kind of thing.

Regarding fonts, for the logo itself I can just draw those out in Photoshop.  For a full font, it can be created as a proper TrueType font which could be installed, resized and used as any other font is.  It would take quite a bit more time to do bold and italic variations than it would to just make the regular version.

I've only ever done a couple myself (so I'm not an expert on the matter), but it would certainly be possible to do a sort of "inspired by Bank Gothic" font.  Draw it all out piece by piece (but properly, in a vector graphic program, rather than 10 seconds with a paint tool), but using Bank Gothic as a reference or starting point.  It's completely possible, and of course there's something nice about having a unique font, but it won't be quick to do.  It can quite easily be re-edited though, so a quick and rough initial one could be made which can be improved upon later.  I'm happy to give it a go if you think it's worth doing.
Title: Re: UI Design and Suggestions
Post by: SnopyDogy on October 12, 2012, 12:30:43 AM
I'm not sure how you'd program in a brightness equivalent of a progress bar - if it's possible to overlay images and adjust opacity, I could give a plain and bright version, which could be faded between i. e.  0% progress is 0% opacity on the brighter version, 100% is 100%.  I don't know enough on the programming side of things to know the feasibility of that kind of thing.

Thats what I was thinking, it shouldn't be too hard, i'm already fading out the whole form so i can probably reuse that code to do it.

Regarding fonts, for the logo itself I can just draw those out in Photoshop.  For a full font, it can be created as a proper TrueType font which could be installed, resized and used as any other font is.  It would take quite a bit more time to do bold and italic variations than it would to just make the regular version.

Bold and italic aren’t a big issue, the main reason for a regular font is for use in the actual winforms controls, they use system fonts for the text. We'd need something that will work on Windows/Linux/Mac and we'd have to have our installer install it for the user (otherwise nothing will have text on it). the only exception to this is the labels on the System map which are using a bitmap font and rendering with OpenGL.

I've only ever done a couple myself (so I'm not an expert on the matter), but it would certainly be possible to do a sort of "inspired by Bank Gothic" font.  Draw it all out piece by piece (but properly, in a vector graphic program, rather than 10 seconds with a paint tool), but using Bank Gothic as a reference or starting point.  It's completely possible, and of course there's something nice about having a unique font, but it won't be quick to do.  It can quite easily be re-edited though, so a quick and rough initial one could be made which can be improved upon later.  I'm happy to give it a go if you think it's worth doing.

If your willing to give it a go, go ahead. there’s no rush and a rough version is fine for starting point and it would give us an idea of how it looks when used in the UI.
Title: Re: UI Design and Suggestions
Post by: LB on October 13, 2012, 05:13:59 AM
Excellent.  I'll try and put together a upper/lower 26 letter alphabet and numbers, which should be enough to test with.  We can tweak that to your liking, then I can look at adding punctuation, basic symbols and additional letters afterwards.  That might take a couple of weeks depending on real-life work, but I should be able to get the next sheet of adjusted logo bits done over the coming week.
Title: Re: UI Design and Suggestions
Post by: LB on October 17, 2012, 12:14:46 PM
I tidied up the logo lettering a little, and expanded it to a standard alphabet to test.  The upper/lower cases are simply resized versions of each other.  There's no numbers or punctuation yet.

http://i.imgur.com/7CKDH.png (link needs adjusting, sorrylink fixed - Erik)

There's a lot of technical errors in there currently - particularly the fine lines of the shapes, weight of the lines (letter I is too thick, U is too wide), positioning of the letters (see heights of P and T in lower case "captain") and spacing (closeness of WX and MN for example).

Anyway, it should be enough to decide whether that style of writing is to your liking and whether its legible enough as "main" text.  The bit that takes a lot of time is all the fine tuning of the problems mentioned above - so it's pointless to do if the general look, weight and shape of the font is wrong in the first place.

If it's roughly to your liking, then I can carry on refining it.  If it's nowhere near, then give some pointers towards what you're wanting and I'll do a redraw.

It may be we want to remove the "pointy bits" (on P, A, R) for the in-game writing, but leave them on the logo (they don't have to match).  There's also the question of whether we want "proper" upper and lower case, or whether the small capitals style is readable enough.  Also, if we end up with a unique "letter P", there's the possibility of using this alone for shortcut logos etc - I've tested a couple on the right hand side of the sheet.
Title: Re: UI Design and Suggestions
Post by: niflheimr on October 25, 2012, 05:47:53 AM
IMO you could increase the weight of numerals - they look a bit thin compared with the other characters. Other than that , me likes!
Title: Re: UI Design and Suggestions
Post by: LB on October 25, 2012, 12:20:10 PM
Definitely, yes - I haven't touched the numbers yet - the ones you can see are just the placeholder ones (i. e.  program defaults before you've added your own glyphs).  If the general look is okayed by someone, I'll do the remainder of numbers, letters and punctuation and tidy it all up.

As said, the fine tuning takes a lot more time than the initial sketching, so I'd want some confirmation/suggestion/guidance before starting on any of that stuff.
Title: Re: UI Design and Suggestions
Post by: Erik L on October 25, 2012, 02:27:25 PM
My 0.02 credits.

The A bothers me a bit. Maybe if it were slanted so the right leg was vertical? Dunno. Maybe it's just me.
Title: Re: UI Design and Suggestions
Post by: LB on October 25, 2012, 04:02:46 PM
I think you're right - it does look a little out of place - it might work better as you say with a completely straight right edge, or possibly with the lower legs on both sides straightened and the top curved, a bit like an H, but with the top rounded.

Rough mockup here :
http://i.imgur.com/zrsP6.png (link again, please Erik)

3rd and 4th are taken from other fonts, so they don't quite match up right, but you can get a rough idea of how those different styles of A work in relation to the surrounding letters.  Another option could be a straight right leg, with a curved left.
Title: Re: UI Design and Suggestions
Post by: Erik L on October 25, 2012, 04:17:13 PM
I think you're right - it does look a little out of place - it might work better as you say with a completely straight right edge, or possibly with the lower legs on both sides straightened and the top curved, a bit like an H, but with the top rounded.

Rough mockup here :
http://i.imgur.com/zrsP6.png (link again, please Erik)

3rd and 4th are taken from other fonts, so they don't quite match up right, but you can get a rough idea of how those different styles of A work in relation to the surrounding letters.  Another option could be a straight right leg, with a curved left.

#4 I think fits the best. The vertical leg just moved the imbalance to the other side :)
Title: Re: UI Design and Suggestions
Post by: ThatBlondeGuy on October 26, 2012, 11:06:56 AM
Personally I think #5 fits the best (assuming 1-5 top through-bottom) because of the angles in the other letters carry through the angular top of the A.
Title: Re: UI Design and Suggestions
Post by: sublight on October 26, 2012, 12:34:10 PM
I think you're right - it does look a little out of place - it might work better as you say with a completely straight right edge, or possibly with the lower legs on both sides straightened and the top curved, a bit like an H, but with the top rounded.

Rough mockup here :
http://i.imgur.com/zrsP6.png (link again, please Erik)

3rd and 4th are taken from other fonts, so they don't quite match up right, but you can get a rough idea of how those different styles of A work in relation to the surrounding letters.  Another option could be a straight right leg, with a curved left.

The original 'A' formed a wedge that seemed to visually push characters right of itself away. Of the revised fonts I like #5. The only other variant I can think to try is using the original 'A' with the same right-leg ending as the 'R' to make just the tip a vertical edge.

All in all the font seems to offer a distinctive flavor that should look great on titles, labels, and logos.
Title: Re: UI Design and Suggestions
Post by: LB on October 27, 2012, 11:51:08 AM
Yeah, such wedge-like spaces are quite common in a lot of fonts with certain letter combinations, but it's particularly noticeable in this case.  You'll often spot it in pairs like "AV" and "WA", which often need to overlap their spacing slightly to appear correct to the reader.  One of the slow latter stages of fine tuning the font is setting up "kerning pairs" to manually adjust these gaps between specific pairs of letters

Anyway, I'll test the variant/suggested "A" shapes and start refining the existing letters and adding the numbers, punctuation and foreign letters, then do another run through the draft logo bits.  I should have some time during next week I think.
Title: Re: UI Design and Suggestions
Post by: ardem on October 31, 2012, 08:52:42 PM
Hey guys,

Here to offer my services. I am not a real artist, however I am a 3D modeller and texturer and done stuff for a couple of MOD projects in the past. I use Maya to create this, now if it for an image for an icon, or something bigger like a splash screen it is something I can do.

These are a couple of small examples that I have online at the moment, I do have a 1/2 complete tank somewhere but been over two years since I done work purely cause nothing has interested me.

A number of the models I did in this game or have a leading role in the rest. (aka ViViD in the credits)

These are very basic examples of other work but only what I have on my work pc for now.
https://dl.dropbox.com/u/4316559/3D%20Work/PIV_SideHatch.jpg
https://dl.dropbox.com/u/4316559/3D%20Work/panther_muffler.jpg
https://dl.dropbox.com/u/4316559/3D%20Work/Towcable.jpg

As you can see a lot of these component when to making a tank, but the project got canned early on, I do have a video of a semi completed tank, however even so happy to provide 3D Art if needed.


Title: Re: UI Design and Suggestions
Post by: SnopyDogy on November 24, 2012, 11:45:51 PM
Its been a wile, but i have finally finished converting the winforms UI to use DockingPanelSuite. It really changes the Look/Feel of the UI and its a lot cleaner.

I have put in LBs Font, its very rough being baesd on the Sample sheet he provided, but it looks good so far (see attached).

Going forward I could really use some proper button icons for the Tool strip and System map buttons. Also, LB, if you could do up a proper sprite sheet with you font layed out including Numbers that would be great (the letters need to be white on a transparent background). 
Title: Re: UI Design and Suggestions
Post by: LB on November 29, 2012, 05:53:48 AM
Excellent - should be able to finish up something for the font stuff over the weekend I think.  Should be fairly easy to produce a sprite based font version (as well as a . ttf version).
Title: Re: UI Design and Suggestions
Post by: SnopyDogy on December 07, 2012, 12:18:14 AM
Okay, i had a lot of free time this week and have spent it developing the UI.

I have cleaned up the system map, adding distance measurement (see SystemMap.png) and and way points (SystemMap2.png). I’m looking forward to your new Font LB, I’d love to have the numbers back on the system map.

I've also added the beginnings of the Economy window. there’s not much data to display atm so it looks a little bare.
Title: Re: UI Design and Suggestions
Post by: MrAnderson on December 24, 2012, 01:27:40 AM
It's nice to see a C# version of Aurora in the works, and you'll definitely have me onboard as this goes along.
Title: Re: UI Design and Suggestions
Post by: Theeht on May 01, 2013, 05:12:24 PM
Not exactly sure what sort of visual look we are going for, but I made some basic designs for the Economy window button (assuming there will be a buttoned selector like Aurora):
(http://img.ie/zc15s.gif)
Obviously neither is close to finished; the first one is planets and moons like in the map display, put in some fake-3d (the econ window seems to be based on one planet), and the other is a city with various economic structures in it.

If anyone has any input on which one to work on (or another entirely), or on what sort of style to go for, that would be good.
Title: Re: UI Design and Suggestions
Post by: sublight on May 01, 2013, 08:10:31 PM
Those both look fantastic visually, but I'm afraid they may be too large for us to easily use.

Take a look at the screen shots attached by SnopyDogy above for what the initial beta release is shaping up to look like.


The easiest way for us to add color is include menu-button icons. I think those are 16x16 pixels.

If we completely replace the tab button text with icons styled like the Aurora button bar we could use larger images, but 1) we may stick with text for visual clarity leaving submitted images there unused and 2) even if we did switch to icons we would probably be looking for rectangular images no more than 32px high by 64px wide.


So... I like the one on the left best. The one on the right has too much detail to be resized or cropped if needed.

Anyone else have thoughts?
Title: Re: UI Design and Suggestions
Post by: SnopyDogy on May 02, 2013, 04:44:02 AM
I agree with sublight, the one on the right is a better icon.

Its still very early in the development of the UI so I'm not too sure exactly what button icons we'll need, but for now I could use:
Ship Icons for System Map (Different for each Classes/Role).
Some icons for the different planet Types (gas Giant, Terrestrial, Rocky, Ice, Asteroid, Comet, etc)
Some icons for the Star systems on a galaxy map (could do different icons for single, binary, etc. Systems maybe?)
Arrow Buttons for the UI.
Zoom buttons for the UI.
Icons for Economics, System Map, Galaxy Map, class Design, Ships Screen and System Information.

As for the icon size, the Winforms toolbars use 16x16 pixels by default. We can resize the buttons but I'm thinking no larger then 24x24 for those. On the OpenGL size I'm currently using 8x8 coloured circles for the planets/stars/etc, however this could be increased to 16x16 or even up to 32x32. Just keep in mind that the OpenGL stuff gets scaled based on zoom so these icons will need to scale well.

Also could you make the backgrounds transparent instead of black? They'll mesh better with the rest of the UI the way (especially in the OpenGL stuff, black backgrounds behind every icon just looks wrong  ::) ).

I'm still not sure on the style myself, the retro style is okay but after seeing the below Chrome Experiment the other day I have been re-thinking our current UI approach a lot:  http://www.chromeexperiments.com/detail/100000-stars/
It'd be a killer combined system/Galaxy map, but retro icons wont mesh well  :)
Title: Re: UI Design and Suggestions
Post by: Jorgen_CAB on May 03, 2013, 03:18:14 AM
In my opinion the UI is very important for a game to be easy accessible and coherent to use. I also don't see a reason to include some more visual components that aurora lacks. I'm not talking about 3D effects or anything like that. But a nice galaxy background on the main map and slick and visually pleasing buttons with some small animated effect such as mouse-over effects and sound when you press them etc. It make things easier for the player in the end.

A little more graphics on the spreadsheet pages would also go a long way of making them more accessible and easy to both read and use.

I would also like to option to use pictures for my ships on the information screen. Basically you could just choose a picture when you create a ship from a list of available pictures. The community would quickly add to that list in no time... ;)

I will play this game if it releases anyway, but I know many more people would try it if the UI was a little more pleasing and forgiving.
Title: Re: UI Design and Suggestions
Post by: Theeht on May 03, 2013, 05:53:26 AM
I can't get that experiment to load, but from the screenshots it does look like a pretty neat UI.  The only downsides I see (besides the extra time/work  taken) would be that any kind of smooth zoom would need something probably complicated to let it zoom over the space between one system and the next without skipping through the multi-system and normal system views too fast, and that it would be hard to gracefully put in windows as complex and text-based as there are now.  I could do the icons for it, if that is what we will be using, but making distinguishable ones for the tabs and such that would not clash with the rest of it will probably end up in more abstract icons that are less obvious to new players (due to limits in contrast and number of colors).
Title: Re: UI Design and Suggestions
Post by: Theeht on May 07, 2013, 02:14:16 PM
(http://img.ie/317tb.png) Economy Screen
(http://img.ie/lrfph.png) System Map
(http://img.ie/trio9.png) Galaxy Map

How are these? 24x24 images, meant for the tabs - I couldn't make 16x16 clear about what it was.
Title: Re: UI Design and Suggestions
Post by: Theeht on May 07, 2013, 09:02:33 PM
New versions of the old ones, with black corners to look better on the light background, and some new ones:
(http://img.ie/wwq7i.png)  Design Tab
(http://img.ie/lq2pd.png)  Ships Tab
(http://img.ie/zfc1z.png)  Economy Tab
(http://img.ie/ce5bh.png)  System Map
(http://img.ie/2i89z.png)  System Info
(http://img.ie/oamy4.png)  Galaxy Map

Will the ship map icons be rotated by facing?
Title: Re: UI Design and Suggestions
Post by: ZimRathbone on May 08, 2013, 09:04:53 PM
I like the Design, Ships and Galaxy icons.  The Economy icon seems less intuitive to me (the Moneybag $ in Aurora is much easier to understand - perhaps a pile of coins?), and it and the two System icons are a bit too similar for my aging eyes to differentiate easily, mainly as the predominant colour is light green
Title: Re: UI Design and Suggestions
Post by: Theeht on May 24, 2013, 10:55:47 AM
How's this for an economy button: (http://img.ie/03851.png)? It is supposed to represent a hammer and a coin; not sure why I put in that other line but it looks better with it.
Nevermind, I just realised how bad that looks on a light background.  Working on it.

I have just finished finals, so now I should be able to work more on these.

Will the ship icons rotate with facing, or always point the same way?
Title: Re: UI Design and Suggestions
Post by: Nathan_ on May 25, 2013, 11:19:23 PM
That could be a matter of preference, it should be easy enough to do either way though. I'd assume that the icons would always face the same direction for readability's sake.
Title: Re: UI Design and Suggestions
Post by: Theeht on May 27, 2013, 03:29:21 PM
Made some move, zoom, and center map buttons; not showing them in order because the images become separated by random amounts when put next to each other, but the idea is that the zoom-in button goes at the bottom left, and the zoom-out button at the top right.
Title: Re: UI Design and Suggestions
Post by: Theeht on May 29, 2013, 07:26:43 PM
How are these for basic ship icons, as a general style?  Making them with three for each ship type, currently in one color but can do whatever people think works.  Haven't touched any warship icons yet, because it seems I can't manage to draw a decent diamond, but working on it.

Cargo ships, large and small:(http://img.ie/5a1hu.png) (http://img.ie/mn43f.png)
Colonist ships, large and small:(http://img.ie/szlos.png) (http://img.ie/etypg.png)

Will they be somehow given race colors, or is multiple colors of each icon needed?
Title: Re: UI Design and Suggestions
Post by: Nathan_ on May 30, 2013, 01:38:25 AM
Graphics aren't my end but I'd imagine that we can take that image as is, and replace every blue pixel with whatever.
Title: Re: UI Design and Suggestions
Post by: Nathan_ on July 07, 2013, 02:51:12 PM
On the subject of UI, I need a faster way to display ships then my current kludge of creating, then destroying markers. Just a circle would be fine, but I'm not entirely sure of how to update position on something on the screen. Also Default_GLFONT2 seems a little hard to read(it is the only one with numbers currently, thats why WP numbers aren't being displayed if anyone is wondering, they are default_GLFONT not default_GLFONT2). I haven't uploaded this yet because it is again a giant kludge at the moment but here is what I've been working on:
Title: Re: UI Design and Suggestions
Post by: sublight on July 08, 2013, 07:34:11 AM
Would it be faster to generate each visual frame from scratch internally every time and then do a single graphics update to replace the old frame with the new one?

I'm not sure how things work with OpenGL, but in console applications every command to display new text takes one screen refresh cycle, or about 17ms per print call. If, speculation, the same is true with every screen graphic update then destroying and creating 30 icons individually on 60Hz display would take 1 second for a complete update.
Title: Re: UI Design and Suggestions
Post by: Nathan_ on July 08, 2013, 11:54:20 AM
Graphics programs generally do that the way you suggest, with a screen refresh call pushing the display buffer to the screen. you can see so and so object.refresh() calls throughout the code that is there. But the particular way I am doing it, using map markers, and deleting/recreating them is far far from optimal. Map markers shouldn't be used for this, thats just a stand in that I can draw right now.
Title: Re: UI Design and Suggestions
Post by: Nathan_ on July 13, 2013, 08:41:26 PM
Quote
Would it be faster to generate each visual frame from scratch internally every time and then do a single graphics update to replace the old frame with the new one?
Again, my problem is that I do not understand how to do this. Just changing the PrimaryPrimitive's location does nothing. Changing it, recalculating the matrix, refreshing, and rerendering the primitive also do nothing.
Title: Re: UI Design and Suggestions
Post by: ollobrains on December 26, 2013, 07:39:25 PM
How are these for basic ship icons, as a general style?  Making them with three for each ship type, currently in one color but can do whatever people think works.  Haven't touched any warship icons yet, because it seems I can't manage to draw a decent diamond, but working on it.

Cargo ships, large and small:(http://img.ie/5a1hu.png) (http://img.ie/mn43f.png)
Colonist ships, large and small:(http://img.ie/szlos.png) (http://img.ie/etypg.png)

Will they be somehow given race colors, or is multiple colors of each icon needed?

i think multiple colors might be a good way forward for each icon
Title: Re: UI Design and Suggestions
Post by: SnopyDogy on December 30, 2013, 12:04:22 AM
the easiest way to give them race colours would be to tint them in the shader. in that case then all we really need are the white versions of the icon so we can colour them.