Skin Package Documentation.
Updated: December 3, 2000 8:23PM


Revision history:
December 3, 2000 8:23PM - Added 3 colors to layout.pcx for 3 new controls (add player, remove player, and send message). Updated preview.pcx description to specify masking color.

 
Skin Packages are a collection of files which change the appearance of Qtracker's PlayerWatch window.

File Format
The package itself is nothing more than a Zip archive with a different file extension. You can use programs such as WinZip to create a Zip archive.

File Extension
Packages must have an extension of ".qtsk". For example, if your Zip archive was "MySkin.zip", you would rename your Zip archive to "MySkin.qtsk". The icon of the file will then change to a Qtracker icon.

Required Files
Several files are required to be in your Skin Package. These files define the contents of your package, author information, layouts, options, and skin images.

author.txt
bg.pcx
down-button.pcx
info.pcx
layout.pcx
minimize-button.pcx
more-down.pcx
more-up.pcx
preview.pcx
style.txt
up-button.pcx
Sample Skin
Sample Skin

File: author.txt
This is a text file which is used to name your skin, provide author and contact information, and any comments you may wish to include. This information will be displayed when installing your skin, and when browsing or changing skins from within Qtracker.

Each line defines a variable. The format of each line is <variable name> space <variable value>

The only variables supported at this time are:

description
filename
author
email
notes
url
Name of your skin, visible when installing and browsing.
Filename of your skin which will be enforced when installing.
Your name, visible when installing and browsing.
Your e-mail, visible and clickable when browsing.
Comments, visible when browsing.
Your web page, visible and clickable when browsing.

A sample file would look like:

description Hi-Fi PlayerWatch skin
filename Hi-Fi.qtsk
author Ronald E. Mercer
email rmercer@qtracker.com
notes Hi-Fi PlayerWatch skin.
url http://www.qtracker.com

File: bg.pcx
This is the primary (background) image used by your skin. All other controls, player information, marquees, etc will be overlayed on top of this image. It can be any size, shape, or color depth, but keep in mind the PlayerWatch window was intended to be small and compact.

Color RGB(127,0,0) is reserved for the mask/transparency.

bg.pcx
bg.pcx

File: down-button.pcx
This state image contains the down scroll button for advancing to the next player in the PlayerWatch listing. It contains both states, from left to right: pressed and depressed.

The width, mask/transparency, and position of the button is determined by layout.pcx . Since this image contains both the pressed and depressed images, multiply the button width by 2 to determine what your actual image width will be.

For example, if your button is 100 pixels wide then down-button.pcx would be 200 pixels wide. The left half of the image (pixels 0-99 horizontal from the left) would be the pressed button image, while the right half of the image (pixels 100-199 horizontal from the left) would be the depressed button image.

There are no reserved colors for mask/transparency in this image. Masking/transparency for all controls is determined by layout.pcx .

In the sample image provided, you'll notice I still use the standard mask/transparency color RGB(127,0,0). This is merely to make it easier to work on the image.

down-button.pcx
down-button.pcx

File: info.pcx
This is the background image for the scrolling information marquee. Server and player information will be overlayed onto this image and will scroll to the left.

The font, color, size, scroll speed, etc of the text is determined by style.txt .

There are no reserved colors for mask/transparency in this image. Masking/transparency for all controls is determined by layout.pcx .

In the sample image provided, you'll notice I still use the standard mask/transparency color RGB(127,0,0). This is merely to make it easier to work on the image.

info.pcx
info.pcx

File: layout.pcx
This is probably the most important image in your skin, and no one will ever see it (unless the open up the skin package). This image is responsible for defining the size, shape (mask/transparency), and position of all the controls.

You should notice that the sample image is full of bright colors. Each color represents a control and is used to generate a mask/transparency for each control.

This image must be the same size as bg.pcx since it represents exactly where each control will be drawn over the background image.

RGB(255,192,0) represents the marquee where server and player information scrolls.
RGB(0,255,255) represents the player listing which displays found players.
RGB(0,255,0) represents the status indicator which activates if more players are visible by scrolling down.
RGB(255,255,0) represents the status indicator which activates if more players are visible by scrolling up.
RGB(0,0,255) represents the scroll down button which move the current player selection down.
RGB(255,0,255) represents the scroll up button which moves the current player selection up.
RGB(255,0,0) represents the minimize button which hides or minimizes the PlayerWatch window.
RGB(192,255,0) represents the add button which allows a new player search string to be created.
RGB(0,255,192) represents the remove button which removes the currently selected player and its associated search string.
RGB(192,0,255) represents the message button which sends a message to the selected player.

