Post-Apocalyptic RPG forums

Development => Graphics => Topic started by: Q_x on January 29, 2010, 09:26:16 PM



Title: GUI skinning
Post by: Q_x on January 29, 2010, 09:26:16 PM
OK, I've looked into the actual gui XML code, so I'm very little bit closer to what has to be made to have gui skinned.

Can someone, who has parpg running, do the screenshots in different resolutions, save it without loss (.png, .bmp, or .tif) and post it on the Wiki (filesize limit on forums is really deadly)? Eg. one huge, one small, one panoramic (one with dialog, one with inventory, one with main menu)? I have shitty old lap and no external monitor, so I'm binded to XGA (or less) only.

And two more questions, maximinus:
How far are this discussion actual?
http://forums.parpg.net/index.php?topic=83.0 (http://forums.parpg.net/index.php?topic=83.0)
http://forums.parpg.net/index.php?topic=413.0 (http://forums.parpg.net/index.php?topic=413.0)
This are the mockups you've seen I think.
And the second one: maybe what you ment is gui skinning *only*, without making HUD at all (so some bars, backgrounds, boxes and buttons are needed?)



Title: Re: GUI skinning
Post by: maximinus on January 30, 2010, 02:35:14 PM
Does that mean 3 different screen shots for each of 3 different resolutions?

Here's the main menu, inventory and dialog at 1024x768 cropped to fit as attachments. I don't think they change at different resolutions.


Title: Re: GUI skinning
Post by: Q_x on January 30, 2010, 03:20:11 PM
Thanks :)
No no, three in total. I was just curious (but not with shallow curiosity) how does the game look in general on something other than my own 1024x768. What scales, what shifts etc.

Maybe things will go faster this way:
As I don't quite understand the pychan syntax - can you, please, prepare/alter one single dummy xml file that points to one or more dummy graphic files (plain, hovered, clicked state of one button if possible), so that I can make changes, add the gui skin parts somewhere it should be, and by altering one entry and later - one file after another I would figure out what exactly would I need and prepare some proposals on my own or at least make a skeleton for needed artwork?


Title: Re: GUI skinning
Post by: maximinus on January 30, 2010, 03:25:41 PM
OK, I'll take a look tomorrow at the pychan demos and try to produce what you are after :-)


Title: Re: GUI skinning
Post by: maximinus on February 01, 2010, 07:10:45 AM
Find attached the stuff you need - or I hope you need to get started.

