GUI Overhaul (the Visual Side)

Production of artwork for the game by regular contributors takes place here.

Moderator: Forum Moderators

Post Reply
User avatar
Eleazar
Retired Terrain Art Director
Posts: 2481
Joined: July 16th, 2004, 1:47 am
Location: US Midwest
Contact:

GUI Overhaul (the Visual Side)

Post by Eleazar »

* Skeleton Crew has been plugging away working on the guts of the GUI-- so it is now easier to change things.
* I've also gotten my first mobile touch device, love it, and think much of Wesnoth's future lies in tablets and other portable devices-- since they will become a bigger part of the computer pie, and Wesnoth potentially works well in that format.
* And while the visual quality has steadily increased in pretty much every other area, the GUI is starting to look thread-bear and neglected.

So i've been thinking over various GUI-related things, and wanted to start getting ideas and concepts out.


Click V.S. Poke
Touch device resolution is quickly increasing so that TINYGUI isn't necessarily needed to make everything fit on the screen at once. However, that doesn't mean the interface is a useable touch interface. Big, blunt fingers need a much larger target than mouse pointers. My original thought was to use screen resolution to indicate weather touch-size or mouse-sized button/etc. should be used. But that doesn't take into account the radically different sizes (and pixel densities) that are now available. For instance a tablet and a phone (or even a 10" tablet and a 7" tablet) might have the same pixel dimensions, but the size of useable buttons would vary greatly.

Obviously making optimal interfaces for all these possible screens would be impractical, though the following approach get's close enough. Have a switch, TOUCHGUI, (either preferences, or in the compile) that makes the buttons as big as they can be, regardless of the pixels size. This isn't a true pixel independent interface (and thus not as hard to do), since interface elements that don't need to be clicked/poked, can still have a fixed pixel size. Alternatively we can just make the buttons as big as they can be at minimum resolution (800x480), and hope that is big enough for high density small displays.




Style
West has a very good start here. The general direction i envision: richer, darker, and less transparency. Transparency can have it's place, but it has more of a techy, sci-fi flavor. It really doesn't belong (for instance) on our main screen-- not with the more authentic style i'd like to have.

The Main Screen Background
I love maps (no really-- i have spent probably thousands of hours of my life making maps) but the map on our main-screen really present Wesnoth as well as it could (especially if you don't speak English). I use a story screen in my example. I'm not pushing that particular image-- in fact, i think it would be best to commission new main screen images, and/or to hold a contest-- once we get positioning nailed down better.


Functionality
A few points in our GUI are sorely lacking in functionality, especially the Add-on Dialog. Hopefully can move to something more like this.


Mock-Ups
Depending on how we approach things, these are mockups for screens smaller than 1024x768, or for TOUCHGUI screens. At larger resolutions (not shown) the main menu might detach from the sides of the screen, as it does now-- i need to think about it.

The tips don't really fit on touch scaled screens below 1024x768, solution: get rid of them at those sizes.

:arrow: In fact we could reasonably remove them from the main screen altogether-- I've always found tips more interesting when they are on load screens, when you otherwise have nothing new to look at.

Moving Forward
I don't have as much time for Wesnoth as i did this summer, but i plan to put the bulk of it (besides what it takes to maintain terrain) for a while into GUI. As is fitting with the immensity of this task, once some planning groundwork is laid it should be tackled piece by piece.


EDIT: without the tips, "HELP" really needs to be added to the main menu, which adds to an already bloated number of options. It would be good to consolidate some of those....
Attachments
Note that all parts are not equally polished
Note that all parts are not equally polished
Note that all parts are not equally polished
Note that all parts are not equally polished
Feel free to PM me if you start a new terrain oriented thread. It's easy for me to miss them among all the other art threads.
-> What i might be working on
Attempting Lucidity
User avatar
LordBob
Portrait Director
Posts: 1309
Joined: December 8th, 2008, 8:18 pm
Location: Lille, France
Contact:

Re: GUI Overhaul (the Visual Side)

Post by LordBob »

I've been meaning to reply to this for some time now, but kept delaying.

One question : beyond a visual overhaul of the GUI, what exactly are you aiming at ? Are you refering to
* a platform-based differenciation of the GUI's functionnalities and appearance
* or a unique GUI that would be shared and equally usable on both pc and touch devices ?

Incidentally, the mock-ups look pretty much like the title screen of the existing iPhone App. Wouldn't it mean that what you're refering to already exists ?


Anyway, I agree that it's something we're in dire need of.
Style-wise, the gaming industry has produced great stuff with parchment (take for instance the GUI of HoMM V). It's a path we might want to explore, especially if we're trying to change the logo for something that has a more calligraphic / handwritten style
User avatar
Eleazar
Retired Terrain Art Director
Posts: 2481
Joined: July 16th, 2004, 1:47 am
Location: US Midwest
Contact:

Re: GUI Overhaul (the Visual Side)

Post by Eleazar »

LordBob wrote:One question : beyond a visual overhaul of the GUI, what exactly are you aiming at ? Are you refering to
* a platform-based differenciation of the GUI's functionnalities and appearance
* or a unique GUI that would be shared and equally usable on both pc and touch devices ?
I'm not exactly sure of the distinction you are making, but i think i'm talking about some of both.
LordBob wrote:Incidentally, the mock-ups look pretty much like the title screen of the existing iPhone App. Wouldn't it mean that what you're refering to already exists ?
The iphone app doesn't use GUI2, and is presumably not adjustable to arbitrary resolutions. But yes, if Wesnoth is going to be decent on a touch screen, it will need to look more like the iphone app and less like a shrunk down version of the normal screen.

LordBob wrote:Style-wise, the gaming industry has produced great stuff with parchment (take for instance the GUI of HoMM V). It's a path we might want to explore, especially if we're trying to change the logo for something that has a more calligraphic / handwritten style
Parchment = bright GUI. Wesnoth has traditionally had a dark GUI, and it think dark generally frames our game better. Not to mention that it will be much easier/elegant to incrementally to upgrade to a new, but still dark style than to upgrade to parchment backgrounds (against which nearly all text colors would be unreadable, for instance)
Feel free to PM me if you start a new terrain oriented thread. It's easy for me to miss them among all the other art threads.
-> What i might be working on
Attempting Lucidity
Post Reply