GUI

Re: GUI

Postby svenskmand » 08 Mar 2011, 23:22

Stefan could you try these icons out at some point so I can see them? You could determine the order of the layers yourself right?
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 » 09 Mar 2011, 08:04

At least one content image would be good to try your buttons out. The problem with your buttons currently is, that every content png needs it's own background (with my current pictures the whole buttons would be mostly transparent). That's why I struggled to put them already in 0.4.7.

There are three possibilities to do the buttons:
(1) The current way (3 layers: frame including bg -> content -> effect).
This is the most easy way with minimum possible work for artists (only need to create raw content after the button design is defined globally).

(2) Your suggested way, as I understand it (3 layers: bg including content -> frame -> effect).
If the bg changes sometimes, then ALL content images need to be redrawn. Maximum possible work.

(3) A mixed way (4 layers: bg -> content -> frame -> effect).
Solves the recreation problem of (2). Sligthly more work as (1), but also a small advantage to (1) by having the possibility to change frame and bg independently. Most intuitive one (works like real picture frames).

I vote for (1) or (3).
StefanP.MUC
 

Re: GUI

Postby svenskmand » 09 Mar 2011, 11:38

StefanP.MUC {l Wrote}:(1) The current way (3 layers: frame including bg -> content -> effect).
This is the most easy way with minimum possible work for artists (only need to create raw content after the button design is defined globally).

My suggested way is this one, with one exception. You have the layers background, then content on top, then effects on top. I want content, then background on top, then effects on top. It is only a small change. This way I can apply shines, shadows and other effects to the content without having to modify each content icon manually.

I hope you understand it now, else we can talk about it on Google Talk or Skype. Else I will draw you a picture showing it.
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 » 09 Mar 2011, 11:45

How will you be able to see the content if the background is on top of the content?
StefanP.MUC
 

Re: GUI

Postby svenskmand » 09 Mar 2011, 11:47

The background is just the normalButton I made, which has a transparent hole (it might contain a shadow or shine or other effect) in it where the actual icons/contents fits.

This layering:
ButtonDisabled/ButtonPressed/ButtonHover 100%
ButtonNormal 100%
RawIcons 100%

I assume when you say background you mean the ButtonNormal image right?
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 » 09 Mar 2011, 12:01

Ah, now I get it... I still don't really see the "big advantage" though, but this works, yes. For this I need to switch three lines or so in the looknfeel file.
When you got a proper content image for testing, I'll send you the modified files so that you can see it.
StefanP.MUC
 

Re: GUI

Postby svenskmand » 09 Mar 2011, 12:21

I will upload a content image in 2 sec :)

Edit: here you go.
Attachments
ODIcon.png
ODIcon.png (3.85 KiB) Viewed 13875 times
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 MCMic » 09 Mar 2011, 12:27

you should do "background->content->frame->effect", no?
User avatar
MCMic
 
Posts: 723
Joined: 05 Jan 2010, 17:40

Re: GUI

Postby StefanP.MUC » 09 Mar 2011, 13:24

svenskmand, here are the new files. I only changed the quarters button to your style. Looks good so far, I think.
Attachments
gui_test.7z
(34.09 KiB) Downloaded 361 times
StefanP.MUC
 

Re: GUI

Postby svenskmand » 09 Mar 2011, 14:46

Looks good :) I will work on some icons :)
Attachments
screenshot_3.png
screenshot_2.png
screenshot_1.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 Bodsda » 09 Mar 2011, 14:50

That GUI seems to take up an extremely large amount of screen real estate.

I think the bottom right should be the same height as the bottom left buttonbox (exclude the tab space)

Bottom left and bottom right could loose 50% height I think - The top right could go down by about 25% and the width of the top left could be shrunk by 50%

Just my thoughts - excellent work by the way

Bodsda
User avatar
Bodsda
OD Moderator
 
Posts: 195
Joined: 18 Feb 2010, 08:19

Re: GUI

Postby StefanP.MUC » 09 Mar 2011, 15:27

The GUI takes only at 800x600 so much space. Normally you have at least 1024x768 or more. I can't make it smaller because it would look way to tiny on resolutions like 1920xsomething. But maybe some of the size problems can be addressed after the following is in the code:
CEGUI::Renderer::setDisplaySize(const Size& size)
CEGUI::System::notifyDisplaySizeChanged (const Size& new_size)

Oh, and svenskmand, are you sure you don't want background and content of the buttons to be separate? BG->content->frame->effect? If there's some decision later on that the bg needs changing, it would be a huge work to change it for all buttons separatly. It's no problem to add a fourth layer to the CEGUI looknfeel. The shadow effects can still be on the content image.
StefanP.MUC
 

Re: GUI

Postby svenskmand » 09 Mar 2011, 18:54

StefanP.MUC {l Wrote}:Oh, and svenskmand, are you sure you don't want background and content of the buttons to be separate? BG->content->frame->effect? If there's some decision later on that the bg needs changing, it would be a huge work to change it for all buttons separatly. It's no problem to add a fourth layer to the CEGUI looknfeel. The shadow effects can still be on the content image.

What do you exactly mean by BG->content->frame->effect?

