Author Topic: UI Design and Suggestions  (Read 10808 times)

0 Members and 1 Guest are viewing this topic.

Offline SnopyDogy (OP)

  • Pulsar 4x Dev
  • Chief Petty Officer
  • *
  • Posts: 41
  • Pulsar4x Dev
    • Pulsar4x
UI Design and Suggestions
« 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.
 

Offline Redshirt

  • Sub-Lieutenant
  • ******
  • R
  • Posts: 121
Re: UI Design and Suggestions
« Reply #1 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.
« Last Edit: August 21, 2012, 01:23:17 PM by Redshirt »
Living up to my username. . .
 

Offline SnopyDogy (OP)

  • Pulsar 4x Dev
  • Chief Petty Officer
  • *
  • Posts: 41
  • Pulsar4x Dev
    • Pulsar4x
Re: UI Design and Suggestions
« Reply #2 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.
 

Offline nadia911

  • Petty Officer
  • **
  • n
  • Posts: 18
Re: UI Design and Suggestions
« Reply #3 on: August 21, 2012, 09:05:00 PM »
System images? . png? . jpg? . bmp?
 

Offline SnopyDogy (OP)

  • Pulsar 4x Dev
  • Chief Petty Officer
  • *
  • Posts: 41
  • Pulsar4x Dev
    • Pulsar4x
Re: UI Design and Suggestions
« Reply #4 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.
 

Offline SnopyDogy (OP)

  • Pulsar 4x Dev
  • Chief Petty Officer
  • *
  • Posts: 41
  • Pulsar4x Dev
    • Pulsar4x
Re: UI Design and Suggestions
« Reply #5 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.
 

Offline SnopyDogy (OP)

  • Pulsar 4x Dev
  • Chief Petty Officer
  • *
  • Posts: 41
  • Pulsar4x Dev
    • Pulsar4x
Re: UI Design and Suggestions
« Reply #6 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.
 

Offline SnopyDogy (OP)

  • Pulsar 4x Dev
  • Chief Petty Officer
  • *
  • Posts: 41
  • Pulsar4x Dev
    • Pulsar4x
Re: UI Design and Suggestions
« Reply #7 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.
 

Offline LB

  • Leading Rate
  • *
  • L
  • Posts: 9
Re: UI Design and Suggestions
« Reply #8 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
« Last Edit: October 10, 2012, 11:50:41 AM by Erik Luken »
 

Offline Erik L

  • Administrator
  • Admiral of the Fleet
  • *****
  • Posts: 5654
  • Thanked: 366 times
  • Forum Admin
  • Discord Username: icehawke
  • 2020 Supporter 2020 Supporter : Donate for 2020
    2022 Supporter 2022 Supporter : Donate for 2022
    Gold Supporter Gold Supporter : Support the forums with a Gold subscription
    2021 Supporter 2021 Supporter : Donate for 2021
Re: UI Design and Suggestions
« Reply #9 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)

Offline Redshirt

  • Sub-Lieutenant
  • ******
  • R
  • Posts: 121
Re: UI Design and Suggestions
« Reply #10 on: October 10, 2012, 05:31:43 PM »
Eleven, for me. (third row down, three over.)
Living up to my username. . .
 

Offline sublight

  • Moderator
  • Captain
  • *****
  • s
  • Posts: 592
  • Thanked: 17 times
Re: UI Design and Suggestions
« Reply #11 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?
 

Offline Nathan_

  • Pulsar 4x Dev
  • Commodore
  • *
  • N
  • Posts: 701
Re: UI Design and Suggestions
« Reply #12 on: October 10, 2012, 10:31:54 PM »
I like the minimalist approach in 2 :)
 

Offline Antagonist

  • Pulsar 4x Dev
  • Sub-Lieutenant
  • *
  • A
  • Posts: 124
Re: UI Design and Suggestions
« Reply #13 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.
 

Offline LB

  • Leading Rate
  • *
  • L
  • Posts: 9
Re: UI Design and Suggestions
« Reply #14 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).