After a quick cull of past threads, the state of play seems to be...

---
A) The main interface

1) Layout:

The main screen to be broadly similar to Civ2 - ie. a BIG main map screen bordered by data panels & optional bells and whistles.

2) Elements onscreen:

Small map: right-clickable for menu: overview of known map (ala prev versions of civ); Pop overlay; Resource overlay; Mil overlay.

Main data panel: Overview of what's going on in the game:

-overall income and expenditures (and allow you to up tax rate...)
-internal political status (Upper Class happy, peasants on the verge of revolt...)
-army size (mobilised / demobilised / mercenary)
-economic status (growth rate shown in icons)
-technological status
-diplomatic state (w/ most important neighbours and is relation getting better or worse)
-type of culture and any directions its moving

Secondary panel: showing contextual data, ie. highlight or click on a TF etc. to see info on the units that make it up along with some pretty pictures.

3) Presentation of data:

Numbers are obviously the main area of contention. The favourite solution at present is to have some overview stat bars as default onscreen, they can be clicked to bring up more detailed information. Some suggestions made:

- Your civilizations happiness could be a bar that goes from black on one end (rebellion) through red, yellow, green, gold (celebration), then if the user wanted to know the exact percentage or the exact number in each category, just click on the bar and pop up a subwindow giving the exact
values.

- 'Bars' themselves can be made more visually appealing and informative than either straight bar-graphs or digits. Happy faces for happiness; use of unit badges etc.

- it seems that everyone is in favour of dropping actual numbers as long as the potential complexity of data is retained.

- This also allows for realistic partially-blinkered leadership, ie. it does away with the situation of a player knowing, to the second decimal place, exactly the percentage of food/whatever produced and therefore
micro-managing for hours to max the values.

4) Customisation:

Most people seem to like the idea of displays looking appropriate for the Civ using TIF overlays.

What about, ala Netscape/IE web browsers, drag-and-drop/rippable elements - the user chooses what data he wants onscreen at one time alongside the main map/data panel?

B) Interface levels

1) The high-level interface:
Should provide the player with a snapshot of what's going on, and how it compares to that of the main rivals (selected by player).

2) Civ-wide detailed interface:
Here you can pick civ-wide levels of eg. state of economy & top-three to-do picks
of your advisor. There will also be icons leading to micro-management screens.

It would also have a province map leading to...

3) Provincial detailed interface:
Would show most of the stuff in 2, but at the provincial level.

C) General points

Interaction: Mostly mouse based for the beginners, but teaches the player how to use the interface better; uses the mouse and keyboard equally at advanced levels.

Use of right-click context menus similar to SMAC.
---

Comments/criticism welcome.

Have I missed anything obvious? Is there anything dreadfully wrong about the way the Interface seems to be heading? Any suggestions for a radically different approach?

Thanks for the summary. I will try to put up something more thoughtful when I'm not at work...

All:

I will have demo 4 out soon. It raises several interface issues all by itself! I think everyone playing around with what I have so far, resizing and moving around windows, etc., we can get an idea of how much screen space should be devoted to the main map etc. In parallel with that, a few demos, as Paul says, would be valuable in getting everyone going in their thought processes.

I think the fundamental things to keep in mind are:

1) Any interface spec we formulate needs to be fairly flexible. We just can't forsee every way the design will evolve from here. Part of the reason IMO that a lot of commercial games have lousy interfaces is that the specs are locked in before the game design has fully taken shape.

2) We need to provide the player with ways to get quick overviews of everything important. And also to be able to Affect those parameters in easy ways. You will see in the demo a crude way for the player to get an overview of the size of military threats in the whole local area (about half of Europe).

Yeah, if our philosophy is to give the user what they want (no matter how ill-advised ), my first notion was that set up a series of 'optional toolbars' akin to Glak's customisable button suggestion.

ie. Keep the main screen as simple as possible by default but have a lot of alternative data panels for each of the main game models (eg. dynasty/character info, maybe?) selectable via a menu which the user could tick on/off?

It means someone with a 1600x1200 screen, for instance, could have the best of all worlds with a large main playing area plus access to all the detailed info they deem most important.

