GUI styling guidelines and overview

[StefanP.MUC]

This is the general overview about all the GUI designing. It includes names, sizes, coloring, todo lists and any other information that is needed for the designers to create the GUI and for the programmers to call the GUI from the source code.

To do list

• GUI internals - cleaning up the basic imageset
• Graphics - design basic button designs
• Graphics - design basic window elements (tooltip design, window borders, ...)
• Graphics - design a new mouse cursor

Overview about the GUI Buttons design
Picture type: PNG
Picture size: 60x60 pixels square, this size must all button tiles have that are described in the following.

There has to be exactly one for each of these basic elements:

• ButtonBackground - the baseplate for all buttons. It should have a solid background (no transparency)
• ButtonFrame - the frame for all buttons. It should have a transparent background (no transparency) + a solid border design
• ButtonHoverEffect - Should have a transparent bg. The effect itself should have around 50% transparency
• ButtonDisabledEffect - Should have a transparent bg. The effect itself should have around 50% transparency
• ButtonPushedEffect - Should have a transparent bg. The effect itself should have around 50% transparency

Content images:
For every button in our MainTabControl we need one content image. Its background needs to be 100% transparent (not visible). The icon itself should at max have 10% transparency so that it is clearly visible and understandable.

File overview
The following lists all the files in the gui folder and what they contain.

• bluehigh.ttf - Font used by the GUI
• bluehighway.font - CEGUI font definitions
• FreeMono.ttf - Font used by OGRE for the console
• ogrefonts.fontdef - OGRE font definitons
• OpenDungeons.imageset - Defines the location and size of the basic GUI tiles in OpenDungeons.png (windows borders, tooltips, ...)
• OpenDungeonsIcons.imageset - Defines the location and size of the Icon tiles in OpenDungeonsIcons.png (buttons, counters, ...)
• OpenDungeons.layout - Defines properties of all predefined GUI elements (buttons, counters, mini map, ...)
• OpenDungeons.looknfeel - Defines the control types with their properties used by the .layout file
• OpenDungeons.scheme - Defines GUI name and what files are loaded (fonts, looknfeel, imagesets).

Note: The png files of the imagesets must all have the exactly same size (even if there's then a lot of empty space).

GUI naming scheme
These names and types are used in the source code to call a specific GUI element.

{l Code}: {l Select All Code}

Root                            //Main Window Container
   Root/GoldDisplay            //StaticText for Gold
   Root/ManaDisplay            //StaticText for Mana
   Root/TerritoryDisplay       //StaticText for Territory
   Root/MiniMap                //StaticImage for MiniMap
   Root/MessagesDisplayWindow  //StaticText log box
   Root/MainTabControl         //Main Tab container
      //The Tabs
      Root/MainTabControl/Rooms
         //ImageButtons
         Root/MainTabControl/Rooms/QuartersButton    //Quarters
         Root/MainTabControl/Rooms/ForgeButton       //Forge
         Root/MainTabControl/Rooms/DojoButton        //Dojo
         Root/MainTabControl/Rooms/TreasuryButton    //Treasury
      Root/MainTabControl/Traps
         Root/MainTabControl/Traps/CannonButton      //Cannon
      Root/MainTabControl/Spells
      Root/MainTabControl/Creatures
      Root/MainTabControl/Combat
      Root/MainTabControl/System
         //ImageButtons
         Root/MainTabControl/System/HostButton       //Host Server
         Root/MainTabControl/System/QuitButton       //Quit Game

MainMenu
   MainMenu/WelcomeMessage                           //STaticText
   MainMenu/StartNewGameButton                      //Button
   MainMenu/QuitButton                              //Button


[svenskmand]

I wil try to get my buttons to fit this. Now they are a bit non-compatible due to may excessive use of layers.

[StefanP.MUC]

What do you mean with "layers" exactly? One button image should be one png file.

[svenskmand]

When I made the buttons in Inkscape I used allot of layers on top of each other. Like any other drawing program

[StefanP.MUC]

But if you save them as png you will have only one. The layers in CEGUI are layers within the looknfeel file defining what and how many pngs are displayed over another. They have nothing to do with the layers in the original picture "source" files.

[svenskmand]

I know but the way I made the effects depend on the ordering of the layers in the source. Which gives some problems now. I will try and change so it looks correct.

[StefanP.MUC]

The GUI really shouldn't be to complex. A clean nice look, with some not-too-flashy effects is enough.

[oln]

What icons have you made svenskmand?

[svenskmand]

I have not made any actual icon, I have made some buttons, with these effects.

By the way in case you missed it I got the Windows installer finished in WiX, it appears to work flawless. Except that we need to tell the game where to write screenshots in the installer at some point, which I guess should be manageable.

[oln]

That's nice work svenksmand
Also, I might have some icon graphics coming, one of my friends might be making some.

[StefanP.MUC]

I included the naming scheme as well here and renamed the topic title. I will collect all information about the GUI (both, designing and coding part) in the first post. I deleted the other post with the naming schemes. Maybe this can be a sticky topic then so that it doesn't get lost.

[svenskmand]

Also remember to document how the technical aspects of the GUI in the wiki.

[andrewbuck]

The wiki documentation should probably be left alone until the system has been worked out here. There is no point in having two sets of docs while we are working on it, but the wiki does organize it much better so it should eventually get copied over there.

-Buck

[svenskmand]

The wiki is always a work in progress, so I see no reason not to work on the documentation there instead of other places.

[Bodsda]

I think the wiki should only include working documentation, unless stated in very big letters that it is work in progress. Theres no point in detailing how to do half of something, or how to sort of get it working.

Bodsda

[svenskmand]

We try to write that when it applies, but mostly you make something (documentation) which then breaks later, and needs updating. Also the wiki is a good place to keep all these howtos/instructions instead of in some guys computer (that might disappear), it also enables sharing and collaboration.