Needed suggestion for tech-screen UI

Development of artwork, requests, suggestions, samples, or if you have artwork to offer. Primarily for the artists.
Post Reply
Message
Author
miu
Graphics Lead Emeritus
Posts: 286
Joined: Mon Aug 25, 2003 2:33 am
Location: Finland/Helsinki

Needed suggestion for tech-screen UI

#1 Post by miu »

Gentlemen, Time to work this out, our programmers need things to do. I'll do my sketches on next weekend based on stuff discussed here, so collect your thoughts :)

In how many parts screen should be divided?
How to visualise technology images - realtime 3d or stills and with how big resolution?
How to show techtree, how to choose things to search and show what is researched?
How long the research que is? how many things player usually has under research at time? lets assume that ~6-8 turn would be good for receiving research breaktrough.
Ideas how we visualise techtree also somehow prettier than just boring table - 3d, we have opengl possibility for (well thought) realtime 3d among ui?

Roughly I would see it with horisontally split screen [ | ] with right side having tree tabs: research que/things currently under research, things to research, already researched techs. Both to research & researched tabs have subtabs for each category (learning, economcs, construction, etc..). Left side is shows visualisations (prefer wellrendered stills), explanations and stats for techs currently browsen on right side.

All ideas, well thought discussion, sketches and mockups how to show techtree best, how do visalisation and arrange things to choose under research, etc. are very much appreciated :) Thanks.
Difference between a man and a gentleman is that a man does what he wants, a gentleman does what he should. - Albert Camus

solartrix
Space Floater
Posts: 46
Joined: Thu Nov 11, 2004 3:57 am
Location: San Francisco

#2 Post by solartrix »

I sketched out one idea a while back, the "screen shots" are up at http://www.pbase.com/solartrix - they're not the prettiest, but I kinda like the idea of having 3 pop-ups for the theory, technology, and refinement lists with some sort of image in the background showing what your scientists are working on. We could also add a breakthrough pop-up to show an image / description of what they just discovered.

noelte
Juggernaut
Posts: 872
Joined: Fri Dec 26, 2003 12:42 pm
Location: Germany, Berlin

#3 Post by noelte »

nice house!
Press any key to continue or any other key to cancel.
Can COWs fly?

miu
Graphics Lead Emeritus
Posts: 286
Joined: Mon Aug 25, 2003 2:33 am
Location: Finland/Helsinki

#4 Post by miu »

saw them and I liked the immersive background picture with scientists and stuff. But it dindt define much how the tech tree should be shown.. I think split to under research/possible to research/already researched and subdivisions for each category works better than dividing them to theoretical, technology and refinement, though refinementes should be shown under already-researched category.
How exactly would you show the whole tech-tree, so that all <200 techs are easily browsable?
Last edited by miu on Mon Nov 29, 2004 9:41 pm, edited 1 time in total.
Difference between a man and a gentleman is that a man does what he wants, a gentleman does what he should. - Albert Camus

Impaler
Creative Contributor
Posts: 1060
Joined: Sun Jun 29, 2003 12:40 am
Location: Tucson, Arizona USA

#5 Post by Impaler »

I like some of the earlier Breadman mock-ups which were based on some even earilier mock ups. Points I liked

Tec Tree is displayed on right hand side of the screen
Above the Tree are tabs that switch you between the seperate Tec catagories
Theory, Aplications and Refinments are all show together
To the left the quee is show and info on expected time of completion is shown
Theory, Aplications and Refinments are mixed in the Quee
Fear is the Mind Killer - Frank Herbert -Dune

solartrix
Space Floater
Posts: 46
Joined: Thu Nov 11, 2004 3:57 am
Location: San Francisco

#6 Post by solartrix »

@miu - Good point about the tech tree. I'm wondering if you couldn't include that somehow in a "mouse over" pop-up window. For example, you scroll over one of the theories and it pops up a little window showing its place within the the tech tree and which applications it allows. If you then right-click it opens an interface that allows you to click around on the various theories.

With applications and refinements, perhaps the mouse over just gives you a description of what the technology does, how much it costs, and what sort of refinements can be done.