I assume content are the icons for each spell, creature and room and effect are the hover, pushed and disabled effects. But what is BG and frame?
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 » 09 Mar 2011, 19:24

I assume bg is the background of the button, and frame is the square around it.
User avatar
oln
 
Posts: 1020
Joined: 26 Oct 2010, 22:16
Location: Norway

Re: GUI

Postby svenskmand » 09 Mar 2011, 19:43

Ok but the way I have made the button frame and ODIcon you would never be able to the se background, unless you make some parts of the icon transparent. Will we need or want to do that?

I agree that it gives greater flexibility, so that might be a good argument to do it. It will still work with the way I do it now, so if you want then just do it that way.
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 » 09 Mar 2011, 19:56

Let's make an easy example: Take your ButtonNormal (the frame). It's inner is transparent. You need to fill these inner 50x50 (or whatever) pixels so that the underlaying tab control isn't visible. Do you want to draw this square for each button?
The actual images (puppet for dojo, bed/house for quarters, ...) won't take 60x60 pixel and cover the whole button. With your current ButtonNormal every button content picture needs to have it's own background.
I find this highly inefficient.

Your ODIcon has a black-gray fading background. You have to draw this for ALL buttons. And if the button design should be changed in the future we had to change ALL buttons (and not only the ONE "global" background picture).
That's why I suggested the two ways:
Either put background (bg) and frame in one layer and put the content on top or the other alternative: background -> content -> frame.
StefanP.MUC
 

Re: GUI

Postby StefanP.MUC » 09 Mar 2011, 20:07

Here's a quick sketch of what I mean. If you put BG and content together in one single png you have to draw (or change) the bg for every button. If you separate them you save a lot of work, because you need to make the bg at bottom only once.
Attachments
sketch.png
sketch.png (9.22 KiB) Viewed 13820 times
StefanP.MUC
 

Re: GUI

Postby oln » 09 Mar 2011, 20:24

I agree with Stefan's approach here. It sounds like a sensible way to do this.
User avatar
oln
 
Posts: 1020
Joined: 26 Oct 2010, 22:16
Location: Norway

Re: GUI

Postby svenskmand » 09 Mar 2011, 21:45

Ok then make 4 layers: background, content, frame, effects, as you say, that is a good idea. This is also how I have made it in the svg file.
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 » 09 Mar 2011, 21:52

Ok, I'll do that tommorow.
StefanP.MUC
 

Re: GUI

Postby StefanP.MUC » 10 Mar 2011, 09:49

So, I just pushed the GUI update to SVN. I'll also update the documentation draft post about it.

What's new? The buttons now have 4 layers:
Background -> Content -> Frame -> Effect
I also included svenskmands frame and effect (background is still modified Skorpio button).

I also made some changes to the internal properties of the buttons: If this should be needed somewhere in the future I can very easily add (it's only one line) the possbility to define separate frames and backgrounds for each button in the layout file. This means if no background/frame is specified the default bg/frame is displayed, but we could then for example easily change the dojo button background without changing all the other backgrounds. But this feature is fully optional and I don't think we'll need it in the near future, that's why I didn't include it this time.

So, now it's finally time for content. ;)
StefanP.MUC
 

Re: GUI

Postby oln » 10 Mar 2011, 12:12

StefanP.MUC {l Wrote}:The GUI takes only at 800x600 so much space. Normally you have at least 1024x768 or more. I can't make it smaller because it would look way to tiny on resolutions like 1920xsomething. But maybe some of the size problems can be addressed after the following is in the code:
CEGUI::Renderer::setDisplaySize(const Size& size)
CEGUI::System::notifyDisplaySizeChanged (const Size& new_size)

The notifyDisplaySize is already in the code and has been for quite a while.
User avatar
oln
 
Posts: 1020
Joined: 26 Oct 2010, 22:16
Location: Norway

Re: GUI

Postby StefanP.MUC » 10 Mar 2011, 12:20

Ok, didn't found it. Then it seems that it doesn't help with aspect ratios...
StefanP.MUC
 

Re: GUI

Postby svenskmand » 10 Mar 2011, 21:12

Here is the background layer, then you can use that :) You may need to change the color of the icons though, as they are black now :)

If you have some ideas for some icons you want, then I can try and make some quick mock-ups :)
Attachments
ButtonBackground.png
ButtonBackground.png (2.4 KiB) Viewed 13766 times
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 » 11 Mar 2011, 08:03

Cool, I'll integrate it. :)

Currently we should have Icons for all used buttons:
Quarters, Dojo, Forge, Treasury, Start/Host (don't know how it should be called) and quit. Oh, and a new disabled effect (but this is low piority, since we currently don't make use of disabling GUI elements).

About the Icon design: I think the icons should be good recognizable pictograms - clean outlined pictures of what is behind the button. Not much of shading, lightning and coloring (max 3 colors I'd say, the colors should be the same for all icons - the silverish in your OD test button looks good).

edit. what I noticed about your button design: Maybe it's only my subjective impression, but the current coloring could make some users think the buttons are disabled (the gray-black style looks somehow like the classical "disabled grey"). Maybe this needs some color adjustments to clearly separate between the "first impression" of disabled and enable.
StefanP.MUC
 

Who is online

Users browsing this forum: No registered users and 1 guest