Someone playing at 800x600 would have to make the decision whther to keep a large playing map or spice it up... all vital stats, whatever we decide they may be, should be in a compulsory panel.

Yes/No/Heard it all before?

Paul: me? artwork? Shurely shome mishtake? I might be able to manage it in ASCII...

I was thinking of:

 ----------------------------
|                     |      |
|                     |  2   |
|                     |      |
|                      ------
|                     |      |
|          1          |  3   |
|                     |      |
|                      ------
|                     |      |
|                     |  4   |
|                     |      |
 ----------------------------
|             5              |
 ----------------------------

Hey, actualy that's not bad, given my incompetence as an artist

1) Main Map - compulsory
2) Small Map - compulsory?
3) Main Data - compulsory
4) Contextual Data - compulsory
5) Tagged onto the bottom of 1 or 4 could be one or more of eg. diplomacy info; detailed economy view etc, in civ-wide or province-wide forms.

bottom middle: text area, receive status reports, send and receive messages from other rules (both human and AI), enter cheat codes (useful for debugging and scenario design). Also useful for entering commands through text if you are one of those command line people.

bottom right: minimap, essential

top left: customizable toolbar like in IE. Some of these buttons let you do things like make TFs quickly or change visual settings while others bring up the important subscreens.

top: that little thing could be used for scrolling around the screen. Click the middle dot to center on the selected unit.

black area: most of this will be the map, the area on the right side (above the minimap) will be for the troop information, etc..

Well I didn't have time to finish it and I have to get to studying for stupid art history final tomorrow morning, grrr... memorize names and dates

oh the link to the page itself:
http://tcahalan.tripod.com/index.html

Clash should be so information-rich that I think players might want to have Several main interfaces depending upon whether their civ is small or large, whether they are currently focused on diplomacy, or conquest, etc.. So I think the player should be able to assemble any interface they want out of the interface components (Toolbar, main map, mini-maps, etc.). We could reserve alt-number key combinations to quickly shift "ViewStyles" among those the player has set up.

The concept of ViewStyles seems very powerful and natural to me. The programming aspects aren't all that difficult, especially if you know ahead of time all Clash interfaces will need to support it.

1. Main map
2. Mini me - 'er - Mini map
3. Tool bar
4. Model dialogues

[this is a follow-up to some stuff debated recently on the Diplomacy thread]

If each separate model interface is to follow the Customisable Display philosophy, it needs to be made up of small self-contained UI elements for each lower-level control. I think that's where the current weight of opinion seems to be

Is there any standard yet for making a GUI 'chunk', other than each component to be resizable/de-selectable? What other elements should they have in common? From toolbars/menu systems to layout & eye-candy?

I think if you are game, that would be a very valuable thing to code up. I'm embarrassed to say, that I can't think of much beyond what you suggested already in terms of functionality. But I'm sure we'll think of more stuff .

