Welcome, Guest. Please login or register.

Pages: [1] 2
Print
Author Topic: GUI skinning  (Read 20586 times)
Q_x
Admin
Community member

Posts: 553



View Profile
« 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=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?)

« Last Edit: January 29, 2010, 09:50:04 PM by Q_x » Logged

maximinus
Community member

Posts: 694



View Profile Email
« Reply #1 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.


* dialog.png (19.65 KB, 515x425 - viewed 681 times.)

* inventory.png (110.17 KB, 510x677 - viewed 675 times.)

* main_menu.png (3.48 KB, 145x172 - viewed 629 times.)
Logged

Science is open-source religion
Q_x
Admin
Community member

Posts: 553



View Profile
« Reply #2 on: January 30, 2010, 03:20:11 PM »

Thanks Smiley
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?
« Last Edit: January 30, 2010, 03:23:36 PM by Q_x » Logged

maximinus
Community member

Posts: 694



View Profile Email
« Reply #3 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 :-)
Logged

Science is open-source religion
maximinus
Community member

Posts: 694



View Profile Email
« Reply #4 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.

* skinning.tar.gz (93.22 KB - downloaded 351 times.)
Logged

Science is open-source religion
Q_x
Admin
Community member

Posts: 553



View Profile
« Reply #5 on: February 01, 2010, 08:54:40 AM »

Huge thanks. I'll start to play with it after work (16.00 UTC).
Logged

maximinus
Community member

Posts: 694



View Profile Email
« Reply #6 on: February 01, 2010, 09:09:51 AM »

It may be less helpful than you think  Sad

But it's a start!
Logged

Science is open-source religion
maximinus
Community member

Posts: 694



View Profile Email
« Reply #7 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

 Grin

* skinning2.tar.gz (97.15 KB - downloaded 337 times.)
Logged

Science is open-source religion
Q_x
Admin
Community member

Posts: 553



View Profile
« Reply #8 on: February 01, 2010, 12:25:22 PM »

Its OK, thanks a lot Smiley
Logged

Q_x
Admin
Community member

Posts: 553



View Profile
« Reply #9 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.


* skin2.jpg (120.52 KB, 430x553 - viewed 674 times.)
« Last Edit: February 01, 2010, 08:35:34 PM by Q_x » Logged

Q_x
Admin
Community member

Posts: 553



View Profile
« Reply #10 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 Smiley
-<&-@


* Untitled-1 copy.jpg (127.94 KB, 524x568 - viewed 662 times.)
Logged

maximinus
Community member

Posts: 694



View Profile Email
« Reply #11 on: February 03, 2010, 12:18:00 AM »

It's looking much better already, Q_x! Keep up the good work.
Logged

Science is open-source religion
Q_x
Admin
Community member

Posts: 553



View Profile
« Reply #12 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.

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:


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


Handserif - shaky old-looking, but text figures (this crazy numbers) makes the font look much older than it should


Essays1743 - my favourite so far, digitized old book font. Better, but still with text figures.


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.


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.
« Last Edit: February 04, 2010, 11:11:15 AM by Q_x » Logged

shevegen
Community member

Posts: 705



View Profile
« Reply #13 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.
Logged

Cleaning away the bureaucracy in PARPG to make our life easier.
maximinus
Community member

Posts: 694



View Profile Email
« Reply #14 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.
Logged

Science is open-source religion
Pages: [1] 2
Print
Jump to: