GUI

Re: GUI

Postby svenskmand » 16 Apr 2011, 02:17

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.
Attachments
GUISketch.png
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: GUI

Postby svenskmand » 16 Apr 2011, 02:24

Here is a closeup of the counter icons.
Attachments
ManaGoldTerritory.png
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: GUI

Postby svenskmand » 16 Apr 2011, 13:28

I will be making the notification icons today. Any comments to the stuff already done?
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: GUI

Postby oln » 16 Apr 2011, 14:28

Looks good so far.
User avatar
oln
 
Posts: 1020
Joined: 26 Oct 2010, 22:16
Location: Norway

Re: GUI

Postby MCMic » 17 Apr 2011, 14:46

Looks good, waiting to see it ingame for further comments.
User avatar
MCMic
 
Posts: 723
Joined: 05 Jan 2010, 17:40

Re: GUI

Postby StefanP.MUC » 17 Apr 2011, 17:11

Nice, I'll see to it tomorrow.
StefanP.MUC
 

Re: GUI

Postby svenskmand » 17 Apr 2011, 18:43

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)
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: GUI

Postby StefanP.MUC » 17 Apr 2011, 18:52

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).
StefanP.MUC
 

Re: GUI

Postby svenskmand » 17 Apr 2011, 18:55

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?
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: GUI

Postby StefanP.MUC » 17 Apr 2011, 19:10

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.
OpenDungeons.png
StefanP.MUC
 

Re: GUI

Postby svenskmand » 17 Apr 2011, 19:11

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.
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: GUI

Postby StefanP.MUC » 18 Apr 2011, 09:22

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

Re: GUI

Postby svenskmand » 18 Apr 2011, 09:38

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?
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: GUI

Postby StefanP.MUC » 18 Apr 2011, 10:06

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

Re: GUI

Postby svenskmand » 18 Apr 2011, 10:50

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.
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: GUI

Postby svenskmand » 18 Apr 2011, 17:17

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 :)
Attachments
Ratios.png
Please ignore the white lines you see in the menu, they are artifacts caused by a bug in Inkscape.
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: GUI

Postby oln » 18 Apr 2011, 17:19

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.)
User avatar
oln
 
Posts: 1020
Joined: 26 Oct 2010, 22:16
Location: Norway

Re: GUI

Postby StefanP.MUC » 18 Apr 2011, 17:36

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

Re: GUI

Postby svenskmand » 18 Apr 2011, 18:06

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 :)
Attachments
GUI_Cut_Up.png
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: GUI

Postby StefanP.MUC » 18 Apr 2011, 18:47

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

Re: GUI

Postby svenskmand » 18 Apr 2011, 18:49

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.
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: GUI

Postby StefanP.MUC » 18 Apr 2011, 19:29

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).
StefanP.MUC
 

Re: GUI

Postby svenskmand » 18 Apr 2011, 19:33

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 :)
Attachments
GUI_Cut_Up.png
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: GUI

Postby svenskmand » 18 Apr 2011, 20:27

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 :)
Attachments
GUI_Cut_Up.png
No interpolation.
GUI_Cut_Up.png
Now with integer coordinates and red squares as marks :)
Jamendo.com - The best music store on the net, uses CC licenses.
User avatar
svenskmand
OD Moderator
 
Posts: 1850
Joined: 09 Dec 2009, 00:07
Location: Denmark

Re: GUI

Postby StefanP.MUC » 19 Apr 2011, 11:24

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... :D
StefanP.MUC
 

Who is online

Users browsing this forum: No registered users and 1 guest