0.3 Production Screen

Development of artwork, requests, suggestions, samples, or if you have artwork to offer. Primarily for the artists.
Message
Author
User avatar
Geoff the Medio
Programming, Design, Admin
Posts: 12422
Joined: Wed Oct 08, 2003 1:33 am
Location: Munich

#76 Post by Geoff the Medio » Wed Jun 01, 2005 8:32 am

Kharagh wrote:Can the scrollable windows be scrolled with the mousewheel without having to click into the window first?
All up/down scrollable windows in the game already do this...
Hmm Wink. Maybe it's a good ui-design (hard to tell without detailed description). But LOOKS nice ... (@geoff, no offence:) I guess you are targeting functionallity first)
I am mostly concerned about functionality at this point. Read back in the thread; I've been bugging Mystiqq to make what I've done pretty... but apparently he doesn't see a problem?

Though I suppose there's not really that much there to complain about other than the focus selection, production indicators and general colour scheme... (though if someone has other specific issues I'd like to hear them)

I'm considering removing all the title bar things from objects that don't represent in-game things... so the system, planets and buildings on the right panel and the tech boxes on the queue would have title bars, but the Available Projects, Queue, Production and Project Details windows wouldn't... It'd be more like the current research screen layout...

Any other relevant suggestions are appreciated...

Edit: Notes to self:
-Colour Planets w/ Empire colour and/or indicate owner with text (or perhaps an empire icon?)
-Add buttons to sort planets on sidepanel by empire owner, population or orbit slot
-Add buttons to optimize/sort production queue by turns to complete, cost to complete, total cost

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

#77 Post by Geoff the Medio » Thu Jun 02, 2005 12:50 am

Changed colour scheme because a) apparently cyan sucks and b) it occurs to me that it'll be necessary to indicate which empire owns a planet on the sidepanel, and colour of the info box could be a way to do this. I've also played around with some empire icons for this purpose, either at the top left of an object's box on the sidepanel (for the building) or next to the picture (for the planet). I'm not sure which is preferable, or whether either of this should be used with or independently of colouring on the sidepanel. The colouring currently looks rather bad, but hopefully an art person could think of a nicer way to do it. The empire-colouring could also be extended to the entire screen (borders and titles of windows other than sidepanel), to indicate which empire's info you're looking at, in case we used the production screen to display other empires' info as well (ie. if you have espionage...)

There's also some buttons next to the system production summary to indicate whether you want to see the system summary (ie. if there's more than one empire producing stuff) or just your system summary (ie. excluding other empires' planets from the totals). I'm also debating whether we even need a system summary for resource production and population... it doesn't strike me as terribly useful...

Image

I also widened the sidepanel a bit, as there probably wasn't enough room at the font size used for planet and building names...

User avatar
Obiwan
Graphics Lead Emeritus
Posts: 258
Joined: Fri Oct 03, 2003 11:55 am
Location: Australia NSW

#78 Post by Obiwan » Thu Jun 02, 2005 3:28 am

Does look better. Side panel still has a cluttered look.

You know Im a fan of boxes fading in with extra info when you hover the mouse and press control. But you probably have your own thoughts on that.

Swapping the star and system name box would make sense for the planet graphics, also might make a distinction from the rest of the info below.

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

#79 Post by Geoff the Medio » Thu Jun 02, 2005 4:31 am

Obiwan wrote:Side panel still has a cluttered look.
I'm not sure what I can really do about that... The resource indicators and focus selection buttons can be prettied up, which would probably help, but other than making everything bigger or taking stuff off, there's not much that can be done while still leaving necessary info visible...
You know Im a fan of boxes fading in with extra info when you hover the mouse and press control. But you probably have your own thoughts on that.
That works for tooltips on toolbar buttons, but most of what I've got there is data itself already... So I suppose you'd want the data removed and only appear with a tooltip... though as I said, what's there now is the basic stuff you'd always want to have visible...

I suspect the key is to improve the resource indicators. Mystiqq had some decent looking stuff with a faded background and nicer borders earlier in the thread that looked less busy, I think...
Swapping the star and system name box would make sense for the planet graphics, also might make a distinction from the rest of the info below.
You mean put the planet images to the right of the info panels, or just the star image to the right of the system panel like it is in the v0.2 sidepanel? I never really understood why that was done that way... it's kind of arbitrary and odd IMO. The direction in which planets are bright dark can be adjusted, and needn't match up with the direction of the star on the sidepanel; it's not a physical representation of their positions, really, so the light could come from the right, left, or rotate around and be from different directions for each (presumably they all move around at different speeds at different orbital distances, so wouldn't be all in a line always anyway)

