I did a search...and found the media engine website has a tutorial, but all the pictures are x's, and I do not know if it is the same for MediaCar. Another post said just to mess around with the files and see what does what. I would be very interested as I want to make a custom skin for my 95 rx7.
Here is what I know but I am just a user There are far better experts around.
Each screen has 5 files: one text file and 4 jpegs:
1) A text file ending in .skin which describes the objects (buttons, lists, etc.) present in the screen. For instance: menu.skin, the main menu MediaCar starts with (unless configured to start with last module run).
2) A jpg showing the screen emptied of its buttons, eg. menu_empty.jpg. This is your background picture.
3) A jpg showing the screen with all buttons shown, eg. menu_off,jpg
4) A jpg showing the screen with the mouse going over a button, but not clicking on it, eg. menu_on.jpg
5) A jpg showing the screen with all buttons clicked on, eg. menu_down.jpg
Do not understand "button" as in Windows: it is not a grey rectangle with borders and edges. It is only a given area of the screen. What you put in it is up to you, which means that it can be a circle, but its clickable area will be the larger rectangle surrounding it.
Say you design this round button, and define the rectangle (or square) around it. When you press your button, MediaCar does the magic of taking the corresponding portion of menu_down.jpg and displaying it onto menu_empty.jpg , thus only showing one button pressed down.
You will design the jpegs with a tool like Photoshop, or any other that can create Jpegs. If your screen does 800x600, then create 800x600 jpegs.
So, first duplicate the .\Skins\Default directory in .\Skins\Myskin. Then create the background menu_empty.jpg, add buttons to it and save it as menu_off.jpg. To start easily, you can now duplicate your "off" picture into menu_on.jpg and menu_down.jpg, you will work on those two later on. At least your skin will work, since all files are required.
Then modify menu.skin to correspond to your buttons and lists. For instance:
describes the fifth button (B05), which starts at pixel (339,202), is 176 pixels wide and 132 high. When the mouse comes over it, the caption says "DVD Player" but you could put anything in this field. When clicked on, this button calls the method "DVD", which in turns calls for the next screen: External_DVD.skin and its jpegs EXTERNAL_DVD_EMPTY.jpg, etc..
Save the .skin and run MC. Now that it works, you can create menu_on.jpg and menu_down.jpg. However, if you use a touchscreen, I think that menu_on.jpg should be a duplicate of menu_off.jpg, since there is no mouse that would fly above the button (a flying mouse, interesting....)
Apply, rince, repeat with all screens....
More tips: Labels: a label is a simple text. For instance, in menu.skin:
will display the time at the position (010,015), width 200, height 030, color white (255,255,255), font size 15.
Selection list: in audio_player.skin, the list of tracks is displayed as follows:
shows a list at pixel (019,128), with a size of 751 by 272 pixels. The other values set the different colours (such as foreground, background, currently playing) of the listed items. The font is Arial Bold (:B).