MWIF Game Interface Design

[Peter Stauffenberg]

ORIGINAL: Shannon V. OKeets
Here is a screen shot of the problem I am currently trying to solve. There are 10 flags used in MWIF and you can see all 10 of them here. On the disk they are 24 bit color bitmaps of size 84 by 56 pixels and I have no trouble getting them to appear full size on the screen. Those are the large flags you can see on the bottom portion of the screen.

I'm used to similar programming problems at work. It's trying to find the needle in the haystack. The way I solve such odd problems is to attack the problem from many different angles until I find the cause of the problem or the workaround.

Have you tried to change the red color of the Chinese nationalist flag to see if it's the RED color that causes it to be transformed to transparent? Have you tried to remove white sun symbol within the blue area to see if helps. Just to try to locate WHAT is causing the problem.

Maybe trying the Chinese nationalist to get the symbol from another country to see if the graphics is causing the problem or maybe the file itself or the file NAME?

Similar with the German flag. Try to alter the size for all flags slightly to see if it could help. I guess there are many other angles to attack this problem, but sooner or later you would find the workaround or the cause of the problem.

Often you will be surprised to learn what caused the problem in the first place. Often there is something logical, but not very easy to see. Other times you have to fight an inherent bug in the development software and only a workaround can solve the problem.

This is part of the fun being a computer programmer. [;)] Every day is a search for needles in the haystack. I guess my home is crowded with thousands of found needles already. I know they will come handy one day. [:D]

[Shannon V. OKeets]

ORIGINAL: Borger Borgersen

ORIGINAL: Shannon V. OKeets
Here is a screen shot of the problem I am currently trying to solve. There are 10 flags used in MWIF and you can see all 10 of them here. On the disk they are 24 bit color bitmaps of size 84 by 56 pixels and I have no trouble getting them to appear full size on the screen. Those are the large flags you can see on the bottom portion of the screen.

I'm used to similar programming problems at work. It's trying to find the needle in the haystack. The way I solve such odd problems is to attack the problem from many different angles until I find the cause of the problem or the workaround.

Have you tried to change the red color of the Chinese nationalist flag to see if it's the RED color that causes it to be transformed to transparent? Have you tried to remove white sun symbol within the blue area to see if helps. Just to try to locate WHAT is causing the problem.

Maybe trying the Chinese nationalist to get the symbol from another country to see if the graphics is causing the problem or maybe the file itself or the file NAME?

Similar with the German flag. Try to alter the size for all flags slightly to see if it could help. I guess there are many other angles to attack this problem, but sooner or later you would find the workaround or the cause of the problem.

Often you will be surprised to learn what caused the problem in the first place. Often there is something logical, but not very easy to see. Other times you have to fight an inherent bug in the development software and only a workaround can solve the problem.

This is part of the fun being a computer programmer. [;)] Every day is a search for needles in the haystack. I guess my home is crowded with thousands of found needles already. I know they will come handy one day. [:D]

Thanks for the advice. I have tried half of those already. At this point it is time to work on different problem(s) and see if not thinking about it helps.

Usually I find the needles by sitting on them. My butt is like a pincushion.

[Shannon V. OKeets]