In the sample image provided, you'll notice I've included the background image. This is merely to make it easier to work on the image, as only the reserved colors listed above are used from this image.

layout.pcx
layout.pcx

File: minimize-button.pcx
This state image contains the minimize button for minimizing or hiding the PlayerWatch window. It contains both states, from left to right: pressed and depressed.

The width, mask/transparency, and position of the button is determined by layout.pcx . Since this image contains both the pressed and depressed images, multiply the button width by 2 to determine what your actual image width will be.

For example, if your button is 15 pixels wide then minimize-button.pcx would be 30 pixels wide. The left half of the image (pixels 0-14 horizontal from the left) would be the pressed button image, while the right half of the image (pixels 15-29 horizontal from the left) would be the depressed button image.

There are no reserved colors for mask/transparency in this image. Masking/transparency for all controls is determined by layout.pcx .

In the sample image provided, you'll notice I still use the standard mask/transparency color RGB(127,0,0). This is merely to make it easier to work on the image.

minimize-button.pcx
minimize-button.pcx

File: more-down.pcx
This state image contains a visual indicator that more players are visible by scrolling down (outside the viewing region). It contains both states, from left to right: true and false.

The width, mask/transparency, and position of the indicator is determined by layout.pcx . Since this image contains both the true and false images, multiply the indicator width by 2 to determine what your actual image width will be.

For example, if your indicator is 25 pixels wide then more-down.pcx would be 50 pixels wide. The left half of the image (pixels 0-24 horizontal from the left) would be the true image, while the right half of the image (pixels 25-49 horizontal from the left) would be false image.

There are no reserved colors for mask/transparency in this image. Masking/transparency for all controls is determined by layout.pcx .

In the sample image provided, you'll notice I still use the standard mask/transparency color RGB(127,0,0). This is merely to make it easier to work on the image.

more-down.pcx
more-down.pcx

File: more-up.pcx
This state image contains a visual indicator that more players are visible by scrolling up (outside the viewing region). It contains both states, from left to right: true and false.

The width, mask/transparency, and position of the indicator is determined by layout.pcx . Since this image contains both the true and false images, multiply the indicator width by 2 to determine what your actual image width will be.

For example, if your indicator is 25 pixels wide then more-up.pcx would be 50 pixels wide. The left half of the image (pixels 0-24 horizontal from the left) would be the true image, while the right half of the image (pixels 25-49 horizontal from the left) would be false image.

There are no reserved colors for mask/transparency in this image. Masking/transparency for all controls is determined by layout.pcx .

In the sample image provided, you'll notice I still use the standard mask/transparency color RGB(127,0,0). This is merely to make it easier to work on the image.

more-up.pcx
more-up.pcx

File: preview.pcx
This is a thumbnail image of your skin in action. This preview image will be displayed when browsing skins within Qtracker.

Color RGB(127,0,0) is reserved for the mask/transparency.
preview.pcx
preview.pcx

File: style.txt
This is a text file which is used to control the appearance of the scrolling server/player information marquee.

Each line defines a variable. The format of each line is <variable name>=<variable value>.

The only variables supported at this time are:

marquee_font_height
marquee_font_color
marquee_font_italic
marquee_font_bold
marquee_font_antialias
marquee_font_face
marquee_speed
height in pixels (1-255)
color (R,G,B) (0-255 per hue)
italic (yes or no)
bold (yes or no)
anti-aliased (yes or no)
face (ie "Arial", "Verdana", "Courier", etc)
scrolling speed (64-1024)

A sample file would look like:

marquee_font_height=20
marquee_font_color=219,170,4
marquee_font_italic=no
marquee_font_bold=yes
marquee_font_antialias=no
marquee_font_face=arial
marquee_speed=96

File: up-button.pcx
This state image contains the up scroll button for advancing to the previous player in the PlayerWatch listing. It contains both states, from left to right: pressed and depressed.

The width, mask/transparency, and position of the button is determined by layout.pcx . Since this image contains both the pressed and depressed images, multiply the button width by 2 to determine what your actual image width will be.

For example, if your button is 100 pixels wide then up-button.pcx would be 200 pixels wide. The left half of the image (pixels 0-99 horizontal from the left) would be the pressed button image, while the right half of the image (pixels 100-199 horizontal from the left) would be the depressed button image.

There are no reserved colors for mask/transparency in this image. Masking/transparency for all controls is determined by layout.pcx .

In the sample image provided, you'll notice I still use the standard mask/transparency color RGB(127,0,0). This is merely to make it easier to work on the image.

up-button.pcx
up-button.pcx