A Guide to Creating Templates for uPPP

SUMMARY

This will provide you with some brief instruction and tips for creating PNG templates for uPPP.
uPPP is a patch engine that uses PNG images. This allows templates, or skins to have multiple
levels of transparency. No region files are needed to create irregular shapes, and no need to worry
about fuzzy edges! uPPP offers many features including mouse over buttons, transparent edit
boxes, use of custom fonts, and scrolling / sinus text. This guide will show examples from the “The
Blues” template that is included with uPPP.

For a full feature skin, you’ll need to create 6 PNG images:

1. a BACKGROUND, or template frame
2. a PATCH button
3. an EXIT button
4. a CHECKBOX or backup button (note: this is an optional feature)
5. an ONOFF button for music (note: this is an optional feature)
6. and a small PREVIEW, or thumbnail of the assembled skin

In addition to the above listed PNG images, you’ll need to create or select an ICON for the skin.
Another feature that is available is the ability to use a custom CURSOR. uPPP allows the use of a
static cursors (.CUR) and animated cursors (.ANI)

PNG IMAGES

All PNG images (except the preview) must be saved in 32bit PNG format. More information on 32bit
PNG images to follow.

The BACKGROUND image for a full feature template should include space for the following edit
boxes: Application Name, URL, Author, and Date. However, these are all optional. Use only the
ones needed for your skin.

Here is an example BACKGROUND:

uPPP uses mouse over buttons. Four buttons are needed for a full feature skin.

The PATCH and EXIT buttons are similar and have the same requirements. The width (in pixels) of
the buttons should be an even number. If they have an odd pixel width, they might not display
properly. The buttons should have three states: up, mouse over, and down. All three states get
stacked on top of each other in a single PNG image. See the example below:

Example:
…. Up
…. Over
…. Down

The BACKUP and ONOFF buttons are similar and have the same requirements. Again, the width (in
pixels) of the buttons should be an even number. These buttons should have two states. Both
states get stacked on top of each other in a single PNG image. Both of these buttons are optional
button and may be left blank in the ini file (this will be discussed later). See the examples below:

Example CHECKBOX button:

… Unchecked
… Checked

Example ONOFF button:

… Music Off
… Music On

As mentioned earlier, All PNG images (except the PREVIEW) must be saved as 32 bit PNG format.
Failure to save the images in 32 bit format will cause errors. In Photoshop; selecting File, Save As,
then selecting PNG format will typically save as 32 bit… but not always. To verify, in Windows
Explorer right click on the PNG file and select the summary tab. It will tell you if the file is 32, 24, 16,
or 8 bit.

TIP: If your file is not in 32 bit format, open the PNG image in Photoshop. Then select Layer, New,
Layer from Background… Then resave the file.

The final image needed is a preview or screenshot. This should be a PNG that is approximately
275px by 150px in size.
INI FILE

Now that the graphics are done, it’s time to put the skin together. All of the components are
assembled using an ini file. To assemble a new skin, it is easiest to copy the INI file from a working
skin and edit it with the new file names and parameters. Below is what you’ll find if you open the INI
file for the “The Blues” template (included with uPPP) in a text editor. The first 8 items are self
explanatory… simply the filenames for the images, buttons, icon, music, and cursor. Note: the
CURSOR, MUSIC, CHECKBOX, and ON/OFF fields are optional and are not required to be in the INI
file.

[FILES]
BACKGROUND=frame.png
PATCHBUTTON=patch.png
EXITBUTTON=exit.png
CHECKBOX=backup.png
ONOFF=music.png
ICON=icon.ico
MUSIC=KUKURYDZ.XM
CURSOR=Crystal Clear arrow.cur
FONT=10,0,bit1.fon
PREVIEW=preview.png
[COORDINATES]
TEXTCOLOR=0,0,0
SUCCESSCOLOR=234,237,245
FAILURECOLOR=255,200,175
PATCHBUTTON=177,178
EXITBUTTON=259,178
CHECKBOX=95,178
ONOFF=14,178
APPLICATION=93,118,0
URL=47,135,0
AUTHOR=67,153,0
DATE=246,152,0
SCROLLER=10,2,332,0,0,0
SCROLLERCOLOR=0,0,0

FONT sets the font for the skin. The correct format is FONT=X,Y,Z where X is the font height, Y is the
font width, and Z is the font’s filename. If X, or Y are zero it will use the default size for that font.
Font types .FON and .TTF may be used. Please note: when selecting a font, the font’s filename must
EXACTLY match the font’s family name. To verify the font’s family name, in Windows Explorer,
double click on the font. The font’s family name will be displayed at the top left of the window that
opens.

PREVIEW gives the filename for a preview image or screenshot. This is what the patch author will see
when selecting and choosing a template.

TEXTCOLOR, SUCCESSCOLOR, and FAILURECOLOR set the color for the texts. The correct format is X,Y,Z
where X is the Red Value, Y is the Green Value, and Z is the Blue Value. TEXTCOLOR sets the color
for the texts in the edit boxes. SUCCESSCOLOR sets the color for the text that is displayed upon a
successful patch. FAILURECOLOR sets the color for the text that is displayed upon an
unsuccessful patch. Both the success and failure messages will be displayed in the center of the
scrolling text area.

PATCHBUTTON, EXITBUTTON, CHECKBOX, and ONOFF will determine the position of the buttons. The
correct format is X,Y Where X is the horizontal value and Y is the vertical value for the top left corner
of the button. The ONOFF button is optional and this value may be left blank. TIP: The X,Y values
can be determined easily within Photoshop. Before the skin is vertically flipped, place the mouse
cursor over the upper, left corner of a button. The X,Y value will be displayed under the info tab in
the navigator pallet.
 APPLICATION, URL, AUTHOR, and DATE will determine the position of the edit boxes. The correct
format is X,Y,Z To start, determine if you want the text aligned on the left, right, or centered. If
Z=”0” the alignment is left and then X,Y will give the position to the top left corner of the text. If
Z=”1” the alignment is centered and then X,Y will give the position to the top center of the text.
Finally, if Z=”2” the alignment is right and then X,Y will give the position to the top right corner of the
text. All of these fields are optional and are not required to be in the INI file.

SCROLLER Sets up the scrolling text. The correct format is SCROLLER=X,Y,Z,A,B,C X,Y is the
position to the top left corner of the text. Z is the width of the scrolling text. A,B, and C are for
creating a sinus scroller. If you don’t want your scrolling text to move in a sine wave pattern, then
set all of these to zero. The A value will set the speed of the wave pattern. If you set this to zero, the
wave pattern will be static… that is, the text will follow the wave pattern, but the wave pattern itself
will not be moving. The B value will set the frequency of the wave pattern, or how wide the bow in
the wave is. And the C value will set the amplitude or height of the wave.

SCROLLERCOLOR Will set the color of the scrolling text. The correct format is X,Y,Z where X is the Red
Value, Y is the Green Value, and Z is the Blue Value.

CREATE A TEST EXE

Place all of the files into a folder under the default uPPP templates folder. This should include the ini file,
PNG images, cursor, icon, font, and chiptune. Open uPPP and under the main tab, enter some information
for the edit boxes:

Under the Template tab, click on the “Change” button and then select the ini file for your new template. Also,
enter some text in for the scroller.

Finally, go back to the main tab and click on the “Create Patcher” button.

Good Luck, and Have Fun !!!