I solved the problem with the flags using a complete kludge. For the German flag it appears it wanted a percentage instead of a pixel count so I gave it 100 to get the whole flag. But then it was still offset wrong within the frame so I gave it a -5 pixel offset and it now lines up perfectly. For the Nationalist flag (which didn't show the red color) I assumed it was something to do with transparency though setting the bitmap's transparency to false had no effect. I finally wiorked out that it wanted the 4 pixels in the lower left corner of the bitmap to denote the transparency color (the normal is a single pixel) and cured that problem. Total work around - no logic to it at all. None of the other 7 flags need any of these 'adjustments'. So it goes. (My personal variation on that phrase is "Slow it goes").

Here is what I expect to be the final opening screen for the game.

1 - Clicking on the German flag or the Start New Game label goes to the Start New Game Screen.

2 - Clicking on any of the 18 tutorial headings goes to that tutorial.

3 - Clicking on a Partial Map Scenario radio button brings up the list of saved games for that scenario in the list to the right of the radio button list. And similarly for a Full Map Scenario radio button. Double clicking on a file from either file list loads/restores the saved game.

The intent of the design here is to let players start a game/tutorial as fast as possible.

I am revising the Start New Game form and should have it done a a couple of days.

I also starting working out the structure for the tutorial presentations and have it partially coded. I'll try to finish one of the tutorials (in draft) this week for your review.

[wfzimmerman]

ORIGINAL: Shannon V. OKeets

I solved the problem with the flags using a complete kludge. For the German flag it appears it wanted a percentage instead of a pixel count so I gave it 100 to get the whole flag. But then it was still offset wrong within the frame so I gave it a -5 pixel offset and it now lines up perfectly. For the Nationalist flag (which didn't show the red color) I assumed it was something to do with transparency though setting the bitmap's transparency to false had no effect. I finally wiorked out that it wanted the 4 pixels in the lower left corner of the bitmap to denote the transparency color (the normal is a single pixel) and cured that problem. Total work around - no logic to it at all. None of the other 7 flags need any of these 'adjustments'. So it goes. (My personal variation on that phrase is "Slow it goes").

Here is what I expect to be the final opening screen for the game.

1 - Clicking on the German flag or the Start New Game label goes to the Start New Game Screen.

2 - Clicking on any of the 18 tutorial headings goes to that tutorial.

3 - Clicking on a Partial Map Scenario radio button brings up the list of saved games for that scenario in the list to the right of the radio button list. And similarly for a Full Map Scenario radio button. Double clicking on a file from either file list loads/restores the saved game.

The intent of the design here is to let players start a game/tutorial as fast as possible.

I am revising the Start New Game form and should have it done a a couple of days.

I also starting working out the structure for the tutorial presentations and have it partially coded. I'll try to finish one of the tutorials (in draft) this week for your review.

Steve, this looks very clean and I like the overall look of it very much.

But I just don't get it -- why do you need the flags at all? They send misleading information. They make it appear that Tutorials are related to US, the Soviet player is in the middle of restore a saved game -- but can any one else look at tutorials or restore a saved game?

I just don't think the flags are doing anything to help. They actively confuse the issues.

[Froonp]

I just don't think the flags are doing anything to help. They actively confuse the issues.

I for one do not find them confusing.
They remind me of the cover of some games, where you see all the flags of all the belligerents.
They are decorum.
They also introduce you to the color / flag matches that are used in the game, well, I'm not sure it is designed this way, but I feel it this way. US are green, Russians are brown, etc..., which not an automatic color / country matchings.

[Neilster]

They remind me of the cover of some games, where you see all the flags of all the belligerents.
They are decorum.
They also introduce you to the color / flag matches that are used in the game, well, I'm not sure it is designed this way, but I feel it this way. US are green, Russians are brown, etc..., which not an automatic color / country matchings.

The box cover, a splash screen or during the intro is the appropriate place to show these flags. Not here. With respect, the positives you describe are fairly feeble. They could be arrived at in another way or would become obvious during play anyway.

I think reviewers will punish this section of the game if we persist with this confusing flag display. If some pictures are required to spice this page up, I can think of some suggestions that would actually help convey what is going on. They could be done by the graphic artist or someone who is experienced in this sort of thing.

1. Start a new game: A newspaper placard with the giant headline "IT'S WAR", "WAR DECLARED" or "POLAND INVADED".

2. Tutorials: A picture of maps on a table with books or of a war college or a motarboard to denote formal military study.

3. Restore a saved game: A picture of a floppy disk and perhaps an arrow to denote that info is leaving said disk (possibly animated and pointing to a PC)

Good games (and even not so good ones) spend a lot of effort on these atmosphere building aspects. It helps to immerse the player and give them a feel for the era, as well as providing a visual clue to the options. Given the excellent attention to detail on this project so far, I think it would be a major mistake to skimp on this stuff. It will look unprofessional and the beginning of the game is a bad time to make a poor impression.

Cheers, Neilster

[Shannon V. OKeets]

ORIGINAL: Neilster

They remind me of the cover of some games, where you see all the flags of all the belligerents.
They are decorum.
They also introduce you to the color / flag matches that are used in the game, well, I'm not sure it is designed this way, but I feel it this way. US are green, Russians are brown, etc..., which not an automatic color / country matchings.

The box cover, a splash screen or during the intro is the appropriate place to show these flags. Not here. With respect, the positives you describe are fairly feeble. They could be arrived at in another way or would become obvious during play anyway.

I think reviewers will punish this section of the game if we persist with this confusing flag display. If some pictures are required to spice this page up, I can think of some suggestions that would actually help convey what is going on. They could be done by the graphic artist or someone who is experienced in this sort of thing.

1. Start a new game: A newspaper placard with the giant headline "IT'S WAR", "WAR DECLARED" or "POLAND INVADED".

2. Tutorials: A picture of maps on a table with books or of a war college or a motarboard to denote formal military study.

3. Restore a saved game: A picture of a floppy disk and perhaps an arrow to denote that info is leaving said disk (possibly animated and pointing to a PC)

Good games (and even not so good ones) spend a lot of effort on these atmosphere building aspects. It helps to immerse the player and give them a feel for the era, as well as providing a visual clue to the options. Given the excellent attention to detail on this project so far, I think it would be a major mistake to skimp on this stuff. It will look unprofessional and the beginning of the game is a bad time to make a poor impression.

Cheers, Neilster

I do not expect to use Splash screens at this point. There will be 2 or 3 splash screens when installing the program, though I might reduce that to just 1 and supplement it with pages from the tutorials. Why spend time and effort on something the player will probably see only once? And the tutorials will contan screen shots which, accompanied by text, will be much more interesting to view while you are waiting for the install process to do its thing.

This is the first screen that appears when a player clicks on MWIF.EXE and it pops up in a millisecond.

The purpose of this screen with its 3 sections is very clear - indeed, the player should be expecting to see something like this. Expanding on the purpose with additional graphics doesn't seem necessary. There are a dozen or so 'hints' that pop up if the player moves the cursor over a label or flag, etc., and they make it clear that the flags are merely decoration - though clicking on the German flag will start a new game.

I have 3 reasons for displaying the flags here:

1 - For decoration (adding a little bit of color)

2 - To familiarize the player with the relationship between the flags and the background colors that will be used throughout the game (subtle and not very important)

3 - To lay some ground work for the next screen which I expect to be somewhat confusing: the flags demark separate decision areas of the screen and are merely decorative (this is a stretch, but every little bit helps)

What I am doing with this screen's graphics is setting expectations. The Opening screen is simple; the Start New Game screen is not. I hope to have the latter done some time today for you-all to critique.

[wfzimmerman]

ORIGINAL: Shannon V. OKeets


I have 3 reasons for displaying the flags here:

1 - For decoration (adding a little bit of color)

2 - To familiarize the player with the relationship between the flags and the background colors that will be used throughout the game (subtle and not very important)

3 - To lay some ground work for the next screen which I expect to be somewhat confusing: the flags demark separate decision areas of the screen and are merely decorative (this is a stretch, but every little bit helps)

What I am doing with this screen's graphics is setting expectations. The Opening screen is simple; the Start New Game screen is not. I hope to have the latter done some time today for you-all to critique.

i don't feel the need for more splash graphics, but then I am a command line type.

i do feel strongly that the flags are a) not serving useful purposes (as you indicate above) and b) are actively setting confusing expectations.

