Overall Clash Interface Design

[Mark_Everson]

Hi Darren:

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.

Also the comp.lang.java.* lists are a good way to get answers sometimes.

[This message has been edited by Mark_Everson (edited December 29, 1999).]

[Darren_McGuicken]

Progress Report

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.

Any and all suggestions welcome
[This message has been edited by Darren_McGuicken (edited January 05, 2000).]

[This message has been edited by Mark_Everson (edited October 21, 2000).]

[Mark_Everson]

Darren:

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!

What do others think about the basic concept, and the general implementation?
(keep in mind it will look much better in the final product)

[Darren_McGuicken]

Sexy is easily done, Mark!

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...

Re: Look And Feel - I've only tried modifying generic stuff so far. I'll have a lookee at what else can be done & report back.

[L o k i]

Keep it simple.

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

Need help?

[Darren_McGuicken]

Minor Update: my website has been updated slightly to show some more informative (I hope!) screen shots.

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...

Again though, any new suggestions or comments(please!) on any aspect of Interface design are always welcome!

[Mark_Everson]

Darren:

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!

Mark

[L o k i]

I had a look at the screenshots. I love the Mac style interface Good 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?

Anyway, I'm going to draw one up for you to see, and I'll also add some bits to the screenshots to give my opinions on how it might look better.

[L o k i]

First Example

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.

I'm going to do the other one now, this will take me a while.

[Paul Crocker]

I like that last interface, Loki. Although many people have stated that we should have a fully customizable interface, I also think that it should have it's own unique look. Kind of torn on that one...would a good compromise be several choices for a GUI (3-4)? Until your last GUI, I was leaning towards fully customizable windows, but they ARE much more cluttered and disorganized that your example. I especially like the tabs at the bottom of the screen for each area of interest! This topic will surely require some more discussion to come up with a compromise

[Mark_Everson]

Loki:

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.

Darren, Paul, and others, what do you think?

[L o k i]

Interface

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.

All I'm saying, is the game needs its own unique interface especialy built for the game.
[This message has been edited by L o k i (edited January 10, 2000).]

[L o k i]

Well I think if we supplied each image into a directory somewhere, as a bmp file, then it could easily be changed by anyone.

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.

[Mark_Everson]

Loki:

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 about "your job, if you choose to accept it" was in generating a system to produce an attractive background for a user-customizable interface. So it should be able to provide an acceptable background for something with a fairly sparse screen, as in Darren's first example, as well as a crowded screen that is basically filled with controls and maps. All the things Darren is designing will be able to be resized, moved around, and added or deleted at user preference. So when the player designs the kind of screen They want to use for diplomacy interface, we need something more attractive than a solid color to go in the background (or perhaps we don't). Anyway, I wanted to have your suggestions for how to fill up the arbitrary-sized pieces of the interface that will be left over.

[L o k i]

I see, why not just use an image relating to the window's subject? Thats what they've done in Civ2.
However, what do you mean by "controls and maps"?

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.

This way you can basicaly change the interface in any way you like. I could turn the whole main-screens frame into a circle, or a triangle. I could have a picture of my girlfriend in the top left corner.