Click "Next" to proceed.
Welcome to CPMaker!
I've tried to make this tutorial as readable as possible, with lots of pictures, so that as many people as possibly can enjoy the benefits of designing their own control panel and layouts.
If you have any ideas on ways to improve this tutorial, please feel free to contact me at buddabing at houston dot rr dot com.
Launch the installer application, which will be named "setup104.exe" with
the 104 changing from version to version.
Click "Next" to proceed.
Since BuddaMAME is a derivitive of MAME, you'll have to agree to the terms
of the MAME license agreement during the installation process.
Next, choose a directory in which
to save the CPMaker application, image, and sample panel files.
You can optionally tell the installer to create a Start Menu entry for
the CPMaker application. You can name the Start Menu folder whatever you want,
it is called "BuddaMAME" by default.
Another available option is to create a desktop icon or a Quick Launch icon.
Click "Install" to install the application. There are more than 1000 source
code files so it may take a couple of minutes, depending on how fast your
computer is.
That's it, you're done!
Not to worry, this is just the console screen that applications compiled with MinGW create to display standard output. MAME creates a black screen very similar to this. Just minimize this black-screened window.
You should see a window that looks like this:
Now you're ready to create your panel files!
Select "New..." from the File menu. You should get a dialog that looks like this:
Buddabing's note: As of version v0.104, I have not implemented keyboard shortcuts or accelerators for the menu functions yet, although the underlining is in the menu bar. This will be done in a future release.
Fill out the dialog box as shown. You can use whatever background image you want, or you can use a solid color as the background. For this tutorial, name the panel "panel5" and use background image "template.png". Don't put quotes in the names.
Leave the ctrlr field blank for now. It's important to have, however, because the image generation portions of CPMaker will not work without a ctrlr file.
Press OK, and you should see the template image:
Let's add a couple of controls. Select "Add..." from the Control menu. You'll
see a dialog that looks like this:
In order for CPMaker to work, you need an image filename, a control type, and
control keycodes. Click the "Browse..." button near the image filename.
You'll see a dialog that lets you browse for the filename you want. Note that
only the images that are appropriate to the control type you have selected
will appear in the dialog.
Select "blackbutton.png" and press OK. Then press OK to create your new control. Don't worry about the keycodes, we'll come back to that later.
Your control panel should look like this now:
Go back and create another control. This time, select "8-Way Joystick" from
the list of possible control types, and "redjoystick.png" from the list
of image filenames. After you press OK to create the joystick control,
your panel should look like:
Let's go back and add keycodes to the two controls that you have created.
Right-click on the joystick and select "Keycodes..." from the pop-up menu.
The "Control Keycodes" dialog will appear:
You will want to assign keycodes according to what physical keypresses your encoder will generate when the joystick is moved. For this tutorial, we will assume that the arrow keys are what you want.
Find KEYCODE_UP in the list of keycodes (they are alphabetized). Then click
on Add to add the keycode to your control. Go ahead and add KEYCODE_DOWN,
KEYCODE_LEFT, and KEYCODE_RIGHT as well. Once that is done, the dialog
should look like this:
Press OK to change your keycodes.
Try adding a keycode to your button. The MAME default is KEYCODE_LCONTROL for the first player 1 button, so use that for this tutorial.
Now that you have created a couple of controls, try moving them around a bit. CPMaker allows several ways of selecting and moving your controls.
Try selecting "Select All" from the Control menu. All controls should now
be highlighted:
Once that is done, you can click on one of the selected controls and drag the mouse to move the whole group around.
Buddabing's note: I will eventally be adding a way to move a group of controls by small increments by using the arrow keys. This does not exist as of version v0.104.
In order to save the file, select "Save As..." from the File menu. A dialog
will appear, prompting you for a filename.
For this tutorial, set the name to "panel5.pan" (without the quotes). Then press OK. The title of the window should change to "CPMaker Panel and Layout Designer - panel5.pan".
Let's add a label to your panel. Select "Add..." from the Label menu. A rather
complicated dialog will appear:
The centerpiece of the label dialog is the image preview. This will show you what your new label will look like on the image. Try moving your mouse inside the label preview. The cursor will change from an arrow to a hand. Then try moving your cursor along the border of the label. The cursor will change again into a drag cursor. You can change the side of the label by dragging the border of the label when the cursor is set to the drag cursor.
You can tell CPMaker whether the label will have its background drawn or not.
If not, CPMaker will only draw the text and not the label's background. For
this tutorial, try clicking on "Use Colored Background". Notice that the
button named "Select Background Color" is now enabled. Click that and select
a suitable background color, I chose yellow.
There are currently four supported label shapes. These are:
Rectangles are exactly what you would expect if you have previously used CPViewer or Johnny 5. The width and height parameters along the right side of the dialog are the width and height of the rectangle, in pixels.
Rounded Rectangles are just like rectangles except that the corners are rounded off. Try clicking on the "Rounded Rectangle" radio button. The "Round Rectangle Corner Radius" edit control will be enabled. The corner radius tells CPMaker how much to shave off the corners of the rectangle.
Rounded rectangles are unique to CPMaker, they are not used by any other image layout program. If you export a layout containing a round rect, it will become a rectangular Johnny or CPViewer label.
Ellipses are described by the major and minor axes being the width and height parameters. In order to drag-resize an elliptical label, you'll need to drag the rectangular border around the label.
Ellipses are also not supported by any other label layout program. Exported ellipses will also become rectangles.
Also note that drawn text may or may not fit within an elliptical background, depending on how eccentric the ellipse is.
Image labels can be used to display an arbitrary image on the background.
There are a couple of other parameters associated with image labels. There are two flags, represented by check marks towards the bottom of the dialog. The first flag is "Draw Text on Image Label". Click this if you want CPMaker to draw text on top of your image label. The other flag is "Resize Image to Specified Width and Height". If this is left unchecked, the image is drawn on the panel at its given size. If it is checked, it is resized to match the width and height parameters.
You'll also have to specify what image you want to use. You can do this by typing in the filename of the image or by using the "Browse" button next to the image label filename.
For this tutorial, choose "Rounded Rectangle" for the label type. The label shapes are not drawn if "Use Transparent Background" is selected. In that case, leave the label type as a plain rectangle.
Once you have set your label parameters, click OK to create your new label.
Then move the new label so that it is directly above your joystick. It
should look something like this:
There are five ways of changing a single label's size. Can you find them all?
You can also change the size of multiple labels at the same time. To do this, select as many labels as you want, either by drag-selecting, control-clicking, or by selecting "Select All" from the Label menu. Then select "Set Size..." from the Label menu. This will set the size of all selected labels!
I've just given you one of the ways to set a single label's size!
Click here to reveal all five resizing methods
As an exercise, try resizing the label. each of the five ways.
Any label can be rotated, even image labels. There are currently two ways of doing it.
I may add a "Set Rotation..." option to the Label menu in the next version similar to the current "Set Size..." option.
Rotation angles are in degrees with zero being "east" and going clockwise.
Try right-clicking the label and selecting "Resize/Rotate...". A dialog will
appear that looks like this:
Fill in the rotation value as shown, then click OK. Your label will now be
rotated:
Save your file and look at the Edit menu. Select the option called "Folder
Preferences...". You'll see a dialog that looks like this:
This dialog is used by the image generation part of CPMaker (and by BuddaMAME) to locate your panel files, images, and other necessary components. You should not have to edit this file, but if you want to rearrange your images or ctrlr files, feel free.
The next dialog on the Edit menu is the File Preferences dialog. Go ahead
and click the close box on the Folder Preferences dialog and select
"File Preferences..." from the Edit menu. You'll see something like:
The line you want to change in this dialog is the line labeled "Panel Selection File". Edit the line as shown. Change the filename to panel5.psf. Then close the dialog.
Next, select "Panel Selection" from the Edit menu.
If you use a file for your .psf file that doesn't exist, CPMaker will prompt
you to either use an existing file or create a new one:
Click on "Yes". A dialog will appear prompting for which .PSF you want to use:
For this tutorial, you want to create a new .PSF file. Click on "Create".
Another dialog will appear, prompting you for a filename.
For this tutorial, enter "panel5.psf" for your filename, without the quotes, and press OK.
Once this done, the panel selection file dialog will appear. Through this dialog, you tell CPMaker which panels you want to use to generate your artwork. For this dialog, we will only use your freshly-created panel.
In the list of all panels, find panel5.pan and click on it. A preview will show
up with your controls on it. Click on "Add" to add this panel to your panel
selection file. Then click on panel5.pan in the "Selected Panels" list box.
A check box should appear below the list box which reads, "Use this panel
by default". Click that check box. Your completed dialog should look like this:
Important!!! You must have one panel that has "Use this panel by default" checked, or else CPMaker may not produce any artwork at all! This is currently true (v0.104) even if you only have one panel in your .PSF file!
Click "Done" which you are ready to proceed. You have just told CPMaker how to generate artwork!
Save any changes you've made. Next, start a command prompt and navigate to where the CPMaker executable. By default, it is in c:\buddamame. Go ahead and leave the GUI running if you want.
When you launch a command prompt, you might see something like this:
Try doing a "cd \buddamame". This will Change Directory to the default installation directory.
There is a utility called "Open Command Window Here" which will do this for you
from Windows Explorer.
Here's a link to the Open Command Window Here Power Toy
You can right-click on a folder and "Open Command Window Here" will appear in a popup menu. Then you don't have to do the "CD \buddamame" step! Pretty cool, thanks to BYOAC user mccoy178 for this tip!
Once you are in the installation directory, type "cpmaker robby robby".
Before you press enter, you should see something like this:
The first "robby" that you just typed is the name of the rom that we will be using for testing, which is Robby Roto, one of the free ROMs provided on the MAME website. The second "robby" is the parent of that rom. Since robby is a parent rom, we don't strictly need the second parameter, but we will use it for this tutorial. For Pac-Man, you would use a command line such as "cpmaker pacman puckman". CPMaker can figure out the parent rom by itself, so long as there is a valid MAME specified in the CPMaker file preferences.
Press Enter now. You should see a screen that looks like this:
Press ESC to leave the viewer.
You might be wondering where the labels are. The answer is that since there was no valid ctrlr file in the file preferences, no labels could be drawn. Let's fix that.
Leave the command prompt running and either relaunch or go back to the GUI. If you relaunched the GUI, open the panel5.pan panel file. Select "Edit Panel" from the Edit menu. Click Browse... and select the ctrlr file you want. For this tutorial, use panel2.cfg.
Your Edit Panel dialog should look like this:
Now click OK, and make sure your panel file is saved.
Go back to the command prompt and rerun "cpmaker robby robby". The viewer
should now display something like this:
If you are not getting something similar to this, please contact me.