There's one thing that bothers me with the many-widgets approach. If each widget it has its own menu, then a lot of screen real estate is going to be wasted. I'm wondering if we could get away with having the only menu be on the toolbar (I'm assuming here that most of the view styles will probably have a toolbar associated with them, possibly a bad assumption). If we could somehow lose the menus on all but the toolbar, the interface would be both more attractive, and give us more area on which to put icons and other interesting things in terms of information for the player. If you assume we Do have a toolbar, at least one that can be called into existence with a hotkey, I think a decent solution is possible. In essence, each widget would register itself with the toolbar, as requiring certain menu items on the toolbar. Poof, all those ugly menus disappear. We could even put some work into making the menus on the toolbar look attractive, since they'd be the only ones we needed to worry about. The only wrinkle I can think of is when you have more than a single type ofGUI widget present. Then it's not clear when you change the, say, map square size, which map you mean. In those cases, it would have to assume or ask, which want it was for. But I don't think that's a big problem.

What does everyone think?

The only problem is that I've never tried to code such a system... still, I'm willing to learn!

I was going to put together a test diplomacy UI sometime soon, so I'll have plenty of opportunity for practice...

A few quick pointers to get you started:

Warning: I just cobble things together as I go along, so perhaps what I've done are Not the best things to use as templates

You will want to inherit from Window instead of Frame for the GUI Widgets

Registering the widgets you probably already have a handle on. I use a primitive mechanism for GameFrames to register with the GUI instance. But that is kludgey. You may want to look at Component and see how it registers listeners for a more nuanced version.

Adding menus in 1.1 you can see in MapSquaresFrame or ToolBar. I don't know if its changed in 1.2

Mouse and Key listeners are also in MSF, although I'm using a 1.1 method right now.

What IDE are you using? If its Visual Cafe, you can just start a new project and add some interactions to see how it does them. I don't know about J++. If you can't autogenerate code, let me know and I can slap something together for you in about 10 minutes!

Good Luck,

Mark

PS One other thought. F_Smith and Ferdi both know their Java, and would probably be willing to help by giving suggestions on the best way to go about it. You might want to put together a summary and email them. Just search on their names to find a post, which will have their email refs.

I've uploaded a sample Model Interface design to Darren's Interface Mockup. [edited by Mark Everson 10/21/00 to repair deadlink]

I'd appreciate any comments or feedback.

I'm aiming for a supremely customisable (for both coders & players) display made up of small components representing stuff like (taking the diplo package as an example): the Diplomacy Governor, lists of Treaties, small maps showing neighbours/Civs etc.

Each component will be resizable, deselectable, maximizable and iconifiable. I'll eventually add in auto-resizers and other fancy bits.

There are many ways to implement such a UI, this one sees to me the most adaptable. If anyone feels strongly against this, now would be a perfect time to speak!

If we do decide that this is the way to go, I can't really progress & start to develop these classes without some form of group go-ahead and consensus on what component types are necessary.

It looks reasonable to me! Of course I think we need to make it look a lot sexier, but that's in the future. For now we go with functional. By the way, have you look into how tough it is to design our own look and feel? Somebody's going to ask that eventually, and I figured I might as well start right now!

It will be really good to get rid of some of that old Java junk that I've just let stay in the project for a long time!

This phase, as you know, was simply a test of the structure. I'm hoping to put together a proper implementation of the source before the weekend (it'll only support ListComponents, SliderBarComponents and ButtonComponents) and I intend to put together the first DiplomacyUI to make use of it.

I'll be sure to make it as flash and good-looking as its creator ( ), and post a screengrab or second demo soon after.

Stay tuned...

K.I.S.S....Keep it simple, SEXY!

I'm afraid I haven't had time to spice it up graphically yet, I've spent most of my time thinking about Constructors & default component design.

All it takes to setup a basic ClashListComponent is:

  new ClashListComponent(treatyData, "Treaty List");

Where treatyData is some form of array. So far so good, but a question for you all:

What default functionality should it have? It looks like I'm best leaving Component-specific action handling to the model coders themselves.

What about menu options? Specifically the main menu - what should the user be able to do above & beyond using the components? Set the default fonts, colours & icons, OK, but is that all?

Loki: Absolutely I can use help! Especially guidance from artistic types:

Take a look at the screen shots mentioned above and you'll probably be able to get a feel for what elements the interface currently consists of (desktop, internal frames, textfields, scollable panes etc.), everything from desktop background to fonts to window icons can be changed - are there any other screen elements which would be needed to truly 'tart it up'?

There's no rush, mull this over, I'll be pretty busy and unable to implement anything new over the next week...

From your brief screenshots, I can see the power of the general idea. I think this is going to work out really well!
I think getting Loki involved is a great idea. You might want to email him just in case he doesn't check back on this thread. He could possibly work out some "look" ideas while you are busy with other things. How about it Loki?

One quickpoint on the screenshots. You should probably describe briefly what each thing is, so that someone who isn't really familiar with your approach knows what the heck is going on! So for instance for the top when you could label it has "dedicated diplomacy screen" and the one next below it could be labeled "diplomacy part of a larger control panel showing several overviews of different areas "or something like that...

In terms of what functionality exactly the general interface components should have, I think an evolutionary approach is best. I'd say just implement the things that you think we Obviously need, and whatever you really think you need while implementing the diplomacy stuff. Then, when people get a good look at it in demo 5, I'm sure there will be Tons of suggestions. We can then balance the suggestions often against each other.

Great Work!

However, what worries me is that its not hard set into the game itself. Its all lose and floating around.

Wouldn't it be nicer to have a real cool looking interface made for the game?

