FreeGameDev

I moved the top bar up a bit, it was down because I originally planned the counters to be big. This is the final look

The bar in the right side is used for notifications, say you get a new creature then a little block will fall down starting at the top of the bar and stack on top of the last notification you have received. I will make the notification blocks later, we also need to decide which types we should have of these.

The top bar I planned on having some info text displayed on, i.e. information you can get by "mouse overing" some element in the game, say a treasure room to see the amount of gold in it, or the dojo/library/forge/etc. to see how many workspaces are left in that room.

Here is a closeup of the counter icons.

I will be making the notification icons today. Any comments to the stuff already done?

Looks good so far.

Looks good, waiting to see it ingame for further comments.

Nice, I'll see to it tomorrow.

Cool I cannot wait

I assume you will need it cut up, so I will try and do that tonight. You use a icon size of 61x61 pixels right? (for the small icons, like cannon, forge and the likes)

60x60 for the buttons. Everything else is not fixed until now.
But there's only the icons for the counters left that need some fixed size. The window frames and backgrounds (for general boxes like the minimap, e.g.) and all this stuff can have any size, they are automatically scaled and sized by CEGUI internally (depending on the window/button size).

Ok, I would export the mini-map into one png, I do not know how to cut it up, and if it will help. But the panels I can cut up for you.

Edit: How about if we just export the mini-map in allot of different sizes then the game can select the one matching the current resolution best?

This is how the GUI looks internally (it's really only small tiles, very simple). If you provide complete elements (like the minimap or the tab control) as single pictures, I can cut out the tiles myself and replace the current ones with the new once.

Ok if you list the resulutions you want I can cut it up for you. It is already cut in the svg-file , except for the mini-map

The GUI is here, along with the icons, and an initial attempt at a cursor. Let me know which resolutions you need.

I might start with these resolutions for 4:3
800x600
1024x768
1280x960
1600x1200

and these for 16:9
1280x720
1360x768
1600x900
1920x1080

which are the most common ones.

We don't have different resolution GUIs. CEGUI does the scaling/tiling internally based on the given size in the XML files. I'll have a look later today at the svgs and get the tiles out of it.

I can make the tile if you tell me the sizes or should I make them so the icons are 60x60 and the orther stuff have sizes that are relative to that?

The tiles shouldn't be to big (especially the frame tiles). The tile image I posted is the original size that is used by CEGUI currently (they look tiny but give big buttons and windows ingame). The GUI tiles don't need to be bigger. Quite the contary even, they should be just as big to hold the minimum pixels needed to store all graphical "information" needed to display a button.

Examples:
- if a button should only have a one-color background, then a tile with exactly ONE pixel would be enough (well, that'd be overdoing the "minimum-storage-way" to much - I'd do something like a 5x5 pixel area for that ).
- If we want a round frame border, the the tile should be just as big/small so that you can insert a roundish tile (7x7 pixels or something with antialiasing/transparency).

The 9 tiny redish tiles in the posted tile picture are currently used to create the counters, minimap and tab controls - that's all that is needed.

Yes yes, I know what is needed, I just wanted the sizes. But I am going to use size to pixel ratios from the buttons, which you wanted to be 60x60, and then export the rest in sizes that match that size to pixel ratio. I will do the export later today, and upload it here, then you can do the CEGUI magic.

Do people think that these ratios of the elements compared to each other are good? If so I will cut it up so Stefan can begin his work

That looks fine to me. Where would the information about the current goals go? (They don't have to be a text box like they are currently either.)

The basic style looks good. I'm not sure if I like the very wide container at the bottom. Will there be other things in there than the buttons? But this has nothing to do with the tiling, so no need to decide it now.
And are the "pipes" at top and right of the screen intended to appear ingame?

I like that the system tab is gone.

By the way, while I just saw the mana counter, is there a special reason why there's a difference indicator (+/-) only for mana currently in the game? Shouldn't at least gold have this, too? Didn't saw this in any TODO, either.

Oln: The goals should be in a menu that you can select in the menu that the small computer on the top right will bring up.
Stefan: Yes there will be more stuff in the bottom, like showing how many creatures are working, and how many are fighting etc. I will make those panels later. The + in the mana is intended to show the mana regeneration rate. Yes the pipes are to appear in game, why was that not clear? It is part of the GUI :S

Here is the GUI cut up , I removed an effect from the pipes, as that was in the way for doing the tiling. Let me know if you miss it

The icons from the counters need to be separate. And the counter background should be tiled, too (top, bottom, left, right, corners). The tab control background shouldn't be so big (the effect on it is almost not visible anyways).

And I'm not sure if I can use the minimap tile as it is now. But I have to look on what's the best way to use non-rectangle controls with CEGUI first .

I can make the counters tiled, but I do not see why we should change the background of the panel? Why should the size matter at all? CEGUI will resize it anyway, and for higher resolutions it will look nicer as the background is actually of high resolution, rater than being a ugly rescaled version of a low resolution version.

I wanted to avoid having huge CEGUI imagesets for two reasons: performance and usability.
Best practice would be to have all nine tiles of a control (left, top, right, bottom, center, four corners) to have all the same size (and minimum size). This gives best performance (for the code) and usability (for the GUI designer).

I do not see there is any usability involved in having the center piece being large, and I seriously doubt we will suffer any performance penalty for it, try it out, here they are

I have added the different backgrounds for the other tabs too

Next up is the hover and other effects for the mini-map controls and the tabs. Also before I can make the fill in the menu panel we need to decide what to put there. I will make a list of what I think should be there, then we can use that as a basis for a discussion of what we want there

Edit: I forgot to make all coordinates integers, which helps in the rastering of the elements they should now look better and be easier to mark out in CEGUI

Edit^2: I have now marked all tiles by small 1x1 red squares.

Edit^3: Here is a version with no interpolation, so the red squares actually fit on a 1x1 pixel, I would suggest to use this to mark the positions in the image in CEGUI and then use the other one as the actual texture. Let me know how that works

What about hover and selected effects of the tab control buttons? Should they be tiled, too? Or is colored text enough? I could also simply add color overlay effect with CEGUI.

Setting up the new UI is some fiddly work. Have to change all the basic control properties...