Edit: Played around with putting a faded background image behind data panels. In this case, it's a zoomed and blurred version of the blue empire (the player) icon (as seen on planet panels), which with the colouring of the Empire Production panel, indicates that the view shown is for the blue empire, as opposed to red or some other player...
/Edit

Image
Last edited by Geoff the Medio on Sat Jun 04, 2005 7:07 am, edited 2 times in total.

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

#80 Post by Geoff the Medio » Fri Jun 03, 2005 3:25 am

And yet more...

Image

Replaced my bad example icons with grey box, just to indicate location and size more accurately and less uglily.

Moved icons on build queue boxes to right side, to match description panel at top, and made boxes on build palette similarly arranged.

Scroll bars are 20 pixels across, give or take; this is somewhat wider that FO's current ones, which are too thin, IMO.

Reduced font size in a few placed based on looking at other games' UIs... might be too small to ready easily at very high resolution?

Removed my bad attempt at resource production indicators for now... need to replace them with something better.

Indicated maintenance on buildings on sidepanel.

Rest of building box is for general use. If building needs targetting UI, this goes here. If building has a status, such as "active" or "disabled" or "damaged" this can go here. Not sure what to put there in the case that a building has no particular status info to display... Could default to "active", as shown.

Textually indicated starcolour on system box on sidepanel.

Note to self: Try to incorporate miu's idea for little bars that show the current and peak meter values on sidepanel, so as to make focus changing less odd seeming (currently you'd just see the massive drop in production values for the next turn, not the long term result...).

Edit: Updated image. Added a bunch of 16x16 grey box icons for controlling sidepanel, build palette and project description text. Added pseudoexample functional descriptive text for a project. Adjusted image size and made palette fit 3 projects tall. Rearranged buttons at top of screen to normal left-to-right orientation, and put turn at right, which is more "logical" for most left-to-right reading people, as the turn button ends the turn, like the end of a sentence is on the right, and to keep it far from the other buttons (as it was before). Added a few extra buttons on top bar: obvious one for production screen, but also one to open fleets window (though could also go to an empire all-fleets summary screen later), and currently nonfunctional espionage button, for example.
/Edit

Edit again: Added a few alternative ways to display projects in the build palette. The text over picture method is similar to Command and Conquer. Just the icons is similar to WarCraft III. Pictures with text above and below and an enclosing box is similar to SMAC.

Also made all the subsections of the screen be enclosed by square lines without separation between sections. Actual game objects (or potentially build projects) are represented with discrete boxes that have curved corners. Sections of the screen get square edges and are connected, not separated as before. Also, I've tried to avoid having a section of the screen with a title line saying what the section is, which seems rather... unprofessional looking, to me. The "EmpireName Production" would actually indicate which empire's production is being summarized, which is useful info, and isn't just a pointless heading.
/Edit again

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

#81 Post by Geoff the Medio » Sat Jun 04, 2005 11:35 am

Image

Image

Replaced top line menu buttons with 32x32 icons. Will need art people to make up appropriate icon images for these, and every other little grey square on the mockup. All are sized 16x16, 32x32, 64x64 or 128x128 for convenience. I'll give a rundown of what they all do at some point, which would probably be helpful.