I'm not so sure we can put a lot of thought into the tech tree until we know how the whole theory / application / refinement system is going to work.

That said, what the heck, I'll take a crack at how we can show a matrix system....

@noelte - thanks! Was a nice place to camp out for a year and a half. :-)

@all - the images are in the "inbox" gallery, but feel free to look around if ya like the other stuff...

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

#7 Post by Geoff the Medio »

from viewtopic.php?t=903

old mockup made by drek...

Image

and another by BreadMan...

Image

and one by Impaler that doesn't seem to like showing up as an imbedded image, so you'll have to click to view: http://www.freewebs.com/impalerwrg/ImprovedTetris2.jpg

Bastian-Bux
Creative Contributor
Posts: 215
Joined: Fri Jun 27, 2003 6:32 am
Location: Kassel / Germany

#8 Post by Bastian-Bux »

IMHO breadman. Each apllication needs a Refine or Refine to lvl x button though. Oh and it would be great, if hovering over an application would give additional information, like Laser: refined till lvl 15, may use continuous, autofire and long range focusing mod.

User avatar
utilae
Cosmic Dragon
Posts: 2175
Joined: Fri Jun 27, 2003 12:37 am
Location: Auckland, New Zealand

#9 Post by utilae »

Here's a quick Research Screen I made:
Image
-The little hammers represent application. The ones with a - or + can be expanded to reveal application techs.
-The light bulb represents theory techs.
-The two arrow heads (one a little refined) represent refinements. I have not done much to do with refinements here, they could be in a different screen or something. They'll need space because you need to be able to select from refineable applications (either unrefined or refined).
-Clicking on the 'blaster' application brings up the description, etc in the sidebar. There is a research queue in the side bar, as well. Naturally this queue would be scrollable, as would the main tech tree layout area.
-You will see that unselected 'expanded hammer windows' are 'greyed' out, but selectable to show the techs inside.
-You can change the category (eg from weapons to learning) by selecting in the drop down box.
-Down below is an area filled with required information, eg total research produced this turn, used this turn, etc.

Overall it's a rough layout, but it gets the point across. Hope there are some good ideas there to be taken and used.

BreadMan
Space Squid
Posts: 88
Joined: Fri Aug 06, 2004 1:37 am
Location: Chico, California

#10 Post by BreadMan »

Bah. I can remember I had a bunch of ideas and improvements to the above design after I posted it, but now I can't remember what any of them were. Bah! :evil:
Good afternoon! This is the Earth Alliance embassy diplomatic office. My name is Alex. How may I assist you?
HUMANS! BLAUGHRAN EMPIRE CLAIMS PLANET KREIGHTON! YOU GIVE RAY GUN SCIENCE OR BLAUGHRANS DESTROY HUMANS ON KREIGHTON!!!

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

#11 Post by Tyreth »

The time is coming very soon that we need these screens to pass on to the programmers. So if you had ideas you wanted to contribute, now is the time to polish them up and present them.

User avatar
pd
Graphics Lead Emeritus
Posts: 1924
Joined: Mon Mar 08, 2004 6:17 pm
Location: 52°16'N 10°31'E

#12 Post by pd »

i'm going to work this research screen ui out this weekend. i'll also do the prod screen and some other stuff. it's already thought out pretty well.

you can count on that.

a_claudiu
Space Floater
Posts: 26
Joined: Sat Nov 01, 2003 11:21 am
Location: Belgium, Brussels

#13 Post by a_claudiu »

I will vote with the screen from drek (the one with sausage theory). Why not a poll?

User avatar
pd
Graphics Lead Emeritus
Posts: 1924
Joined: Mon Mar 08, 2004 6:17 pm
Location: 52°16'N 10°31'E

#14 Post by pd »

because, this isn't the way things are working in freeorion.

also dreks proposal isn't really a user interface design.

a_claudiu
Space Floater
Posts: 26
Joined: Sat Nov 01, 2003 11:21 am
Location: Belgium, Brussels

#15 Post by a_claudiu »

It looks the best for the moment and I hope that not a SMAC solution will be choosen. SMAC had a lot of good points except the tech. My 2 eurocents.

Post Reply