I would suggest something more along the lines of a simple MWIF banner at the top of the page.

[Shannon V. OKeets]

ORIGINAL: wfzimmerman

ORIGINAL: Shannon V. OKeets


I have 3 reasons for displaying the flags here:

1 - For decoration (adding a little bit of color)

2 - To familiarize the player with the relationship between the flags and the background colors that will be used throughout the game (subtle and not very important)

3 - To lay some ground work for the next screen which I expect to be somewhat confusing: the flags demark separate decision areas of the screen and are merely decorative (this is a stretch, but every little bit helps)

What I am doing with this screen's graphics is setting expectations. The Opening screen is simple; the Start New Game screen is not. I hope to have the latter done some time today for you-all to critique.

i don't feel the need for more splash graphics, but then I am a command line type.

i do feel strongly that the flags are a) not serving useful purposes (as you indicate above) and b) are actively setting confusing expectations.

I would suggest something more along the lines of a simple MWIF banner at the top of the page.

Oh yeah, the title for the screen is missing - it will appear as part of the top border.

[Shannon V. OKeets]

ORIGINAL: wfzimmerman

ORIGINAL: Shannon V. OKeets
I have 3 reasons for displaying the flags here:

1 - For decoration (adding a little bit of color)

2 - To familiarize the player with the relationship between the flags and the background colors that will be used throughout the game (subtle and not very important)

3 - To lay some ground work for the next screen which I expect to be somewhat confusing: the flags demark separate decision areas of the screen and are merely decorative (this is a stretch, but every little bit helps)

What I am doing with this screen's graphics is setting expectations. The Opening screen is simple; the Start New Game screen is not. I hope to have the latter done some time today for you-all to critique.

i don't feel the need for more splash graphics, but then I am a command line type.

i do feel strongly that the flags are a) not serving useful purposes (as you indicate above) and b) are actively setting confusing expectations.