Made another attempt at focus UI and resource indicators. There's not really room for separate widgets to indicate focus, so click-and-draggable tag thingies at the top and bottom of the resource indicators could be used to control and indicate the focus. Planet resource production is given as a number over top of the icon for that resource, as I think Mystiqq made a mockup for (though his was nicer than mine obviously...)

We'll need a "Balanced" icon of some sort... either based on my four-way arrows (which was based on the balanced button from v0.2) or something else. Someone did a scale one, but IMO that's not very intuitive or clear...

Decided that the text-over-image system would work for the buildings palette as well... or at least better than text beside the icon... so I removed the not-good option for buildings palette entries. More entries fit in a smaller space this way.

I suspect the buildings palette will be resizable up and down, so you'll be able to trade map space for additional buildings display room.

Edit: Added empire resource indicators at top of screen. The numbers for Food and Minerals are:

{ICON} PRODUCTION / USED - STOCKPILE (CHANGE)

And for Industry, Research and Trade:

{ICON} PRODUCTION / USED

Note that I'm assuming trade is not stockpilable, which might be difficult to understand, but IMO is best; see here.

/Edit

Edit again: Added a second image to show the options possible with the screen. By clicking the appropriate icons (currently grey squares sized 16x16... artists please help!) you can toggle on/off the planet and building images next to the sidepanel. With them off, you get more space for the project info box (top middle) and another row or so of projects in the projects palette (bottom middle), and a bit more visible galaxy map.

You can also toggle on/off displaying the buildings on the sidepanel at all, making more planets fit into the vertical space you have.

You can also toggle on/off some optional sections of the planet data panel. Everything but the basic population and resources can be toggled on off, independently. So if there's a section of the panel panel for ground troops, and a section for political stuff, and another for espionage or culture, you can toggle each on and off as desired to save space or show more info.

You can also resize the palette vertically, making more or less map space available.

I'd like to have more space between the icons at the top left, so that the player won't miss and click the wrong one, but I'm short on space due to the resource indicators. I started doing this, as seen with the SitRep button being separated slightly from the next, but forgot about it before doing the resources... If space is available if/when this is actually implemented, separating them by half a width each would be good.

/Edit again

User avatar
Obiwan
Graphics Lead Emeritus
Posts: 258
Joined: Fri Oct 03, 2003 11:55 am
Location: Australia NSW

#82 Post by Obiwan » Mon Jun 06, 2005 12:23 am

Looking good. Ill be have time to dedicate to this and icons shortly.

User avatar
tzlaine
Programming Lead Emeritus
Posts: 1092
Joined: Thu Jun 26, 2003 1:33 pm

#83 Post by tzlaine » Mon Jun 06, 2005 1:32 am

Note that the turn button should go on the other side, by itself. This is to keep it away from the other interface buttons (most noticably on the main map with the side-panel open), in order to prevent absentminded people like me from clicking it inadvertently.

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

#84 Post by Geoff the Medio » Mon Jun 06, 2005 2:33 am

tzlaine wrote:Note that the turn button should go on the other side, by itself. This is to keep it away from the other interface buttons (most noticably on the main map with the side-panel open), in order to prevent absentminded people like me from clicking it inadvertently.
There's nothing clickable near that corner in my sidepanel design. Closest is the < and > buttons on the system box, and the line of icons below the system box, both of which are over 100 pixels away.

User avatar
tzlaine
Programming Lead Emeritus
Posts: 1092
Joined: Thu Jun 26, 2003 1:33 pm

#85 Post by tzlaine » Mon Jun 06, 2005 2:11 pm

Geoff the Medio wrote:
tzlaine wrote:Note that the turn button should go on the other side, by itself. This is to keep it away from the other interface buttons (most noticably on the main map with the side-panel open), in order to prevent absentminded people like me from clicking it inadvertently.
There's nothing clickable near that corner in my sidepanel design. Closest is the < and > buttons on the system box, and the line of icons below the system box, both of which are over 100 pixels away.
Exactly. Instead of 100 pixels away, it should be 1000 pixels away. This is something decided on long ago in these forums; I'm not just making things up.