Extract the folder and place it in your FIFE/clients folder (you should have FIFE/clients/skinning

Run the code parpg_test.py inside the file. It will show a pychan screen with a window on the left displaying all of the widgets. On the RHS is a small dialog, click the button to see the re-skinned GUI.

The file you need to look at/alter is styling.py. Unfortunately, it seems like to have to skin it with a lot of text.

Other than that (or tell me if I can help more), you'll need to examine the pychan docs for more info as I don't know them that well.


Title: Re: GUI skinning
Post by: Q_x on February 01, 2010, 08:54:40 AM
Huge thanks. I'll start to play with it after work (16.00 UTC).


Title: Re: GUI skinning
Post by: maximinus on February 01, 2010, 09:09:51 AM
It may be less helpful than you think  :(

But it's a start!


Title: Re: GUI skinning
Post by: maximinus on February 01, 2010, 11:13:03 AM
It was less useful, due to you using FIFE 0.3.0!

So here's an update. Extract this into the FIFE folder itself, and then run the file /FIFE/skinning/parpg_test.py

 ;D


Title: Re: GUI skinning
Post by: Q_x on February 01, 2010, 12:25:22 PM
Its OK, thanks a lot :)


Title: Re: GUI skinning
Post by: Q_x on February 01, 2010, 06:56:19 PM
Ok. I got it fleshed out.
Could we use ImageButton in place of Button? Or is it plain bitmap (without text going over it)? Or maybe we can have image background for Button?
samanata.fontdef file - I changed font colors everywhere to 50,40,30 (not attached below). But it should rather be set where rest of colors are defined (styling.py). Maybe with the rest of properties of fonts? Is it reasonable?
I like the typeface, at least with non-imaged buttons it looks more than OK, so I left it unchanged. I can look for some other fonts if needed or develop our own.

I changed backround.png from paletted mode into full RGB. Hope it won't break nothing.

Do you all like it looking this snow+deep brown way?

I hope Pychan will work nice with transparencies in the backgrounds. I would love to have the background little bit transparent. But now (on default plain flat widget) its pointless.

Here you have the modified STYLES section from styling.py
Code:
STYLES= {
'new default': {
'default' : {
'border_size': 0,
'margins': (1,1),
'base_color' : fife.Color(250,250,245),
'foreground_color' : fife.Color(220,220,220),
'background_color' : fife.Color(150,150,156,50),
'selection_color' : fife.Color(250,250,245,200),
'font' : 'samanata_small'
},
'Button' : {
'border_size': 2,
'margins' : (10,5),
'min_size' : (100,20),
'font' : 'samanata_small'
},
'CheckBox' : {
'border_size': 0,
'background_color' : fife.Color(122,122,122,60),
'foreground_color' : fife.Color(72,62,52,200),
},
'RadioButton' : {
'border_size': 0,
'background_color' : fife.Color(122,122,122,60),
'foreground_color' : fife.Color(72,62,52,200),
},
'Label' : {
'border_size': 0,
'font' : 'samanata_small'
},
'ClickLabel' : {
'border_size': 0,
'font' : 'samanata_small'
},
'ListBox' : {
'border_size': 0,
'font' : 'samanata_small',
},
'Window' : {
'border_size': 1,
'margins': (0,0),
'opaque' : 0,
'titlebar_height' : 30,
'background_image' : 'background.png',
'font' : 'samanata_large'
},
'TextBox' : {
'font' : 'samanata_small'
},
('Container','HBox','VBox') : {
'border_size': 0,
'background_image' : 'background.png',
'opaque' : False
}
},
'greenzone' : {
'default' : {
'base_color': fife.Color(80,200,80) ,
'background_color': fife.Color(200,250,200),
},
'Window' : {
'titlebar_height' : 30,
},
'ListBox' : {
'font' : 'samanata_large'
}
}
}


Please someone INCREASE THE FILE SIZE LIMIT HERE twice or so!!! I loose time attaching nearly anything here, including this small thing.


Title: Re: GUI skinning
Post by: Q_x on February 02, 2010, 11:51:18 PM
If somebody has some really good, readable font in mood of the game (eroded, dusted, typewriter, torn or some other stencil-like) released under OFL or in Public Domain - dropping a line here is more than welcomed. Its not that there are to many fonts - I watched thousands of it, there is nearly zero of the needed kind.
Handserif looks not as good as it should, cause it has nautical numbers. However - its better than the default one we've had so far.

Also I will change the buttons - now its shim that rusts more and more with hover/click, but it not looks good so if you have any ideas - drop me a line here. If not - I'll simply create something else.

Background is now transparent - text is quite readable even on very dark background (and you have the green window underneath used as a lighter background, more common in the setting)

Pychan's ImageButtons have to have fixed size to look good? The image was shifting without rescaling if the buttons were bigger :/

Shevy, thanks a lot for increasing file size limit, have a flower :)
-<&-@


Title: Re: GUI skinning
Post by: maximinus on February 03, 2010, 12:18:00 AM
It's looking much better already, Q_x! Keep up the good work.


