pixelated-font.md

creating a pixelated font from a tilemap

software needed

1. imagemagick
2. potrace

---

1. download the fontmap

Let's download a sprite sheet for a character map; take Pac-Man for example:

2. crop and convert to monochrome

This image clearly uses a 8x8 pixel grid (except for the logo and the pts text), we will need only the first 3 rows (image width is 128px, required height is 8*3 = 24px, we want a single file and not the tiles):

magick input.png -crop 128x24+0+0 +repage output/pm-font-cropped.png

If you prefer doing this manually, Gimp can be a good choice. For the vector tracer we will need a two color image, white on black:

so we will need to split it into individual images.

magick output/pm-font-cropped.png -channel RGB -negate -colorspace gray -auto-level output/pm-font-mono.png

3. tiling

The input is the cropped, black on white monochrome image.

In order to preserve (or emulate) the pixelated look the vector tracer must think of these pixels as blocks and not as lines or curves.

Because of this we will not only cut the image to tiles, but we will also need to enlarge them:

magick input.png -crop 8x8 -scale 1000% -colors 2 BMP2:output/tile_%04d.bmp

4. svg

In order to convert the enlarged bitmap to svg, we need potrace executable on the path.

You can use node bmp-to-svg.mjs to convert the files:

import sh from "shelljs";
sh.ls('./output/tile_*.bmp').forEach((source, idx) => {
  const target = source.replace(/\.bmp$/, '.svg');
  console.log(`${source} -> ${target}`);
  sh.exec(`potrace -b svg -o ${target} ${source}`)
});

or you can write a proper shellscript / do it manually:

potrace -b svg -o ./output/tile_0000.bmp ./output/tile_0000.svg

5. font

Use an online service (like Fontello) to generate a simple font, or you can use FontForge, which is everything but trivial.

Images used in the gist: