Currently Online

Latest Posts

Topic: [GUI] - GUI retouch

fraang

Topic Opener
Joined: 2010-02-15, 13:13
Posts: 239
Ranking
Widelands-Forum-Junkie
Posted at: 2011-04-09, 20:35

I want to introduce a "little" project of mine which I have had in my mind for quite some time now and I wanted to do.

I want to retouch the whole game gui (menus, windows, icons, ...) to make it more pretty and consistent (the look and feel). This include a guid document for GUI widgets and icons (like the Tango project one) which defines a color palette (containing the color codes for RGB and HTML notation or Blender color code) and other guidlines like all icons have to be in front view without perspective. This will be part of this palette: http://wl.widelands.org/forum/topic/620/?page=5#post-4007

I want to reuse every single idea and work but refactored and with improved quality. They also should fit well in relation to the other content and be consitent with existing content with the same meaning or function (e.g. all buttons should look similar).

This will surely take a lot of time and so I would implement it in pieces - release after release.

The roadmap so is: 1) GUI widgets (window background, buttons, textboxes, ...) and Icons 2) Menu backgrounds and coat of arms 3) Portraits (Yes also portraits because they are part of the "Dialog (Ok it is more like a monolog) GUI and presents the player game information)

If anyone is interessted in helping: Help is appreciated! face-grin.png

This an idea for the window background (I want to add the window decoration (ornaments) of the current window background.): GUI retouch 1

Ideas and critiques are welcome!


Top Quote
fraang

Topic Opener
Joined: 2010-02-15, 13:13
Posts: 239
Ranking
Widelands-Forum-Junkie
Posted at: 2011-04-09, 23:21

Some progress: GUI retouch 2


Top Quote
SirVer

Joined: 2009-02-19, 15:18
Posts: 1445
Ranking
One Elder of Players
Location: Germany - Munich
Posted at: 2011-04-10, 12:12

I applaud this undertaking! The intial work looks very promising. I have not so fond of the lavender colored scrollbars though. And I would suggest trying to out sticking with only wood or only marble. If you want to go crazy all out, you can design a UI that fits with each race and the players tribe determine the UI theme. Maybe barbarians: wood, empire: marble and atlanteans: mmmh... face-smile.png


Top Quote
Venatrix
Avatar
Joined: 2010-10-05, 20:31
Posts: 449
Ranking
Tribe Member
Location: Germany
Posted at: 2011-04-10, 13:24

As I understand it, it’s the first attempt for the background. The scrollbars didn’t change, right? But the background looks nice and the ornaments fit.

I just don’t really like your new icons for saving and exiting. For example I think they’re too big for the buttons, the door is because of the wooden texture relatively hard to see and I don’t like violet for the floppy, especially with the green arrow… (By the way, nobody saves the game on floppies nowadays. face-wink.png )

SirVer’s ideas of making different UIs for every tribe sounds very nice, though. face-grin.png


Two is the oddest prime.

Top Quote
fraang

Topic Opener
Joined: 2010-02-15, 13:13
Posts: 239
Ranking
Widelands-Forum-Junkie
Posted at: 2011-04-10, 16:03

I made the button more blueish instead of that lavender color and improved the checkbox. I have made new graphics for the buttons but they are only sharper versions of the old style so they are not that different.

One thing i want to address is the little mess with the gui graphics:

There are 5 button graphics and a few graphics for the checkboxes. Some checkboxes use other graphics than the other checkboxes. Could we make it that they use only two graphics. One for the unchecked and one for the checked version? Maybe we should consider a highlight version as well.

GUI retouch 3

The different GUIs for the different tribes would be cool but will have to make some source code changes as well.

EDIT: BTW we should introduce a naming sheme like:

gui_win_border_t.png gui_win_border_b.png gui_win_border_l.png gui_win_border_r.png gui_win_backgr.png gui_btn_0.png gui_btn_1.png gui_btn_2.png gui_btn_3.png gui_btn_4.png gui_chb_checked.png gui_chb_unchecked.png gui_plt_backgr.png

EDIT 2: WIP: Message icons - New message (Done) - Read message (Change to lighter brown to make it better seeable) - Archived message (To do)

Screen shot of current status: Message icons

Edited: 2011-04-10, 22:55

Top Quote
SirVer

Joined: 2009-02-19, 15:18
Posts: 1445
Ranking
One Elder of Players
Location: Germany - Munich
Posted at: 2011-04-11, 11:03

The source code changes are not a problem. I suggest doing this in a branch on launchpad and we introduce the changes one at a time. About the messages menu: I expect there will be a redesign of this window soonish. Kristin wanted to propose a mechanism to filter for messages of different categories; I am also not to fond of the subject -> topic approach and tend to get list of the listbox that shows messages and instead turn to a message box that is more like S2 was. So we should not use the current message box as a benchmark.


Top Quote
fraang

Topic Opener
Joined: 2010-02-15, 13:13
Posts: 239
Ranking
Widelands-Forum-Junkie
Posted at: 2011-04-11, 20:20

Ok for the window background i would suggest something like that:

gui_win_border_t.png 256 x 16 pixels \*
gui_win_border_b.png 256 x 16 pixels
gui_win_border_l.png 16 x 224 pixels \*\*
gui_win_border_r.png 16 x 224 pixels
gui_win_backgr.png 224 x 224 pixels \*\*\*

\* A potence of 4 is better for OpenGL rendering because the GUI is a bunch of texured planes directed to the viewport with 0 on the z axis. This avoids ugly seams on the edges.
\*\* 224 = 256 - (16 + 16); 16 for each border; To get an quadratic area of 256 x 256 pixels.
\*\*\* 224 pixels to get an quadratic area of 256 x 256 pixels.

Is it possible to get all the window background stuff into one graphics with the dimension of 256 x 256 pixels. That would improve the load time and improve the "maintenace".


Top Quote
SirVer

Joined: 2009-02-19, 15:18
Posts: 1445
Ranking
One Elder of Players
Location: Germany - Munich
Posted at: 2011-04-12, 12:56

I guess it should be possible. Obviously it must be defined what happens with bigger windows... are the tiles streched or repeated mainly.


Top Quote
peterjohnhartman

Joined: 2011-03-17, 21:57
Posts: 1
Ranking
Just found this site
Posted at: 2011-04-12, 13:40

SirVer wrote: I guess it should be possible. Obviously it must be defined what happens with bigger windows... are the tiles streched or repeated mainly.

On this note: Please keep the redesign with an eye towards small screen devices. In these cases, it'd be nice to have a 1pixel (or no) border, fairly small (or no) superfluous icons/bars/nobs, etc.


Top Quote
ixprefect

Joined: 2009-02-27, 14:28
Posts: 367
Ranking
Tribe Member
Posted at: 2011-04-12, 15:16

Maybe barbarians: wood, empire: marble and atlanteans: mmmh...

Spideryarn? face-wink.png


Top Quote