Title: Re: GUI skinning
Post by: Q_x on February 04, 2010, 10:24:34 AM
For all interested:
Barra & Zenbitz proposed usage of pseudo-cyrilics.
I love the idea - for some kind of "big letters". I don't know how to register new font in FIFE, but - as the font used are  based on styles - someone familiarized with FIFE can change this in a simple way.
I've found family of such fonts called "Kremlin" released on OFL license, best was IMHO Kremlin Bolshevik.
(http://www.abstractfonts.com/img/fp/1/3/4/7/5/cm/13475.gif)
Crude, geometric, fat, black. It could be better but its good enough. If you have better one - I hope it will be easy to switch it in any moment.

Ideally if it would be stencil-like, of such kind:
(http://www.fontriver.com/i/previews/crass_roots_ofl.png)

General purpose fonts were the difficult ones to find, but here we go:
Rursus Compact Mono - crude (but not eroded, just chaotic and ugly) typewriting font
(http://www.ozgurlukicin.com/media/upload/tema/kucuk/rursus_-_RursusCompactMono.png)

Handserif - shaky old-looking, but text figures (this crazy numbers) makes the font look much older than it should
(http://openfontlibrary.org/people/5inq/5inq_-_Handserif.png)

Essays1743 - my favourite so far, digitized old book font. Better, but still with text figures.
(http://www.thibault.org/fonts/essays/intro.png)

There is also Psicopatologia de la Vida Cotidiana, too uneven for me, hard to read, but I won't argue if you wish to use it.
(http://www.fontriver.com/i/maps/psicopatologia_de_la_vida_cotidiana_map.png)

I'm not happy with any of it in 100%. I think we need old typewriter font, period. I just haven't found GPL/OFL/PD one so far (and after second day spent on browsing fonts only, I won't be looking more). I can make one in some distant time, with German letters set. I have such typewriter here, hopefully it still works.

If you have a wish to look closer what font will behave like, how does it look etc. and you're not happy with what comes with your system - you can try Fontmatrix app - so-so for managing huge font sets, but good at previewing/comparing.

If you have any thoughts on this font thingy - feedback is appreciated.


Title: Re: GUI skinning
Post by: shevegen on February 04, 2010, 03:47:26 PM
The fonts are extremely cool.

If we get russian fonts (cyrillic?) we could try to have some signs in-game with russian fonts hehe for post-techdemo stuff.


Title: Re: GUI skinning
Post by: maximinus on February 04, 2010, 04:28:23 PM
I don't like the cyrilic fonts because they just shout 'Soviet Russia' and this game - as I see it - is more about survival than about politics. Also, we are set in Northern Europe, not Russia.


Title: Re: GUI skinning
Post by: zenbitz on February 05, 2010, 01:13:31 AM
Yeah, that's the problem with soviet fonts... although most of the game takes place in what was occupied by soviet troops for some time.

Probably old typewriter font is best.


Title: Re: GUI skinning
Post by: Gaspard on February 05, 2010, 10:23:16 AM
Probably old typewriter font is best.

word ! (one of my favourites in general)

although I personally have nothing against the pseudo-cyrillic font either - if we still have a Red Threat of any sort in the game...


Title: Re: GUI skinning
Post by: Q_x on February 05, 2010, 10:38:19 AM
OK, I have some serious doubts now.
I still have not found the brilliant idea for what should buttons look like, just few good ones, but it maybe should not be brilliant at all. Its because of:

I think we can't use single fixed-size buttons. It has to be scaled sometimes - at least in horizontal direction.
There is some obscure note in Pychan specs of ImageButton allowing scaling content to size of the button. First thing is I don't know how to apply it, second - I don't know what and how will be scaled (text? image? both?)

Possible ways out:

If scaling content takes the image only:
Prepare few bitmaps of higher resolutions in proportions for narrow, wide and ultra-wide buttons.
Prepare very few buttons that will look good scaled no matter what the proportions/scale would be (eg. nearly flat light gray).
Go back to using Button class - without graphics at all.

If scaling content scales something other than image only, so it won't be possible:
Preparing backgrounds in the way that will look good on various sizes of buttons (not so pure-white snow, ash traces, blood dripping), lets say for buttons that are 30, 60 and 90 pix tall and 60, 90, 120 and 160 pix wide

I don't know who to ask of what is scaled and what not. Do I need to ask anyway? Safest and best-looking is the last approach, but its some work, not only for me, but for the person coding the GUI too - namely binding one of fixed-size backgrounds for each of the buttons now and in the future.


Title: Re: GUI skinning
Post by: zenbitz on February 05, 2010, 09:02:37 PM
the default pychan buttons look bad because they have no depth (edges).  Spending a huge amount of time on special button sizes seems excessive to me at this stage.

Something in the middle is probably best.... there must be some sweet spot between amount of effort and how good it looks.

some programmer want to test scalling for Q_x?


Title: Re: GUI skinning
Post by: Q_x on February 09, 2010, 11:49:15 AM
Ok, I was thinking of which sizes might be needed, and came to this:

24 pix height and 60, 80, 120 and 200 pix wide (one liners)
and
60 pix height, 300 pix wide (for big button with two lines of text)

Hope it will be enough for the beginning (and not to fat to put it into trac ticket). I'll try to keep it in the "dirty snow" mood with some blood traces - this should be easy enough when changing or extending it later, eg. adding more sizes or switch from red stains to yellow.

I still don't know if doing it this way is reasonable, just because there will be need for making different buttons with different sizes hardcoded and changing this thing through whole GUI code made so far. We can always leave some things without images and improve things within some serious overhaul in the future.



Title: Re: GUI skinning
Post by: JustinOperable on February 10, 2010, 07:01:56 AM
Well I know people have been erring away from it, but just in case, I made a soviet themed font with fontstruct a while back which is under a creative commons license.

http://fontstruct.fontshop.com/fontstructions/show/red_menace

just in case anyones interested.


Title: Re: GUI skinning
Post by: Q_x on February 10, 2010, 08:41:35 AM
Cool font - and a cool app! Thanks!


Title: Re: GUI skinning
Post by: Q_x on February 11, 2010, 04:55:17 PM
OK, so here we go, with details:
What I've done is not 100% full skin. But it should improve how things look and be usable as it is in the techdemo ;).
I've been unable to set line spacing in any way.
The font (Essays1743) is still not the best that could happen to PARPG, but it comes in Bold, Italic and Bolditalic too.
The buttons are in quiet and ugly molten snow theme. Dirty/pure/bloodstained snow was my other idea, it was looking childish and noisy. So here you have.
If you dislike it - please post so that I know what would you like to see.
There is much to improve, but if you like it - I'll just make some minor corrections and prepare buttons in some other sizes.

Here are the things I've made - attached to the ticket:
http://parpg-trac.cvsdude.com/parpg/ticket/144
(Maybe overhaul don't come in hand with skinning?)
Changes went into fontdef file and styling.py
fontdef assumes a dirty trick - samanata.ttf is no longer the file it should be, I've substituted it with Essays1743.ttf. I'm not into font definition enough to do it rite :(.


Title: Re: GUI skinning
Post by: qubodup on February 12, 2010, 03:44:41 AM
It's not bad, but the background looks like biological mass (enlarged cell membrane) to me. I would prefer something more metal-like or if you want to stick to white, white paint on wood or metal perhaps.
 http://www.burningwell.org/gallery2/v/textures/tiling/diamond+grip+steel.jpg.html
http://www.burningwell.org/gallery2/v/textures/buildings/windowsHouses/3821660570_064e1b48c6_o.jpg.html?g2_imageViewsIndex=0
http://www.burningwell.org/gallery2/v/textures/surfaces/metal/img_0579.jpg.html?g2_imageViewsIndex=1
http://www.burningwell.org/gallery2/v/textures/surfaces/metal/img_0575.jpg.html?g2_imageViewsIndex=1

might be useful base txtures, especially the first link, which is tiling.

I mixed some of these textures and added white and scaled it down in the attachement. Don't know how to test this exactly..

gimp layered version: http://www.box.net/shared/80tlacxsn6 , public domain/cc0


Title: Re: GUI skinning
Post by: Q_x on February 12, 2010, 09:12:04 AM
Tested. Looks nice :)

My point to do it in the way before was using of little bit transparent background. So that you see what is going on behind it.

Maybe I should tweak little bit more with text background and generic button color to have it even better looking with what you provided, but all can see now, quick, how it will be.
The texture appears flat, but the GUI should not have big flat spots like this example. And text is well readable too.

So non-intrusive, well-readable aluminum theme. What do you think?


Title: Re: GUI skinning
Post by: qubodup on February 12, 2010, 12:27:29 PM
Maybe I should tweak little bit more with text background and generic button color to have it even better looking with what you provided, but all can see now, quick, how it will be.
The texture appears flat, but the GUI should not have big flat spots like this example. And text is well readable too.

So non-intrusive, well-readable aluminum theme. What do you think?
Sounds good. I would also suggest rounding the buttons' bottom right corner.


Title: Re: GUI skinning
Post by: Captain Obvious on February 12, 2010, 08:06:35 PM
What do you think of this kind of background ?
brushed metal : http://img710.imageshack.us/img710/3347/brushedmetal.jpg
brushed metal and rust : http://img713.imageshack.us/img713/1005/rustybrushedmetal.jpg


Title: Re: GUI skinning
Post by: Q_x on February 13, 2010, 10:34:09 AM
It is, or should be, a discussion upon are we more like a snowy fallout or survival in cold, decaying place, really. It will be easy to change background in the future (no matter what the size is).
I really like the rusty one.