Skinning Tutorial

[KingArgyle]

Alright, any of your Skin Developers up for the challange of writing a how to guide? Those that have already developed some fairly sophistacted skins, could collaborate on it, and who knows, we could get some more really cool skins.

[darrin75]

I am all For your ideas as i am a beginner at learn this stuff

[nkh]

I have just looked at the other skins and tried to work out how the system works. I use notepad or AEdiX to edit the xml files and Paint Shop Pro for the images. I use jpeg (low compression) for the backgrounds and png for the task images, remember to set the transparency for the png files in your image program (or else things start to look strange ).

I'm currently working on this skin, so I'll use that to try to explain what some of the things in the xml files does, it's pretty much the same for all the screens just with some diffirent names.
If you look at this file \main menu\skin.xml you'll see some text styles (<TextStyles>) getting defined at the top, the name should tell you what each of them do the colour can be either a hex walue or the name of a colour (like in html's font tags, so black can either be "black" or "#000000"), "Transparent" or a gredient of colours, the font, size and style should be easy.
The composite images (<CompositeImages>) defines what pictures, shapes, buttons and text looks like. First one sets the background <CompositeImage name="Background" size="720,480">... and gives the filename, location on the screen and the size of the background picture (though you could also just use the buildin shapes to make GBpvr draw a simple background). The buttons have name after their state (selected or not), so <CompositeImage name="SelectedButtonImage" size="206,45">... set's the size of the selected button and the next line <DrawRoundedRect... draws the button shape (in my theme it's just a red rectangle with rounded corners, play around with the radius setting). <DrawText... draws the text onto the button and it uses one of the text styles we defined earlier, in this case textStyle="SelectedButtonText".
In the special elements (<SpecialElements>) section we set where the objects should be places on the screen and so on. For example: <SpecialElement name="Buttons" loc="410,95" spacing="40" alwayCentered="true" maxVisibleButtons="7" allowTopBottomWrap="false" showNumbers="false"/> places the buttons (upper lefthand corner) at the position (410,95), the space between the buttons at "40", I have set the selected button to be always centered (so the button list just 'rolls' up and down), the list will show a maximum of 7 buttons and it won't show any nubers next to the button names. The rest of the objects should be easy now.

I don't know if this confuses more than it helps, but if you just look at the xml files and try to change the settings one at a time you should find it quite easy

Also, a little tip, if (when) you make a mistake in an xml file you'll see that GBpvr either doesn't start or it gives an error when you try to click something on the screen. To find the error more easily open the GBPVR.exe.log and look around the last lines, it should give you a hint about where the mistake is.

[KingArgyle]

Okay, I guess I was looking for something similar to the following:

http://xlobby.incolby.com/SkinningXlobbya40.2.htm

But of course for GBPVR. If nothing else, maybe a section on the Wiki covering skinning tips.

[fini]

there is...

fini

[nkh]

Quote[/b] (KingArgyle @ Dec. 03 2004,05:33)]Okay, I guess I was looking for something similar to the following:

http://xlobby.incolby.com/SkinningXlobbya40.2.htm

Wouldn't that require a skin editor for GBpvr? I don't see anything about editing the xml files by hand, just a lot of descriptions of the terms (though most of them can be used when editing GBpvr skins too). I don't think a skin editor would be usefull for now, that would just mean that there're one more thing to keep updated when Sub updates GBpvr.

[reven]

the best way to edit a xml file is just using a program like notepad or textpad. you dont need a xml editor (whats the point really? of course i said that starting uni doing java programs in notepad, so im might be missing something)

[KingArgyle]

One of the utilities that I think would help with skinning is a GOOD GUI skin editor. Something that is drag and drop that then writes out the skin file.

So far XLobby's comes closest, and Meedio is by far the worse in this category. With the Widget library under development, I figured that would be a natural extension to the Skin Editor. Nobody really likes having to mess around with XML directly unless they have too. Most people are visual anyway.

[CodeMonkey]

nkh: I really like the look of your skin. I'm going to load it up tonight and have a closer look.

[nkh]

thanks, I guess that should be the keyword for me to finish it sometime soon