I would suggest something more along the lines of a simple MWIF banner at the top of the page.

Well, I have just given the flags a purpose for the Start New Game screen and I'll do the same thing for the Opening screen flags.

This is, when you place the cursor over a flag it brings up a 'hint' that says "Click on the flag for more help with <this section>". In other words, they are links to context sensitive help that describes the section. For the opening screen, the 3 sections are pretty obvious, though there are some odd bits that I would like to have the opportunity to explain if the player asks for help (navigating the tutorials; the directory structure for saved games).

[Shannon V. OKeets]

I continue to work on the first few screens, bringing them into line with the new player interface design/theme. I have decided on most of the Pascal components I will be using and I am pretty happy with them at this point. It takes a lot of effort to get everything converted though. Many of the CWIF components were circa Windows 3.1 and 3.2. That means I have to go through manually and change each element/component on each of the 104 forms. When I try to use canned procedures to do groups of them simultaneously, I run into a lot of trouble.

Here is the opening screen (again), the only change I have made since I took this screen shot is to the color for the Search text from yellow to dark green.

[Shannon V. OKeets]

And here is the Start New Game screen. It is still a work in progress, though 80% done. For example, the Chinese and French section haven't been converted to the nice backgrounds.

I replaced a bunch of CheckBoxes with OK buttons and redid the tabs for the Scenarios and Optional Rules. The tabs are all hand coded and they do not jump around (as some of the packaged components do). When you click on a tab, the color of the tab changes to show that it is selected and the panel underneath the tab headings changes. So, click on Waking Giant and the text description for Waking Giant replaces the text description for Lebensraum. Likewise, clicking on Production Rules, replaces the CheckBox list for Additional units with the corresponding one for Production Rules.

I have updated the optional rule lists to reflect the changes from earlier this month. You can see 2 new additons: Rough seas and Oil tankers.

[wosung]

Hi Seve,

it's very pedagogical to connect the flags to the colors of the counters.

But there are also disadvantages:

1. The colors of the counters are in fact quite common for wargamers, not only Wiffers. So for them it's unnecessary.

2. With 5 sections in the Start New Game screen you get all the needed info at once. No clickfeast. That's a good thing. But up to 6-7 different colors and the the flags do make it confusing. That's a bad thing.

BTW: Sorry, but with the colors I associate, eehrr, an Italian ice-cream shop. I just wonder what's the German gray cream is made of...[;)]

3.WW2 Atmosphere is missing. Perhaps the screen could look like an old ear-dogged WW2 document with old type-letter fonts? Plus generally they did have a taste for dynamic looking fonts then from Germany to China.

Regards

[Shannon V. OKeets]

ORIGINAL: wosung
Hi Seve,

it's very pedagogical to connect the flags to the colors of the counters.

But there are also disadvantages:

1. The colors of the counters are in fact quite common for wargamers, not only Wiffers. So for them it's unnecessary.

2. With 5 sections in the Start New Game screen you get all the needed info at once. No clickfeast. That's a good thing. But up to 6-7 different colors and the the flags do make it confusing. That's a bad thing.

BTW: Sorry, but with the colors I associate, eehrr, an Italian ice-cream shop. I just wonder what's the German gray cream is made of...[;)]

3.WW2 Atmosphere is missing. Perhaps the screen could look like an old ear-dogged WW2 document with old type-letter fonts? Plus generally they did have a taste for dynamic looking fonts then from Germany to China.

Regards

Yes, but ...

I have two goals in presenting text to the player: (1) communicate information, and (2) historical ambience. For instance, I have decided to go with Verdana 10 point virtually everywhere when presenting game information because Verdana has more space between letters and 10 points is about as small as I can go without upsetting some players. That decision is purely based on wanting to communicate information clearly so the player isn't hassled trying to figure out what is happening.

While the second goal gets lower priority, it isn't irrelevant. I expect to use banner headlines for announcing major events (war, aligning countries, capturing important cities, etc.). For that we will go for imagry (e.g., fonts and colors) appropriate to the era. The first place a player will see them is while the game loads the map data, unit data, bitmaps, and otherwise prepares for setting up whichever scenario the player has chosen.

We have done nothing for the historical images so far - it is something to be added in later for the most part. For the Start New Game form, I have considered using a uniform (or only 2 colors) but I believe that will make the distinction between the 5 sections/steps more difficult to identify. Anyway, don't you like gellati?

[Missouri_Rebel]

