GUI

[StefanP.MUC]

I just took a quick look at CEGUI, but you seem to have to read a lot of docs to get into it. Is there an easy way of editing the style the GUI to directly see it in game without coding to much (a bit is OK)? Like adding some PNGs to style the buttons without having to modify the while layout files or quick resizing. So that it is directly visible in game after restarting it. Maybe I could then mock up some GUI concepts that could be used for a start (I find the CEGUI default GUI ugly, the rest of the game already looks so good ).

[andrewbuck]

Have a look in Media/gui/Opendungeons.layout, that is the file where the button sizes and positions are read from (it is a big XML file, make sure you use something with syntax highlighting if you edit it to make it easier). The style of the buttons is the TaharezLook buttons in CEGUI. They have a .tga file you caould edit to change how they look, or you could learn how to make a new one as well. I'm not sure how the system works in detail but there should be some docs somewhere.

-Buck

[Skorpio]

Oh yes, some mockups would be great. The basic OGRE GUI really looks boring.

[svenskmand]

blablub if you have a look at this then look at the mock up I have made previously before starting, you can find it here. I would also like to discuss any design choices in the layout with you Do you have GoogleTalk? Then I can send you my mail so we can discuss it

[StefanP.MUC]

OK, I slowly get the hang on this CEGUI styling. I picked out all relevant files, named them OpenDungeons.* and converted the tga image to png (for easier editing).
Now let's see, if I get something changed.

I'm not registered on Google, nope. But I first want to be technically good enough to be able to actually get something done, before I care about the goal.

[svenskmand]

Ok maybe you can be me a quick overview of how it is done when you have gotten the basics. CEGUI was also the show stopper for me when I made the mock-up :S

[StefanP.MUC]

In the .tga file (best to convert it to *.png, for example with Paint.NET on Windows - CEGUI can also handle the more modern PNG ) there are all the sprites that are used (a lot of small pictures side by side).

The .imageset file contains all the raw pixel coordinates of the sprites in this tga/png file (something like the MouseCurser sprite in the given png is at "x=20, y=50" or something).

The .lookandfeel file contains all thebasic elements that are available (how does a button look - size, colors, image, ...).

The .layout file contains teh actual layout for the game (where is which button).

They are all in XML format (except the png/tga, of course ).

edit: So it works like: the game loads the layout file, the layout file looks in lookandfeel, this looks in imageset (if there is one), this looks in the picture (if there is one).

[StefanP.MUC]

Sorry for doublepost, but this is no addition to the explanation before.

For writing the gui completly from scratch I'm still to unexperienced with CEGUI (and their documentation is not the best, IMHO).

But I make progess on identifying the GUI parts. I think I will drop out everything that isn't used now ingame and modify the existing stuff.

Right now I managed to make the GUI background transparent (by modifing the GUI sprites). That was always an annoying big fat black blob on the screen. Adding transparency makes you see a lot more. The buttons themselves stay solid, of course, only the background container is half-transparent.

[andrewbuck]

Cool, just so you know I think the CEGUI engine also has transparency support built into it as well so I think things can have normal opaque pictures for the look and feel thing that you are editing, but then be "told" to be transparent, either in the XML file or the game engine itself. I am not sure on the details of this though, I just know they have at leas some support for it.

Also, double posts are fine, I do it all the time on the forums here.

-Buck

[StefanP.MUC]

The color values are going like AARRGGBB. With AA = alpha. But this doesn't work if you display a picture - it only works with non-picture elements. At least I didn't figure out how. But I will look again.

Nevertheless, now I renamed all the example style elements to "OD/(elements)" and the global layout names to "OpenDungeons" and dropped out almost all non-used elements from the XML files. If needed later they can easily be re-added and properly named/adjusted from the example file one by one. This makes the whole GUI designing a lot more comfortable, since you won't be overwhelmed with unneeded things.

[StefanP.MUC]

Ah, found it out. It's quite simple... Need to add a <Colours> option in the LookNFeel file. I thought it needs to be done in the layout file.

[andrewbuck]

Just to let you know, there is also a CEGUI layout editor which will let you click/drag the buttons to move them around, resize them, etc. You can find it on the CEGUI website. Just a warning though, last time I tried it (which is what I used to make the current layout file) the editor was very buggy so your mileage may vary. That was probably a year ago though so maybe its improved since then.

-Buck

[StefanP.MUC]

I had the layout editor, it was very strange. I'll try it again, now that I know a lot more about the file strcutures. What works very good is the Imageset editor.

[andrewbuck]

Yeah, its almost better to start with the raw files themselves so you see how the system works and then work with the editors. I didn't know there was an imageset editor, good to hear that it works better than the layout editor.

-Buck

[StefanP.MUC]

OK, now I have sorted out all the needed files and gave them good names. Only the two in teh source hardcoded strings are left. They shoudl be changed after I'm done with the GUI cleanup, than these two can be cut out, too. The games runs with them (I deleted all other files from the gui folder - no need to have them always distributed).

But the actual GUI mock up I'm doing tomorow, not now.

[svenskmand]

blablub did you see my mock up, do you have any comments, suggestions or corrections?

[StefanP.MUC]