In this first one there wasn't much to really do, its all pretty good, one problem I had with it was the hierachy.

Its important to know where I am and where I'm supposed to be looking in sequence.

The first thing I should know is "Where am I now?" Thats why I made the top bit yellow. Its the first thing the eye will catch. So straight away you know where you are. I just had another look at it, its not a great example, but you get the idea. I also made the button yellow. The button will turn yellow when pushed. If you can make rollovers and on mouse commands, then do it.

Ok, I'm not saying this is what I want it to look like, but I am giving an example of a interface that doesn't need a whole lot of annoying windows all over the place.

I also like to color code everything.

Anything that has to do with the Governor for example, will be that yellow color, anything that has anything to do with treaties will be green. You may not know it, but your brain follows this pattern.

remember, its just an example, I don't know what you guys want on an interface, I can only use what I think you're using. If I knew every window that will be in the game, I could re-orginise the interface to fit that.

As you have probably read before in this thread, I think we need both a polished standard interface, and then the capability for the player to go beyond it. At least for aesthetically challenged individuals like myself, it's wonderful if it looks great, but if that detracts one bit from functionality, I'd rather have the functionality! So your job, if you choose to accept it, is to come up with some sort of framework or background within which the player can put a bunch of widgets, and still have it look good. Your shot at it indeed looks good to me However, I'm not so sure about its functionality. Since we don't really know exactly what we want to go in each screen, for now you're probably better thinking in broad concepts (which I know this example was also...). I think one thing you can be sure of with a user-assembled interface for one particular part of the game, is that it's not going to have a lot of blank space. So you need to think in terms of customizable components, with borders, with a flexible art "matrix" in which they are embedded. Just like you would put in place of the light purple background in your example, except you'll never know the exact size, so things need to scale depending on what the player can figure is the interface to look like. Anyway, that's my shot at it.

If we make the very very background, even the background behind the interface all pink, then anything that is pink, the map will cover. So if I remove a part of the interface (like the logo) the map will be seen through that area. But if I cover more of that pink, then the map won't show through the area I covered. I can't really think of a better way to explain this.

This way it becomes very customizable. Except the mini-map, and things like that won't be able to be moved...got any ideas?

"So your job, if you choose to accept it, is to come up with some sort of framework or background within which the player can put a bunch of widgets, and still have it look good." - I don't understand.

Well I see what you're saying about making the background available for user modification. That will be really good for people designing scenarios. However your average user is not going to want to need to screw around with the background to put together a custom interface.

Can you try again on your description in your second paragraph. I'm sorry, but I just didn't get it.

The thing I don't understand is how much customisability you are looking for.
With the "windows-type-interface" all you can customize is the window itself, you can't really change the shape of it. That's what throws me off the windows interface mostly. The other reason is that its too loose and messy.

Now, about the bit I couldn't explain well. I'll take it through step by step.

Imagine the whole background of the entire window of the entire game is the same color pink they used in Civ2.
Then imagine putting the interface I made over top of that as a second layer.

Now, the main-screen goes anywhere that its pink. But it will always be under the 2nd layer (which is the interface).
So if I ever remove part of the interface, the main-screen will then become visable in that area, whereas before it wasn't. And if I decide to draw a box over the pink area on the 2nd layer, the map won't be visable in that area.

Example

The first one is the bottom layer, completely pink. Anything that is THIS color, the main-map will sit on.

If I draw over the top of that pink layer, it will become the interface. Which ya can see on the 2nd image.

When you think of how much customizability we are looking for, think "sky's the limit". Essentially the user should be able to call up a variety of screens, and in each screen have whatever widget, of whatever size, and whatever position they like. These widgets will generally be controls (sliders, checkboxes, etc.), maps (small or large maps showing a variety of information), pictures (image of character "Governor" for diplomacy) and text areas. The reason a person might want a map in their diplomacy control screen, is that that map would serve a different purpose from the main map. It would probably be zoomed out, fairly small, and showing whole civs by their color, perhaps with their total military power shown by the size of a unit icon characteristic of their technology place on the map. It could also show the relative economic power of all competitors. Or it could show different alliance blocks. Whoever set it up, gets to determine what the map should show.