User avatar
Sandlapper
Dyson Forest
Posts: 243
Joined: Sat Nov 01, 2003 11:50 pm
Location: South Carolina, USA

#86 Post by Sandlapper » Tue Jun 07, 2005 2:49 am

tzlaine wrote:
This is something decided on long ago in these forums; I'm not just making things up.
I can corroborate that discussion and decision; that was decided a looonnnggg time ago.

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

#87 Post by Geoff the Medio » Tue Jun 07, 2005 6:14 am

tzlaine wrote:Exactly. Instead of 100 pixels away, it should be 1000 pixels away. This is something decided on long ago in these forums; I'm not just making things up.
Did these discussion rule out alternatives like requiring two clicks to end the turn (one to activate, one to act)? What exactly was decided? I've moved some buttons further from the top corner than they were in v0.2, but apparently this still isn't enough? (Was "1000 pixels away" the actual wording of the decision?)

Anyway... WARNING: MASSIVE POST!

Image

There are some changes from the previous pair of mockups. In general, anything new in this mockup supercedes the older ones, but the general function described for windows resizing and images being togglable still applies, though I won't bother making an altered version of this mockup to re-illustrate. Those include the expanding up/down build palette and the planet / buildingimages disappearing and the palette and project info box expanding to the right to fill the space.

Those mockups also indicate how the screen should expand or contract with additional screen width; the build palette and project info box, at the middle bottom and middle top respectively, should expand right, as would the map in the middle. If the window is taller, then the queue, map / palette and right sidepanel expand down.

On the new mockup are a few things of note...

There are minor changes to the colour scheme, but I'm hoping that an artist will replace just about everything on there with a much nicer theme. Most of the functional layout is done now, I hope, so an artist can come in at this point and make it look pretty.

All the grey box icons, except for the specials icons below the planet picture, have been replaced with filler mockups to help illustrate the purpose of those buttons, which I will explain below.

Also note that the on-screen buttons are now round, square, or octagonal. This is to indicate differing functions:

The round buttons do something instantly when clicked, which does not continue happening after the click. For example, at the top of the queue, the two leftmost buttons sort the queue according to cost per turn, or time remaining to complete. Pressing these buttons has an instant, non-presistant effect; after you click the button, things are rearranged on the queue, but you can immediately start manually rearranging things without having to deactivate the button.

The square buttons are "one of several" pickers, of which one is always active, persistantly. Note they they are always in groups of two or three in my mockup, but this is just because that's all I could think to add at the moment... they might be in groups of four or more later. Each of these groups operates independently, and amongst the buttons in the group, always exactly one button is activated. For example, on the build palette, the three leftmost buttons are used to pick what sort of projects are shown on the palette: everything, buildings, or ships. (Presumably later we'll have more kinds or more subdivisions).

The octagonal buttons do are an on / off toggle that act independent and persistently. These are currently only on the bar below the system box, and above the scrollable planets / buildings area.

For both artists and programmer, the current buttons on the mockup are:

The buttons above the queue, from left to right:
-Sort projects by cost per turn, alternates high to low, and low to high with each press.
-Sort projects by turns left to complete, alternates high to low, and low to high
-Cancel selected projects; removes the currently selected project(s) from the queue.

The arrow show on the first two should probably alternate up and down as appropriate.

The buttons above the projects palette, left to right:
-Show all available projects in build palette
-Show buildings in palette
-Show ships in palette
-Sort things in palette alphabetically by name, a to z
-Sort things in palette numerically by cost, low to high

The buttons in the text area of the project description box, at the top middle, left to right:
-Show building data such as maintenance, placement requirements, effects, etc.
-Show fluff description text of building

