CharPad Pro Map Design

This is a guide to show you how to build your own map in CharPad for the Commodore 64. I will start with a brand new project and we will be creating 8 x 8 tiles for this example.

You will want first set up your colors in the Project window on the left. For this example I am using the Background (Bg) as black, and the Foreground (Fg) as red. For the Multicolor 1 (M1) I am using a dark grey, and for Multicolor 2 (M2) I am using a light grey color.

CharPad Colors

The Tile Set section keeps track of all the tiles you create using the Tile Editor. We will start drawing in the Tile Editor. First click on the Foreground (Fg) and select the white color in the Project area. These list all the low and high resolution colors. Since we are using multicolor though, you will want to use bottom layer.

Next switch the color to light grey (M2) and attempt to draw the design you see here, which will represent a brick wall when its down with a picket fence on the top.

Drawing a Tile

So for the first example, I have drawn a simple fence as a start to demonstrate how tile design works. You can click into the individual cells to draw the colors. Just hold down the left mouse button and click a cell (pixel) section. You can draw within any of the cells, but the foreground cannot be repeated with different colors in the same cell.

After this click on the Foreground color and select the multicolor red color. Recall again that this is the top color selection. Do your best to replicate the design I have here, which resembles the bottom section of a tree.

Also to begin drawing each new tile you will need to click on a black square in the Tile Set. The Quantity shows the total of Tiles that are currently available.

After you have selected a new square, begin drawing the next design which will be the upper section of the tree. You can also copy a single cell area (within an 8 x 8) area by clicking on the Cell selector in the Tile Editor, which is located in the first icon on the left.

Also to begin drawing each new tile you will need to click on a black square in the Tile Set. The Quantity shows the total of Tiles that are currently available.

After you have selected a new square, begin drawing the next design which will be the upper section of the tree. You can also copy a single cell area (within an 8 x 8) area by clicking on the Cell selector in the Tile Editor, which is located in the first icon on the left.

The smaller Tile Editor cells will disappear while in this mode. Now you can click on a specific tile that you have drawn and you can copy it by using control c. Then find another cell that is either empty or a place that you want to place that copied cell into and press Control v.

Copying CharPad Cells

By copying individual cells, you can quickly build out an 8 x 8 tile set when you need to duplicate a lot of the same areas. This is also important to be sure that you don’t exceed 255 characters in quantity since that is the limite for a tile character set. If you look in the Char Set window at the Quantity window you will see a number here. That is the number that cannot exceed 255 in order to successfully draw tiles for a Commodore 64 screen or other 8-bit computer systems.

Hopefully by now you are getting the hang of clicking cell areas, selecting colors, and drawing out tile designs. Continue working on this tile set until you have finished the entire tiles that are seen here (total of 10), not included the first tile which needs to be left blank to select an 8 x 8 blank area for the map, which we will cover next.

The CharPad Map Editor

So we have drawn these tiles out, but now you will need to place them individually in the window called Map Editor.

Look the for icon called Brush: Size 1 in the upper far left corner. Click on this and then click on a tile you created in the Tile Set window. Next click a cell area in the Map Editor and the tile you selected will appear there. You can continue to click on other cells (tiles) in the Map Editor to continue drawing out your map.

When you are finished designing this new CharPad Pro map, it should look something like the screenshot you see here, as an example. There will be a wall with a fence attached and a tree within the center, and below that you will see a sidewalk.

Look at the following screenshot, and notice that each cell within the Tile Editor will never have more than 4 colors. Also, as I mentioned earlier there will always be one Foreground color for each individual tile. You cannot have both green and red colors in a tile cell.

In the screenshot here, which contains the bottom half of the street wall and the sidewalk, you will notice that the green and red areas are separate from each other. If you try to switch the Foreground color to blue for example, and click in either the green tile area or the red area, it will immediately change to reflect that new color to keep the Foreground colors separate for each tile (8 x 8) section.

Continue repeating these steps until you have a complete design created for your map. You can also expand the tile by select an a number in the Quantity section of the Tile Set window, type in a new number and that additional tile will be added to the bottom while increasing the count.

To increase the Map Editor area as well, just click into the Width text area where the number is, change it, and it will increase the map’s width. You can also repeat this for the Height using that area as well.

Tips for your Artwork

To create more depth to your CharPad design, think about where a light source is coming from. So for example if the sun is shining on your photo from the right, then you will need to create lighter areas on the right side of your tiles and make them darker on the other sides.

You can also create dark areas where light cannot reach, such as in the cracks of the sidewalk (see the photo to the side here). Notice that I had a black section behind the sidewalk to represent the crack, and then there is a light grey area in front where the light source is from the sun.

Another interesting thing that I learned is you can create unique shading colors using a design like you see here, which sets pixels for every other cell using the same color (using green for this example), or you can rotate similar colors for different effects. Use your imagination and have fun!