Logo


ForumGraphic Development ⇒ [GUI] - GUI retouch
Author Message
fraang
Permalink Posted at: 2011-04-09 20:35:42
Joined: 2010-02-15 13:13:01
Posts: 141
Ranking
At home in WL-forums

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!

fraang
Permalink Posted at: 2011-04-09 23:21:16
Joined: 2010-02-15 13:13:01
Posts: 141
Ranking
At home in WL-forums

Some progress: GUI retouch 2

SirVer
Permalink Posted at: 2011-04-10 12:12:36
Joined: 2009-02-19 15:18:03
Posts: 797
Ranking
One Elder of Players

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

Venatrix
Permalink Posted at: 2011-04-10 13:24:55
Joined: 2010-10-05 20:31:15
Posts: 299
Ranking
Tribe Member
Location: Germany

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.

fraang
Permalink Posted at: 2011-04-10 16:03:07
Joined: 2010-02-15 13:13:01
Posts: 141
Ranking
At home in WL-forums

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:38
SirVer
Permalink Posted at: 2011-04-11 11:03:24
Joined: 2009-02-19 15:18:03
Posts: 797
Ranking
One Elder of Players

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.

fraang
Permalink Posted at: 2011-04-11 20:20:35
Joined: 2010-02-15 13:13:01
Posts: 141
Ranking
At home in WL-forums
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".
SirVer
Permalink Posted at: 2011-04-12 12:56:24
Joined: 2009-02-19 15:18:03
Posts: 797
Ranking
One Elder of Players

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

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

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.

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

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

Spideryarn? face-wink.png



Search

Donation

Help us to pay our Server!
(: Consider a donation :)

Login

Most recently posted


Technical Help
Get minizip into Ubuntu
by borim 50 hours ago

Technical Help
Constructionsite stops...
by fuchur 72 hours ago

Playing Widelands
how move to another is...
by SirVer 104 hours ago

Graphic Development
[GUI] Cursors
by Nasenbaer 121 hours ago

[Deutsch] - Spielerforum
Zufallskarten
by Nasenbaer 124 hours ago