The buttons in the bar below the system summary box, left to right:
-Show or hide star, planet and building images to left of sidepanel
-Show or hide buildings on the sidepanel below their respective palnets or above planets in the system objects spot
-Show or hide the happiness panel of planet boxes on the sidepanel
-Show or hide the ground forces panel of planet boxes on the sidepanel

The latter two panels will be empty for v0.3, but I put them in to establish the functionality now.

There are also round buttons at the top of every scrollbar. These do pretty much what they look like: scroll the scrollbar. It might seem odd to have the up and down buttons at the top, but if one things about it... it really makes sense. It's easier to use, as to scroll up or down or switch between, you don't have to move the mouse all the way to the other end of the scrollbar.

Similar left and right buttonsa re on the system info box at the top right. These loop through the systems in the game... either owned or any... I'm not sure and don't really care... (whichever it is in v0.2 is fine, I guess).

The "R" square boxes below the selected blue planet are specials icons. They aren't clickable, but serve to give a visual representation of the specials attached to a particular planet.

There's also a round bullseye button on the bottom red building. This is an example of a building targetting widget, which will presumably be useful when we have targettable effects. That building might be a big cannon, or a transporter, or wormhole generator, or somesuch that needs a target passed to its effects. Clicking that button would let the player indicate that target. Details to be determined.

Note that, in a nod to Obiwan, all the described buttons should have mouseover tooltip popups explaining what they do.

Also, I should make it clear that all these buttons need to look much nicer than my crude versions. Doing this is part of the appeal to artists I made above. They don't need to have the standard white outline I've put on either; make them fit the theme, but make sure it's clear which ones are activated / inactive, and make the squares, circles and octagons as distinct as possible. (This could be done with colouration or other methods...)

How things should work on this screen:

To set the focus, I've made some little tab things on the top and bottom of the resource production indicators on the planet panels on the sidepanel. These could be click and draggable, or possibly you could click on the top line of the resource indicators to change focus. If the latter, there should be some ghosty feedback that shows up upon mouseover that looks like the focus indicator tabs are in their new position, and thir old position should disappear or be similarly ghosted out, to show what will happen if one clicks.

Note that the ### numbers in the resource indicator boxes are actually indicating the RESOURCE PRODUCTION of the planet, not the meter levels. The meter levels themselves will be shown on the planet info screen, which has yet to be designed.

That said, it'd be nice if an artist could remake the resource indicator / focus select in the style that either BreadMan or Mystiqq were doing, starting here:

http://freeorion.org/forum/viewtopic.php?p=19600#19600

Also, it'd be nice to show the little bars under the resource indicators to actually indicate meter values, similar to what miu was doing here:

http://freeorion.org/forum/viewtopic.php?p=16741#16741

The lighter bar is the expected value of the meter in the next turn given the current focus settings and other such factors, and the darker bar is the expected max meter values next turn. Since meters are all 0-100, these are all proportional to resource production (population affects all the same way), so you can see the proportional changes to max meter values that changes to focus would make, so that you don't just think that your resource production is falling with no potential gains when changing focus.

Which reminds me: focus changes should have an immediately visible effect on resource production values as shown, as the shown values should indicate the expected production of each resource in the next turn for the given focus and other such settings and known game situation.

Now, the important stuff: How to enqueue projects. This can be done several ways. The player can:

Click on a planet on the sidepanel to select it as illustrated. The projects on the palette are filtered, and only ones that can be built at that planet are shown.

While a planet / other build location is selected, double click on a project on the build palette to enqueue it to the bottom of the queue.

While a planet / other build location is selected, drag a project from the palette to the queue, inserting it anywhere into the queue, possibly between already enqueued projects, as indicated by where it is dropped. There should be some visual feedback when dropping, such as little arrows pointing between projects already on the queue to indicate where the project will be dropped.

Whether or not a planet is selected on the sidepanel, drag a builing from the palette onto the sidepanel. While dragging, valid build sites are left unchanged, but invalid ones are greyed out to indicate that the project cannot be built at those locations. While still dragging, hovering the mouse over an invalid build site should pop up a tooltip indicating why the site is invalid.