Woah, woah, woah! Wait a minute. The colors look excellent to me. The screen looks a lot better than I have seen it any time before. I guess the only thing I have as a nitpick are the dividing lines between the tabs above the Japanese area. They should be solid lines from top to bottom and nonexistent on the sides. Other than that, very pleasing.

mo_reb

[Shannon V. OKeets]

ORIGINAL: Missouri_Rebel
Woah, woah, woah! Wait a minute. The colors look excellent to me. The screen looks a lot better than I have seen it any time before. I guess the only thing I have as a nitpick are the dividing lines between the tabs above the Japanese area. They should be solid lines from top to bottom and nonexistent on the sides. Other than that, very pleasing.

mo_reb

Thanks.

The entire tab line is one component and it has 'incomplete' vertical separators. It also insists on placing an extra separator at the end. Those weirdnesses are annoying, but too small to spend any time correcting.

[c92nichj]

I agree with a lot of other posters. Adding the flags and all the colours make teh start screen look unprofessional and totally lack a WWII feeling.
It is a shame as the map looks so beautiful that the start screen shall look like this.

I suggest that it is handed over to the graphics artist to create a nice and clean screen.

[Shannon V. OKeets]

ORIGINAL: c92nichj
I agree with a lot of other posters. Adding the flags and all the colours make teh start screen look unprofessional and totally lack a WWII feeling.
It is a shame as the map looks so beautiful that the start screen shall look like this.

I suggest that it is handed over to the graphics artist to create a nice and clean screen.

My brother, Lars, has been a graphics artist for all his life and he tells one story (of many similar) that serves as a core principle to me when designing the game.

Lars was given a photograph of a bull (just the head) by his client and asked to make an artistic rendering of the head appropriate for an advertising campaign (Bull's Head Beer, I believe). So he takes a day or two and draws a slightly changed version (about 8 inches square) - one that would be appropriate for stencilling on the side of cans, T-shirts, and the zillion other places the marketing types will use it. His draft drawing is reviewed by a committee of 10 guys who generate a list of over 100 points where they think he should make 'improvements'. And this is for a drawing that is esentially the same as the picture!

I purposely post my work in progress to receive comments and suggestions for I do believe that many eyes and minds will make the resulting product vastly superior to what I would achieve in isolation. At the same time I do not delude myself that I can please everyone. Some people will say A with great conviction and other swill say Not A with equal conviction.

As for turning all the interface design details over to someone else to do, I am afraid you are stuck with just me. I use the graphics artist to add graphic elements but the decisions are ultimately mine. That is how it has to be, since an extensive knowledge of WIF mechanics are required, and also years of experience building game/user/player interfaces. Beautiful, but disfunctional, might be all right in a one night lover, but fails completely in a game design.

I still adhere to the logic that I posted previously: historical ambience is a poor communication medium when a lot of important information needs to be presented. Instead, it should be used in select places, where the message will not be lost in the 'clutter' of the historical additions.

[Zorachus99]

ORIGINAL: c92nichj

I agree with a lot of other posters. Adding the flags and all the colours make teh start screen look unprofessional and totally lack a WWII feeling.
It is a shame as the map looks so beautiful that the start screen shall look like this.

I suggest that it is handed over to the graphics artist to create a nice and clean screen.

I honestly thought you were jesting ... [X(]

IMO, It looks good, far better than CWIF. Additionally, if these styles can be used on the forms that you use throughout the game, even better. It will be very intuitive what major power you are making decision for; land combat, air combat, production, etc...

[Shannon V. OKeets]

ORIGINAL: Zorachus99

ORIGINAL: c92nichj
I agree with a lot of other posters. Adding the flags and all the colours make teh start screen look unprofessional and totally lack a WWII feeling.
It is a shame as the map looks so beautiful that the start screen shall look like this.

I suggest that it is handed over to the graphics artist to create a nice and clean screen.

I honestly thought you were jesting ... [X(]

IMO, It looks good, far better than CWIF. Additionally, if these styles can be used on the forms that you use throughout the game, even better. It will be very intuitive what major power you are making decision for; land combat, air combat, production, etc...

The background colors change whenever the major power "on move" changes. However, the effect during game play is rather minor. For example, it does not affect the detailed or global maps. Also, only one of the background colors and one flag appear at a time, so the overall visual impact is reduced. Each of the information forms and little popup question forms uses the current major power background color/texture - which is mainly where you will see these colors.

I think of the opening screen and start new game form as sort of an overture - an introduction and taste of what follows. Though I do understand c92nichj point and believe that it has some validity - just not enough for me to do a complete redesign of these 2 forms.