Game Look and Feel

Discussion among members of the development team.

Moderator: Forum Moderators

ettin
Lord of Glamdrol
Posts: 369
Joined: August 17th, 2003, 2:05 pm
Contact:

Game Look and Feel

Post by ettin »

Some ideas in order to improve the GUI.

Button set. It has been difficult for me, but finally I have done a new button style for Wesnoth. Right now, only tutorial-button.bmp and tutorial-button-pressed.bmp are available (you can test it using tutorial-button.bmp as tutorial-button-active.bmp too). If you like it, I can do the complete set (with *-button-active.bmp). A preview:
Image

Menus. New menus are a need, specially the menu-borders. I have done a new border and background, similar to this rightside menu.

Fonts. Fonts are better now with Bitstream Vera, but what about anti-aliasing... is it possible to do something like that with SDL_ttf?
And in my opinion, righside menu fonts are too big (and need more left-margin).

Campaign map. It is possible to change this:
Image
by this (from the kde crystal icons):
Image

Screen moves. At dialogs and turn start, the games moves the map position toward the leader. At some point this is annoying.

PS. Any tutorial or document about SDL will be appreciated.
Dave
Founding Developer
Posts: 7071
Joined: August 17th, 2003, 5:07 am
Location: Seattle
Contact:

Post by Dave »

I like the buttons ettin. Yes go ahead and make a full set. I think they look good. We might like to have them slightly high-lighted when moused-over though. Would it be possible to make some kind of Gimp script that allows you to automatically generate buttons?

I think that the right side currently looks good. I don't see any reason to change that.

Menus could look better, but I do think they look reasonable at the moment. Problem with using images to do menus, is that menus can vary in size, so we'd have to scale the images or something.

Yes we can use the cross instead of the box on the map.

I can imagine the scrolling getting annoying, however what do you suggest as an alternative? I can easily enough make it 'warp' to the location instead of scrolling, but I can imagine this being confusing. In the latest development release, you can hold down shift and it will scroll at 4x the speed.

Perhaps it is time for a 'preferences' area. I can think of the following preferences users can set:

- full screen/windowed
- warp to locations vs scroll
- 'turbo' mode: acts as if 'shift' is pressed by default, and will slow down to normal speed if you hold down shift

Would it be possible for you to do some 'tick' boxes? An empty box for if an option is unticked, and a ticked box for if an option is ticked?

David
fmunoz
Founding Artist
Posts: 1469
Joined: August 17th, 2003, 10:04 am
Location: Spain
Contact:

Post by fmunoz »

IMHO Buttons should have ttf letters to aid in better internationalization. but yours looks very good.
The dot is a quick couloring over the original plain and boring red dot from Dave. maybe it'll be better use something more than handwritten crosses ... or a segmented line (but I'n not sure if implement this is prioritary)
Dave have a new right side image with more defined borders (I'm not sure if its used now).
SDL tutorials in
http://www.libsdl.org
http://andrew.textux.com/tutorials/tut1/tutorial1.html
http://www.gamedeveloper.net/gdn/index. ... ce&rid=216
http://www.gamedeveloper.net/gdn/index. ... e&rid=1978
Dave
Founding Developer
Posts: 7071
Joined: August 17th, 2003, 5:07 am
Location: Seattle
Contact:

Post by Dave »

I agree that buttons with ttf would be better, as they would ease internationalization, as well as easing new button generation just for English.

However the main problem is that buttons have to be different sizes, according to the size of the text on them. I guess we could stretch the images programatically. Any other suggestions?

Sorry, I forgot to give links to SDL documentation, thanks fmunoz. I just use the SDL documentation on the main SDL web site.

I don't know if SDL_ttf supports anti-aliased fonts, but honestly, I think that anti-aliased fonts are far over-rated anyhow.

I haven't used your new right side yet, fmunoz, because it contains a section for 'items', and I haven't implemented anything which displays which items a unit has yet.

David
ettin
Lord of Glamdrol
Posts: 369
Joined: August 17th, 2003, 2:05 pm
Contact:

Post by ettin »

IMHO Buttons should have ttf letters to aid in better internationalization
These buttons use Bitstream Vera (bold) font, which is a TTF.
I think that the right side currently looks good. I don't see any reason to change that.
The main reason is to have a similar style everywhere.
Problem with using images to do menus, is that menus can vary in size, so we'd have to scale the images or something.
Thats the reason why I want some sdl documentation.
Is it possible to simply have a repeated background image?
Although if you look many other games... they use "fixed" menu sizes.
Would it be possible for you to do some 'tick' boxes? An empty box for if an option is unticked, and a ticked box for if an option is ticked?
Yes.

Thanks fmunoz ;)
ettin
Lord of Glamdrol
Posts: 369
Joined: August 17th, 2003, 2:05 pm
Contact:

Post by ettin »

We might like to have them slightly high-lighted when moused-over though.
Image

BMP's here.
Dave
Founding Developer
Posts: 7071
Joined: August 17th, 2003, 5:07 am
Location: Seattle
Contact:

Post by Dave »