Click a building on the palette, greying out invalid build locations on the sidepanel, as above. Hovering the mouse over invalid locations should again display a tooltip explaining why they're invalid (though in this case the tooltip and greying is relevant to the selected building, as the player need not be dragging anything at this time).

The player can't just drag a project to the queue or double click on a project to enqueue without first selecting a build location.

...

Whenever the player clicks on something in the palette, or a building on the sidepanel, the project info window at the top middle should update to display info on that building. The toggle between effects and info, and fluffy description should be persistant, so clicking for fluff, then clicking on another building shouldn't reset to effects, or the converse.

A project on the queue should appear with a mini-sized progress bar and turns indicator on the sidepanel, basically as it would as a completed building, but without the progressbar instead of any UI elements appropriate for the finished building, such as maintenance or targetting buttons or status indicators.

On the galax map, we need some sort of visual feedback to indicate if the cursor is near a system such that clicking would click on that system, opening the sidepanel or whatever else. This could be a brightening, or circling with a solid ring or somesuch. Currently there's no feedback until you've clicked, which is especially bad for giving fleet move orders, as misclicking closes the window. We should also have a similar indication on the map of which system is being shown in the sidepanel. I request that artists think about this and make suggetions.

When dragging a building over a valid build location, and that building has some sort of effective radius or other similar spatial scope selection system, this should be indicated on the map and sidepanel.

This would probably be easiest done with one or more optional tags in the building XML format. I'd suggest having two extra optional fields.

1) A min and max distance field, which is used to generate on the map a coloured (probably solid filled) partly transparent circle. or annulus or plane with a hole in the middle.

2) A condition, that picks which systems and planets and buildings to highlight on the map and sidepanel.

These two would act independently... 1) is just for convenience to generate some sort of circle indicator. 2) would determine which to actually highlight. Both are separate from the effects groups' scopes, which are probably too complicated to parse, and even if they aren't, I'd rather have the separate control this, or something similar, would provide.

Artists, it'd be nice to have suggestions for what the feedback circle would look like, and how to highlight the sidepanel when suggesting any themes for it, as above.

That's all I can think of at the moment... which is proabably for the best. Congratulations if you read all this way. Do please comment.

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

#88 Post by noelte » Tue Jun 07, 2005 11:13 am

Geoff the Medio wrote:
tzlaine wrote:Exactly. Instead of 100 pixels away, it should be 1000 pixels away. This is something decided on long ago in these forums; I'm not just making things up.
Turn btn is on a completely different UI Level (on the top Button/Icon bar), so it's separat from the Production UI.
BTW: Displaying the resource values above the resource icon seens to be a good idea.
Press any key to continue or any other key to cancel.
Can COWs fly?

User avatar
Obiwan
Graphics Lead Emeritus
Posts: 258
Joined: Fri Oct 03, 2003 11:55 am
Location: Australia NSW

#89 Post by Obiwan » Thu Jun 23, 2005 6:26 am

Heres a production screen that tries to follow the theme of the Research screen.
Image

The most important thing is that the player makes his selection of what to build from the bottom list. As you can see ive got nothing more than simple colored shapes as icons.
It doesnt matter though as there is ample room for discriptive text.

Without a full time artist (Im going to be very busy over the next few months), this is the way forward. As the interface and programing can move forward with out having us artists holding it back.

Note : the arrow points to a 'tab' (there could be as many tabs as needed.)
The tab can extend up to cover the starmap once youve got the correct system. This will make finding what youre after amuch simpler.

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

#90 Post by Impaler » Thu Jun 23, 2005 4:43 pm

Why not simply click and hold the tab iself to drag the whole list up and down, consealing and revealing Map space as you do so. The Tabs for organizing Buildable things makes a lot of sense I like it.
Fear is the Mind Killer - Frank Herbert -Dune

Post Reply