Yeah, I took a look on it. It is a good start, but I think it cuts out to much of the game screen. For example the Gold, mana and territory values can be a small line in the bottom controls. "Small" meaning here "a clear symbol (e.g cold coin) followed by the value text. This would give some centimeters to the whole visible gameplay.

And I think the map should also be in the bottom. Maybe were now the log text box is (I assume the log textbox won't be in the final game? Later we should have a proper info system with hidable and deletable notices and a switch on/off level goals overview).

And yay, my GUI still works with 0.4.7. That's great. Now I'll try to rearrange some of the stuff and see how much visible game space I can gain without cutting out buttons and usability.

[StefanP.MUC]

Oh, and by the way:
Where exactly came the fonts into the game? In the Scheme file there are 3 fonts defined (the same everytime, but with different sized).
But they are never referenced. CEGUI require at least one font, otherwise the game crashes. But I can't seem to find, what does indicate which font is used in what situation. The game runs and looks the same if I only take one of the three font sizes.

I think maybe, that using a pixelstyle font is better anyway for a game. They are more easy to create and handle.

[StefanP.MUC]

Status Update:
I'm getting to something. The basic structure is like this:

• RootWindow (the whole screen, from 0,0 to RESX,RESY)
  
  • FrameWindow (a half-transparent and movable container for all the buttons - you don't like it on the bottom? move it to the top! )
    
    • the Gold/mana/territory numbers (made less high and in a clear row)
    • the Tab controls
    • The log text box

Now I'm going to adjust the buttons within the frame etc. And I think after that. it's time for a screenshot. I'll then also upload the files, maybe we can ship it with 0.4.7 final.
The coders will need to change two thing (two hardcoded strings in "void main()" ) to fit the new names.

[svenskmand]

Yeah, I took a look on it. It is a good start, but I think it cuts out to much of the game screen. For example the Gold, mana and territory values can be a small line in the bottom controls. "Small" meaning here "a clear symbol (e.g cold coin) followed by the value text. This would give some centimeters to the whole visible gameplay.

Do you think it looks boring when there is only a small number and then a symbol indicating mana or gold, like they do in StarCraft?

[StefanP.MUC]

I don't know how it is in StarCraft, but my feeling about good controls is: The fewer you take notice of them (without losing the overview) the better they are. The style of the number display can be fancy of course (background color, nice font, nice icons, even a tooltip is possible with CEGUI).

Of course, we can later discuss the specifics or split things up etc., but for now I think ANYTHING is better than the current GUI. And the best start is IMHO to group the controls in a classical strategy game-like "all-in-one control bar", so that the player can focus on the actual "creature theatre".

[svenskmand]

I don't know how it is in StarCraft, but my feeling about good controls is: The fewer you take notice of them (without losing the overview) the better they are. The style of the number display can be fancy of course (background color, nice font, nice icons, even a tooltip is possible with CEGUI).

Yes they should of course work well and not be annoying

Of course, we can later discuss the specifics or split things up etc., but for now I think ANYTHING is better than the current GUI. And the best start is IMHO to group the controls in a classical strategy game-like "all-in-one control bar", so that the player can focus on the actual "creature theatre".

I would like to see a quick mock-up of what your want to make, it does not need to take long to make, just some boxes that show where panels should be and what should be in them.

[oln]

I don't know how it is in StarCraft, but my feeling about good controls is: The fewer you take notice of them (without losing the overview) the better they are. The style of the number display can be fancy of course (background color, nice font, nice icons, even a tooltip is possible with CEGUI).

Of course, we can later discuss the specifics or split things up etc., but for now I think ANYTHING is better than the current GUI. And the best start is IMHO to group the controls in a classical strategy game-like "all-in-one control bar", so that the player can focus on the actual "creature theatre".

Really looking forward to seing a screenshot

[StefanP.MUC]

OK, here it is. I attached the gui files in a 7zip archive. These are the only files needed for the gui. So all other files from "Media\gui" don't need to be shipped. The game is playable with them.

But to fully make them coherent, now for the coders: in OpenDungeons.scheme I made two comments:
<!-- in game sourcecode: Rename the loaded scheme file to "OpenDungeonsSkin.scheme" and then rename this here file, too-->
<!-- in game sourcecode: Mouse button needs renaming to "OpenDungeons", then above line and the TaharezLook.imageset can be deleted -->
- The source code in main() (MapEditor.cpp) loads TaharezLookSkin.scheme (line 95/96). Rename both "TaharezLook" to "OpenDungeons".
- The code that refreshes the gold/mana/territoy numbers makes a linebreak. Since I made the boxes less high the linebreak should be removed (currently you simply won't see the whole text).

What's next on the todolist?

• Add icons for gold, mana, territory
• discuss the tab order/content
• find/create a good font
• create an imageset that fits OD

edit: I got the number boxes now with the option for an icon (displaying the mouse cursor for now, until we have better icons). But I think this is something for 0.4.8.

gui.7z

The gui files

(34.22 KiB) Downloaded 387 times

Screenshot of first mockup of the new gui.

[svenskmand]

Looks good, only problem is that the GUI uses of most if the screen around 33 % of the screen, I think 25 % is the limit on how much screen we can take before it gets annoying.

Also I think the gold, mana an territory counters should be placed at the top of the screen, but not on a panel.