ettin wrote:
IMHO Buttons should have ttf letters to aid in better internationalization
These buttons use Bitstream Vera (bold) font, which is a TTF.
What fmunoz and I meant is that buttons should be generated in-game using SDL_ttf and should not be static images. The problem with having them as static images is, (1) every time a new button has to be added, a new image has to be generated, which is awkward, (2) to internationalize the game, you need to create a whole new set of buttons.

The problem with generating them in-game is that it is likely hard to come up with an algorithm that will generate just as good looking buttons.
ettin wrote:
I think that the right side currently looks good. I don't see any reason to change that.
The main reason is to have a similar style everywhere.
Well, the right side currently has the same style as the title screen and the edges around the map.
ettin wrote:
Problem with using images to do menus, is that menus can vary in size, so we'd have to scale the images or something.
Thats the reason why I want some sdl documentation.
Is it possible to simply have a repeated background image?
Well, SDL is a very low-level library. Graphically all it has is the capacity to load images, and then blit images onto each other. It doesn't have any menus, buttons etc, I wrote the code to control the menus and buttons etc all myself.

Yes I think I could manage programming a repeated background image :-)

David
ettin
Lord of Glamdrol
Posts: 369
Joined: August 17th, 2003, 2:05 pm
Contact:

Post by ettin »

What fmunoz and I meant is that buttons should be generated in-game using SDL_ttf and should not be static images. The problem with having them as static images is, (1) every time a new button has to be added, a new image has to be generated, which is awkward, (2) to internationalize the game, you need to create a whole new set of buttons.
The problem with generating them in-game is that it is likely hard to come up with an algorithm that will generate just as good looking buttons.
Then (if possible) we can use the button image (without text) and only generate the text.
It's possible to do an on-click effect with sdl? I mean moving the text 1 pixel left and 1 pixel down.
Dave
Founding Developer
Posts: 7071
Joined: August 17th, 2003, 5:07 am
Location: Seattle
Contact:

Post by Dave »

ettin wrote:
What fmunoz and I meant is that buttons should be generated in-game using SDL_ttf and should not be static images. The problem with having them as static images is, (1) every time a new button has to be added, a new image has to be generated, which is awkward, (2) to internationalize the game, you need to create a whole new set of buttons.
The problem with generating them in-game is that it is likely hard to come up with an algorithm that will generate just as good looking buttons.
Then (if possible) we can use the button image (without text) and only generate the text.
It's possible to do an on-click effect with sdl? I mean moving the text 1 pixel left and 1 pixel down.
The main problem with this approach is that the text can vary in size, and so you don't know what size to make the image.

The main solution I can see is to scale the image in-game.

Which means I have some scaling routines to write :-)

Yes we can move the text 1 pixel left (I'd have thought right might be better), and 1 pixel down.

Umm...basically I can do anything deterministic you want. Well anything reasonable anyway :-)

David
ettin
Lord of Glamdrol
Posts: 369
Joined: August 17th, 2003, 2:05 pm
Contact:

Post by ettin »

The main problem with this approach is that the text can vary in size, and so you don't know what size to make the image.
For most buttons, I think that is better to use a fixed size.
I dont see any reason to resize all buttons... lots of GUI's use fixed size buttons, unless the text is really long.
For example, I prefer "Ok" button and "Cancel" button with the same size.
Dave
Founding Developer
Posts: 7071
Joined: August 17th, 2003, 5:07 am
Location: Seattle
Contact:

Post by Dave »

ettin wrote: I dont see any reason to resize all buttons... lots of GUI's use fixed size buttons, unless the text is really long.
For example, I prefer "Ok" button and "Cancel" button with the same size.
Good point. How about we make the 'normal' size, and if the text is too long, then and only then the button is expanded?

Can you provide me with a button that is your preferred size, with no text on it?

David
ettin
Lord of Glamdrol
Posts: 369
Joined: August 17th, 2003, 2:05 pm
Contact:

Post by ettin »

To define the default size is difficult, but after looking many screenshots from other games... i think 115x25 could be a good size.

A good trick is the the use of short names... for example "Load" instead of "Load Scenario", or "Campaign" instead of "New Campaign".

Another idea that could ease in-game scaling, would be the use of 3 different sizes, for example: 115x25 (default), 130x25, and 150x25.
Can you provide me with a button that is your preferred size, with no text on it?
Image
BMP's here (default-* .bmp)
miyo
Posts: 2201
Joined: August 19th, 2003, 4:28 pm
Location: Finland

Re: Game Look and Feel

Post by miyo »

ettin wrote: Campaign map. It is possible to change this:
Image
by this (from the kde crystal icons):
Image
Can we replace this X with two swords crossed over (therefore forming an X).

- Miyo
miyo
Posts: 2201
Joined: August 19th, 2003, 4:28 pm
Location: Finland

Post by miyo »

I think it would look better if text on right-side "toolbar" (minimap, turn info, selected unit info, etc.) would have few pixels more on left margin.

- Miyo
Dave
Founding Developer
Posts: 7071
Joined: August 17th, 2003, 5:07 am
Location: Seattle
Contact:

Post by Dave »

Give me the image of the two swords crossed over, and I'll be happy to try it :)

I'll look at moving the text on the right over a little.

David
Post Reply