Create a gold bitmap font

In this post I'll take you through the process of producing a gold colored font similar to what I've used in my own apps.

First the alphabet:

We need a string of characters separated by one or more spaces (I used 4 in the example below to properly separate the characters) to use in Gimp to create the font string.

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

As in my other post I'll just create a truncated alphabet for simplicity.

Using Gimp to create an alphabet image:

Open up Gimp and create a blank image of size 500 x 20,000. You might have to experiment here to get an image large enough for your complete alphabet. MENU/File/New… and set the image size and press OK.

Now we need to color the background black using the Bucket-Fill tool from the Gimp toolbox.

Next, switch the Gimp Foreground/Background colors around so we get white as the foreground color (use the curved double arrow near the black/white color boxes on the Gimp toolbox.

Select the 'Text' tool from the Gimp toolbox and choose the font you want to use, font size etc. I chose 'Tiranti Solid LET' 200 pixels for this example. I turned on Bold to give the character strokes some width. Finally I flattened the image (MENU/Image/Flatten Image).

This is approximately what you should have now (I've adjusted the image size for this post):

White letters on a black background.

Create the bump-map:

Next we blur the letters slightly (MENU/Filters/Blur/Gaussian Blur, size=5). This will help to give the letters a 3D shape later.

Now we want to create a bump-map for the letters to generate a 3D shape: MENU/Select/By Colour, now click on the black background. MENU/Select/Invert

Go to the Layers dialog (MENU/Windows/Dockable-Dialogs/Layers) click on the "Create a new layer" button at the bottom left, select Transparency, name the layer bump-map and click OK. Next click the eye-symbol on the Background layer to hide it.

Select BlendTool on the Gimp toolbox (square with L-R black to white gradient) and set, Mode:Normal, Opacity:100%, Gradient: FG to BG (RGB), Shape: Linear. Now drag out the line from the very top of the image to the very bottom in a completely vertical line. If you don't make the line vertical the gradient will be tilted. Your letters will now have a gradient from top to bottom.

Get rid of the select (MENU/Select/None), and apply the bump-map (MENU/Filters/Map/Bump Map). In the dialog set Bump Map:background image, Map Type: Sinusoidal (this is nice), and then press OK. Your lettering should appear 3D.

Make Letters Metalic:

Next we want to make the letters appear shiny like they were made from metal (MENU/Colors/Curves…). Pull out the curves so they look something like:

Metallic color curve preset for metallic look.

You can save this curve by clicking on the green+. Press OK. The lettering should appear much like the following (if you zoom in -- use mouse wheel):

Letters given a metallic look by adjusting the Color Curves.

Apply the Gold Color:

First we need to set a fore-ground color. Click on the foreground color blot(white block on Gimp toolbox) and set a yellow color: fff556 and press OK. In the Layers dialog make sure the visible layer (letters) is selected and apply that color to the image (MENU/Colors/Map/Gradient Map). This gives the object a nice gold color. NOTE: You can choose other colors and produce metallic lettering to suit your needs.

Letters colored with Gradient Map

A drop-shadow can now be added. Select the letters as we did above (MENU/Select/By Color, now click on the black background. MENU/Select/Invert) and generate a drop-shadow (MENU/Filters/Light and Shadow/Drop Shadow, Opacity: 85%) and press OK. Un-select the characters (Shift-Ctrl-A). This gives each character a nice drop shadow something like the following:

Drop-Shadow added.

We can now delete the background layer (the red circle with cross in Gimp layers dialog), merge the visible layers (MENU/Image/Merge Visible Layers) and Save (Ctrl-S) and Export (Ctrl-E, uncheck the "Save Background Color" checkbox and save as PNG file) our work.

Gold letter alphabet with drop shadow.

Next:

Next we have to take our linear alphabet image, that we just created, and split each letter out into individual images.

Split Linear Font File

An image of the linear alphabet isn't going to do us much good so we need to split it down into individual letters.

Splitting Into Individual Letters:

To split this long image of the alphabet into individual characters I created a 'bash'(linux) script. It uses the Image-Magick 'convert' program to do two things. First convert will compress the MxN image into a Mx1 (single pixel column) image and then report on the colors of the pixels in this image. The characters will be non-empty and the space around them will be empty (Color #00000000 RGBA). We just use the transition from one to the other to determine where the vertical extents of all the letters are and then use 'convert' to strip the excess non-character stuff off the top and bottom of the original image.

Then we do the same, compress the vertical dimension and strip out the characters from the trimmed image above. The individual characters are then saved in a directory by the name of the Alphabet strip image.

Here is the chopimage script that I use:

#!/bin/bash

#
# Script file to chop an image of a string of characters into individual letters
# based on the uniform transparent background colour (=#00000000 none) between the letters.
#
# This script performs by taking the image and first using 'convert' to smoosh (a technical term)
# it down to a vertical image 1 pixel wide, then reporting on each of the pixels.  An AWK command
# is used to look for a transition from 'none',or 'graya(0,0)'(the background) to something
# that isn't 'none' or 'graya(0,0)':
#
#   ...
#   0,4: (0,0,0,0)  #00000000  none
#   0,5: (0,0,0,0)  #00000000  none
#   0,6: (0,0,0,0)  #00000000  none
#   0,7: (0,0,0,0)  #00000000  none
#   0,8: (3.63098e-09,1.45239e-08,0,5.62604e-15)  #00000000  srgba(0,0,0,8.58478e-20)
#   0,9: (16191,64764,0,0.469211)  #3FFC0000  srgba(63,252,0,7.15971e-06)
#   0,10: (16191,64764,0,9.36611)  #3FFC0000  srgba(63,252,0,0.000142918)
#   0,11: (16191,64764,0,35.3837)  #3FFC0000  srgba(63,252,0,0.000539921)
#   0,12: (16191,64764,0,96.4829)  #3FFC0000  srgba(63,252,0,0.00147223)
#   ...
# Or
#   ...
#   41,0: (0,0)  #00000000  graya(0,0)
#   42,0: (0,0)  #00000000  graya(0,0)
#   43,0: (0,0)  #00000000  graya(0,0)
#   44,0: (0,0)  #00000000  graya(0,0)
#   45,0: (0,0)  #00000000  graya(0,0)
#   46,0: (2.8607e-05,1.72444e-13)  #00000000  graya(0,2.63133e-18)
#   47,0: (49575.3,21.5728)  #C1C1C100  graya(193,0.000329179)
#   48,0: (49937.1,429.378)  #C2C2C202  graya(194,0.00655189)
#   49,0: (51556.9,1516.96)  #C9C9C906  graya(201,0.0231474)
#   ...
#
# Awk then reports the line numbers which we use to determine where to cut the image (to get
# rid of most of the background. We again do this with 'convert'
#
# Next we do the same thing, smooshing the image down to a 1-pixel high image and using the
# resulting list (like above -- except for columns instead of rows) to tell us were to cut
# the letters out.  We store these in a directory with the file name of the original image.
#
# The reported transitions from the background ('none') to otherwise is why we need expand the
# image in GIMP to make sure there is a boundary of blank space around the images (it will get
# trimmed off anyway).
#
# See article:
#   https://stackoverflow.com/questions/33636849/imagemagick-split-image-by-background-color
#
# USAGE:
#   chopimage <in-file.png> {"<out-file-fmt>" {<blank-width>}}
#
# Example:
#   chopimage RoyalsGold.png "Letters_%03.png"
#
# NOTE: <blank-width> defaults to 50 pixels
#
# (Script created by alan on 12/Jun/2018 21:56:51)
#
pgm=chopimage
tmp=/tmp/${pgm}_
bin=/home/alan/bin
log=${bin}/data/${pgm}.$(uname -n).log

# Get our command line arguments making sure we have the original PNG file.
cmpimg=${1}
fmt=${2:-"CharImage_%03d.png"} # Default for format string
blank=${3:-50}                 # Default for blank width in pixels
if [ "$cmpimg" == "" ]; then
    echo "USAGE: chopimage <compound-image> {<out-imgname-format>}"
    exit
fi

# Strip the extension of the in-file-name and use that as output directory
dirnam=${cmpimg%.*}

# Display the working parameters
echo "cmpimg='$cmpimg'"
echo "fmt='$fmt'"
echo "blank='$blank'"
echo "dirnam='$dirnam'"

# Get the actual size of the image.
imgsz=$( file "$cmpimg" | sed "s/^.* \([0-9][0-9]*\) x \([0-9][0-9]*\),.*$/\1,\2/g" )
echo "imgsz='$imgsz'"
iszx=$( echo "$imgsz" | awk -F, '{ print $1 }' )
iszy=$( echo "$imgsz" | awk -F, '{ print $2 }' )
#echo "isz(x,y)=($iszx,$iszy)"

# Determine how much blank space we have on the top and bottom of the PNG.  NOTE: We can't
# do this for individual characters like 'W' and '_' because our PLIST --> FNT conversion
# program isn't smart enough to orient different height characters verticaly.
# NOTE: This requires there to be blank space on the top AND bottom across the image, therefore,
#       make sure your image has blank(transparent) areas on top and bottom.
echo "Finding top/bottom empty space"
convert ${cmpimg} -resize 1x! txt: >${tmp}tb1
cat ${tmp}tb1 \
    | awk 'inside && /#00000000/{inside=0;print;next} !inside && ! /#00000000/{inside=1;print}' \
    >${tmp}tb

# Get the line numbers of the top of the character and the bottom
echo "Getting y1,y2"
y1=$( head -3 ${tmp}tb | tail -1 | sed "s/^0,\([0-9][0-9]*\): .*$/\1/g" )
y2=$( tail -1 ${tmp}tb | sed "s/^0,\([0-9][0-9]*\): .*$/\1/g" )
echo "y1='$y1'"
echo "y2='$y2'"

# Add a little bit of padding (1 pixel top and bottom)
y1=$(( $y1 - 1 ))
szy=$(( $y2 - $y1 +2 ))
#echo "y1='$y1'"
#echo "szy='$szy'"

# Now actually do the vertical trimming
echo "Trimming top and bottom"
convert "${cmpimg}" -crop x${szy}+0+${y1} "${tmp}.png"

# Now we can do the same procedure with the horizontal divisions (except there are more of them).
# NOTE: This requires there to be blank space on the Left AND Right sides of the image, therefore,
#       make sure your image has blank(transparent) areas on the sides.
echo "Finding inter-letter spacing"
convert "${tmp}.png" -resize x1! txt: >${tmp}bnd1
cat ${tmp}bnd1 \
    | awk 'inside && /#00000000/{inside=0;print;next} !inside && ! /#00000000/{inside=1;print}' \
    >${tmp}bnd

# Create the output directory
mkdir -p "${dirnam}" 2>/dev/null


imgno=1    # Counter for output image number.
gotblank=0 # Flag indicating whether we've created the blank character yet.
lastx2=0   # Counter to get inter-character spacing for blank character.

# Now do the actual cutting off of characters
cat ${tmp}bnd |\
while read line1
do
    # Look for the LHS record for the current character
    echo "$line1" | grep "rgba(\|graya([1-9]" >/dev/null
    if [ $? -eq 0 ]; then
        # We've found it so read in the next record which will be the RHS-record.
        read line2
        echo "--------------------------"
        echo "line1='$line1'"
        echo "line2='$line2'"

        # Calculate the pixel extents of the current character.
        x1=$( echo "$line1" | sed "s/,.*$//g" )
        x2=$( echo "$line2" | sed "s/,.*$//g" )

        # Check to see if we have processed the blank character yet.
        if [ $gotblank -eq 0 ]; then
            # Find the distance from the RHS of the last character to the LHS of the current char.
            dlx2x1=$(( $x1 - $lastx2 ))

            # If it is big enough for a blank then produce the file.
            if [ $dlx2x1 -ge $blank ]; then
                echo "Producing blank character, $blank pixels wide"
                # Generate the output file name and create a blank.png from this space
                fname=$( printf $fmt $imgno )
                convert "${tmp}.png" -crop ${blank}x+${lastx2}+0 "${dirnam}/${fname}"
                # Increment our image number.
                imgno=$(( $imgno + 1 ))
                gotblank=1
            fi
        else
            echo "Already got blank"
        fi
        lastx2=$x2

        # Display the coordinates of the character to output.
        echo "x1,x2='$x1,$x2'"
        #x1p=$(( $x1 - 1 ))

        # Determine the character x-metrics.
        x1p=$x1
        szx=$(( $x2 - $x1 ))
       
        # Create the character file name and extract the bitmap to the given file.
        fname=$( printf $fmt $imgno )
        convert "${tmp}.png" -crop ${szx}x+${x1p}+0 "${dirnam}/${fname}"
        echo "Producing character: $fname"

        # On to the next image ...
        imgno=$(( $imgno + 1 ))
    fi
done

#
# end of 'chopimage' script file.
#

Just run the program with the image name and if you want a different width for your space character (default=50 pixels) then specify this too. My PNG file was called GradientBevel.png, I wanted 40pixel wide spaces and I wanted the output image files to be named "LetterImage_%03d.png" so my command was:

chopimage GradientBevel.png "LetterImage_%03d.png" 40

This produced the following output:

alan@Midnight$ chopimage GradientBevel.png "LetterImage_%03d.png" 40
cmpimg='GradientBevel.png'
fmt='LetterImage_%03d.png'
blank='40'
dirnam='GradientBevel'
imgsz='1453,103'
Finding top/bottom empty space
Getting y1,y2
y1='27'
y2='89'
Trimming top and bottom
Finding inter-letter spacing
--------------------------
line1='16,0: (65535,65535,65535,0.98363)  #FFFFFF00  srgba(255,255,255,1.50092e-05)'
line2='70,0: (1.61668e-09,1.61668e-09,1.61668e-09,1.85662e-15)  #00000000  srgba(0,0,0,2.83302e-20)'
x1,x2='16,70'
Producing character: LetterImage_001.png
--------------------------
line1='76,0: (65535,65535,65535,17.1694)  #FFFFFF00  srgba(255,255,255,0.000261989)'
line2='122,0: (2.10696e-08,2.10696e-08,2.10696e-08,1.41067e-14)  #00000000  srgba(0,0,0,2.15254e-19)'
x1,x2='76,122'
Producing character: LetterImage_002.png
--------------------------
line1='129,0: (65535,65535,65535,4.98295)  #FFFFFF00  srgba(255,255,255,7.60349e-05)'
line2='176,0: (4.59765e-08,4.59765e-08,4.59765e-08,3.01553e-14)  #00000000  srgba(0,0,0,4.6014e-19)'
x1,x2='129,176'
Producing character: LetterImage_003.png
--------------------------
line1='185,0: (65535,65535,65535,17.1694)  #FFFFFF00  srgba(255,255,255,0.000261989)'
line2='235,0: (4.08064e-08,4.08064e-08,4.08064e-08,2.64424e-14)  #00000000  srgba(0,0,0,4.03485e-19)'
x1,x2='185,235'
Producing character: LetterImage_004.png
--------------------------
line1='244,0: (65535,65535,65535,17.1694)  #FFFFFF00  srgba(255,255,255,0.000261989)'
line2='286,0: (1.99955e-08,1.99955e-08,1.99955e-08,-1.33887e-14)  #00000000  srgba(0,0,0,-2.04299e-19)'
x1,x2='244,286'
Producing character: LetterImage_005.png
--------------------------
line1='295,0: (65535,65535,65535,17.1694)  #FFFFFF00  srgba(255,255,255,0.000261989)'
line2='336,0: (1.86687e-08,1.86687e-08,1.86687e-08,-1.25011e-14)  #00000000  srgba(0,0,0,-1.90755e-19)'
x1,x2='295,336'
Producing character: LetterImage_006.png
--------------------------
line1='344,0: (65535,65535,65535,4.98295)  #FFFFFF00  srgba(255,255,255,7.60349e-05)'
line2='395,0: (5.95701e-08,5.95701e-08,5.95701e-08,-3.61643e-14)  #00000000  srgba(0,0,0,-5.51831e-19)'
x1,x2='344,395'
Producing character: LetterImage_007.png
--------------------------
line1='404,0: (65535,65535,65535,17.1694)  #FFFFFF00  srgba(255,255,255,0.000261989)'
line2='453,0: (1.19024e-07,1.19024e-07,1.19024e-07,-7.01002e-14)  #00000000  srgba(0,0,0,-1.06966e-18)'
x1,x2='404,453'
Producing character: LetterImage_008.png
--------------------------
line1='463,0: (65535,65535,65535,17.1694)  #FFFFFF00  srgba(255,255,255,0.000261989)'
line2='488,0: (1.19024e-07,1.19024e-07,1.19024e-07,-7.01002e-14)  #00000000  srgba(0,0,0,-1.06966e-18)'
x1,x2='463,488'
Producing character: LetterImage_009.png
--------------------------
line1='492,0: (65535,65535,65535,3.12778)  #FFFFFF00  srgba(255,255,255,4.77269e-05)'
line2='524,0: (1.28439e-07,1.28439e-07,1.28439e-07,-7.54638e-14)  #00000000  srgba(0,0,0,-1.1515e-18)'
x1,x2='492,524'
Producing character: LetterImage_010.png
--------------------------
line1='535,0: (65535,65535,65535,17.1694)  #FFFFFF00  srgba(255,255,255,0.000261989)'
line2='587,0: (1.61668e-09,1.61668e-09,1.61668e-09,-1.85662e-15)  #00000000  srgba(0,0,0,-2.83302e-20)'
x1,x2='535,587'
Producing character: LetterImage_011.png
--------------------------
line1='591,0: (65535,65535,65535,17.1694)  #FFFFFF00  srgba(255,255,255,0.000261989)'
line2='633,0: (1.99955e-08,1.99955e-08,1.99955e-08,-1.33887e-14)  #00000000  srgba(0,0,0,-2.04299e-19)'
x1,x2='591,633'
Producing character: LetterImage_012.png
--------------------------
line1='640,0: (65535,65535,65535,17.1694)  #FFFFFF00  srgba(255,255,255,0.000261989)'
line2='697,0: (1.19024e-07,1.19024e-07,1.19024e-07,-7.01002e-14)  #00000000  srgba(0,0,0,-1.06966e-18)'
x1,x2='640,697'
Producing character: LetterImage_013.png
--------------------------
line1='707,0: (65535,65535,65535,17.1694)  #FFFFFF00  srgba(255,255,255,0.000261989)'
line2='756,0: (1.19024e-07,1.19024e-07,1.19024e-07,-7.01002e-14)  #00000000  srgba(0,0,0,-1.06966e-18)'
x1,x2='707,756'
Producing character: LetterImage_014.png
--------------------------
line1='764,0: (65535,65535,65535,4.98295)  #FFFFFF00  srgba(255,255,255,7.60349e-05)'
line2='817,0: (4.78058e-08,4.78058e-08,4.78058e-08,-3.04409e-14)  #00000000  srgba(0,0,0,-4.64499e-19)'
x1,x2='764,817'
Producing character: LetterImage_015.png
--------------------------
line1='826,0: (65535,65535,65535,17.1694)  #FFFFFF00  srgba(255,255,255,0.000261989)'
line2='872,0: (2.50286e-08,2.50286e-08,2.50286e-08,-1.68538e-14)  #00000000  srgba(0,0,0,-2.57173e-19)'
x1,x2='826,872'
Producing character: LetterImage_016.png
--------------------------
line1='878,0: (65535,65535,65535,4.98295)  #FFFFFF00  srgba(255,255,255,7.60349e-05)'
line2='931,0: (4.78058e-08,4.78058e-08,4.78058e-08,-3.04409e-14)  #00000000  srgba(0,0,0,-4.64499e-19)'
x1,x2='878,931'
Producing character: LetterImage_017.png
--------------------------
line1='940,0: (65535,65535,65535,17.1694)  #FFFFFF00  srgba(255,255,255,0.000261989)'
line2='989,0: (1.61668e-09,1.61668e-09,1.61668e-09,-1.85662e-15)  #00000000  srgba(0,0,0,-2.83302e-20)'
x1,x2='940,989'
Producing character: LetterImage_018.png
--------------------------
line1='995,0: (65535,65535,65535,7.3013)  #FFFFFF00  srgba(255,255,255,0.000111411)'
line2='1040,0: (7.78376e-08,7.78376e-08,7.78376e-08,-2.84178e-14)  #00000000  srgba(0,0,0,-4.33628e-19)'
x1,x2='995,1040'
Producing character: LetterImage_019.png
--------------------------
line1='1045,0: (65535,65535,65535,2.85368)  #FFFFFF00  srgba(255,255,255,4.35443e-05)'
line2='1094,0: (7.46746e-08,7.46746e-08,7.46746e-08,-2.50023e-14)  #00000000  srgba(0,0,0,-3.8151e-19)'
x1,x2='1045,1094'
Producing character: LetterImage_020.png
--------------------------
line1='1100,0: (65535,65535,65535,12.1229)  #FFFFFF00  srgba(255,255,255,0.000184983)'
line2='1147,0: (3.82292e-07,3.82292e-07,3.82292e-07,-1.13423e-13)  #00000000  srgba(0,0,0,-1.73072e-18)'
x1,x2='1100,1147'
Producing character: LetterImage_021.png
--------------------------
line1='1154,0: (65535,65535,65535,0.772458)  #FFFFFF00  srgba(255,255,255,1.17869e-05)'
line2='1208,0: (5.96768e-09,5.96768e-09,5.96768e-09,-3.42669e-15)  #00000000  srgba(0,0,0,-5.2288e-20)'
x1,x2='1154,1208'
Producing character: LetterImage_022.png
--------------------------
line1='1211,0: (65535,65535,65535,0.772458)  #FFFFFF00  srgba(255,255,255,1.17869e-05)'
line2='1279,0: (2.72452e-08,2.72452e-08,2.72452e-08,-1.21862e-14)  #00000000  srgba(0,0,0,-1.8595e-19)'
x1,x2='1211,1279'
Producing character: LetterImage_023.png
--------------------------
line1='1283,0: (65535,65535,65535,0.98363)  #FFFFFF00  srgba(255,255,255,1.50092e-05)'
line2='1335,0: (6.46671e-09,6.46671e-09,6.46671e-09,-3.71324e-15)  #00000000  srgba(0,0,0,-5.66605e-20)'
x1,x2='1283,1335'
Producing character: LetterImage_024.png
--------------------------
line1='1338,0: (65535,65535,65535,2.69423)  #FFFFFF00  srgba(255,255,255,4.11113e-05)'
line2='1390,0: (5.96768e-09,5.96768e-09,5.96768e-09,-3.42669e-15)  #00000000  srgba(0,0,0,-5.2288e-20)'
x1,x2='1338,1390'
Producing character: LetterImage_025.png
--------------------------
line1='1393,0: (65535,65535,65535,6.36067)  #FFFFFF00  srgba(255,255,255,9.70577e-05)'
line2='1440,0: (1.41726e-07,1.41726e-07,1.41726e-07,-4.80423e-14)  #00000000  srgba(0,0,0,-7.33078e-19)'
x1,x2='1393,1440'
Producing character: LetterImage_026.png

This left me with a directory full of letter images. Note: if some of your letters are packed together into one image increase the spacing between these letters in the alphabet string above and redo all the intervening work. These are the letter images in one of my font directories:

Individual letter images after 'chopimage'.

You may notice looking at your individual character files that there seems to be a lot of space surrounding certain letters. This may be due to an included underscore (or some similar character) that forces a vertical trimming that isn't optimal for all characters. However, this will make it easier to position the characters in Cocos2d-x.

Problems:

I've tripped across a few problems. Here are their solution/explanations:

  • Whitespace on individual letters seems excessive. This may be due to one or more characters in the alphabet extending beyond the average characters boundaries. For instance I found an underscore '_' character cause all my letters to have excess white-space at the bottom. Eventually I'll make my PList->Fnt translation program smart enough to adjust the position of the letters based on their actual extent ... but until then.
  • Multiple letters in individual letter files. This is due to two sequential letters coming too close together in the image (because of glow/drop-shadow or kerning) and can be solved by putting more blanks between characters in the alphabet string.
  • No results at all. I've found this is because there is not enough color #00000000 (empty) boundary around the letters. In gimp just increase the canvas size (and center the image) and this should fix the problem.

Next:

OK, now that we've split them all apart we have to put them all back together into a sprite sheet.

Bitmap Fonts in Cocos2d-x

This article describes the process of creating a bitmap'd font, using the GIMP image editor, the image-magick suite, and some home-brewed C-code. It also describes how to use the font in the Cocos2d-x/Android-Studio development environment.

For this project you will need:

  • Bash (Sorry, moved from MSWindows to Ubuntu and have never looked back - script might be translatable to MSDOS),
  • GIMP image editor (for creating the bitmap font strip),
  • Image-magick suite (splits font strip from Gimp into individual images),
  • A C++ compiler (g++, or clang are good - for compiling my code snippet),
  • TexturePacker (free version, to glue all letters into sprite sheet),
  • A Cocos2d-x project (to include your sprite-sheet into a game/app), and,
  • the Android Studio IDE (to compile the Cocos2d-x project).

I actually wrote this post some time ago but since then my OS has had to be re-imaged and surprise, surprise, that's where MySQL saves its database - fortunately my development environment was all on the /home partition. I've, in the interim, learned how to move my MySQL database to a safe location so hopefully that won't happen again. I've also gotten smarter and installed a WordPress plugin to back my system up off-site (including the MySQL database).

Now, if I can remember what I wrote before...

Let me know how this works for you. I'll try to help if you are having problems, time permitting.

If you have a bitmap font of which you are particularly proud let me know and I will link it on the example post above. Good luck!

Creating a Bitmap Font

The goal of this post is to demonstrate how to generate a bitmap font in a PNG file with a PLIST xml descriptor file for use in Cocos2d-x programs. I'll describe a no-cost method suitable for a beginning or hobby game programmer but useful across the spectrum. My system is an Ubuntu/linux system and the tools I'll use are Gimp, Image-Magick and the free version of TexturePacker

Gimp is a powerfull image editor much like Photoshop (perhaps with a little less chrome -- but very usable). The second package that you need is Image-Magick. Image-Magick has a utility that will allow us to carve the letter images out of a very long image. The last program TexturePacker has a free version that will create a sprite-sheet with all the characters and a related PLIST file that will tell cocos2d-x how to extract each letter from the sprite-sheet. Once you've gotten these programs installed we can continue.

Font:

Next you will require a font. You can just use a system font to experiment with but if you want something fancier then you'll have to look around. If you Google "Free Font" you get lots of sites giving these away. Just be careful to check out the license if you plan to publish your game or use the font in a commercial setting. Install the new fonts on your system so they can be used by Gimp. Here are a sample of "free font" sites:

There are two methods to produce a fancy bitmap font using Gimp. The first is using the built-in generator, the second is to use Gimp's powerful image manipulation functions manually to produce exactly what we are looking for.

Method 1:

Lets experiment. Start up Gimp and click on MENU/File/Create/Logos pick one of the types from the list: 3D Outline, Alien Glow, Alien Neon, Basic II, Basic I, ..., Textured. Select a logo type that has a uniform background colour because we will be removing this later and the program needs a uniform colour to determine where the letter breaks are. Type in a string in the Text field, set the Font and Font size to suit your needs and adjust any of the other parameters you desire. Then press the OK button.

Here are some examples with the Text field and font size (50) changed:

3D Outline
Bovination
Neon

This will produce an image with a fixed string in the font you want with the characteristics you want. You will need to use a selection that produces characters with a background that is completely uniform (which we will cut out of our image later).

Creating Image String:

To produce a bitmap font we will need to produce individual letters for all the letters we want to use in our program. It is probably a good idea to produce the entire ASCII printable set then you won't have to worry about changing requirements for your program. However, I'll just use the capital letters (with a space between each) to illustrate:

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Now create your font image with that string. Note that the Image-Magick convert program I'll use later on uses the uniform background colour to determine where to cut the image so if your font image has glow around it or a drop-shadow you may have to space your letters more than one space-character apart.

We generate a horizontal string of characters for two reasons. First it makes splitting them apart easier and second it allows us to uniformly apply image effects that change the characters from top to bottom (for instance a gradient). In another article about producing Gold colored letters this will be important.

This is font size 50 of the Gradient Bevel selection

What you should look for here is a vertical line of uniform background colour between all the letters -- the software will use this to separate the letters. Don't worry about getting too much blank space between your characters -- this will be removed later automatically.

Prepairing Image String:

Still in Gimp we need to do four things: add a transparency layer, subtract the background, resize the image and save everything. First adjust the size of the image using your mouse roller or changing the percentage on the bottom left of the window.

To subtract the background we first have to flatten the image (it may have multiple layers): MENU/Image/Flatten Image, then we have to add a transparency channel to the image: MENU/Layer/Transparency/Add Alpha Channel. If you already have an alpha channel this option will be greyed out.

Next subtract the background by choosing the "Select by Color" tool from the toolbox. You may want to modify the behavior of this tool in the Tool Options (select Feather Edges and adjust the radius and adjust the threshold for the color selector). Then use Ctrl-X (cut) to subtract the background (you should then see the transparency checkerboard between all the characters). If you want to adjust your choices then just backout the cut and selection with a couple of Ctrl-Z's.

When you are happy with the background subtraction we should add a boundary around the image (to make sure there transparent pixels on all sides) by increasing the canvas size: MENU/Image/Canvas Size... , increase the width and height by about 20 pixels and Center the image, and press the Resize button.

Now just save your project (Ctrl-S) and export the image to a PNG file (Ctrl-E).

Method 2:

In this method I'll do the work that was done in Method 1 but do it manually which will give much more control over creating the font. There are many formulas for creating decorated fonts on the web but I'll go over one on producing gold lettering which I've used for my own projects.

Next:

OK, now that we've created a image of our entire alphabet we need to split it apart into individual letters. Or, to see how to produce a gold Bit-Mapped Font go here.

After a hiatus …

Well it took me a while but I managed to get Hexing up on the Google Play Store again. Who would have thought just adding a privacy statement could have been such an ordeal.

It all started way back when ...

Trippy Feet:

Well, I should mention first that in the following recollection I probably tripped over my own feet more than anything else. However, this process also taught me to be careful about updating software when not required and paying attention to the important emails.

The journey started back in November 2018 when I noticed that Hexing wasn't accessible through the Google Play Store. Checking my account there I came across a banner error message informing me that the Play Store had removed my program because it didn't have a privacy statement which was now required by various countries including the EU. So my first lesson is 1) Check the Play Store regularly to make sure everything is running smoothly there. I guess a reminder is a task for Google Calendar.

Upon checking my email client I found the email from Google telling me that they would be doing this. Apparently redirecting my emails into a sub-directory and then ignoring them wasn't a good strategy for email overload. So there's got to be a better solution to dealing with all the emails from friends and family and automated servers and the important automated mail servers. That's my second lesson. Not sure I've solved that one yet ... especially now that I've added Google Calendar notices to the list.

Holy Flood Batman:

Next problem was that between Android-Studio, Cocos2d-x, and Firebase everybody decided to change everything between when I last worked on Hexing and now. Not that I don't appreciate the improvements but ... Holy flood Batman! I guess this lesson is that if I had recompiled Hexing semi-regularly I would have had a smaller plate of changes to deal with and it wouldn't have been such a problem.theyNext problem was that between Android-Studio, Cocos2d-x, and Firebase everybody decided to change everything between when I last worked on Hexing and now. Not that I don't appreciate the improvements but ... Holy flood Batman! I guess this lesson is that if I had recompiled Hexing semi-regularly I would have had a smaller plate of changes to deal with and it wouldn't have been such a problem.

So what were the problems ...

Well the first was that I now required a privacy statement. Hmmm, a tad out of my wheelhouse and since I'm not making any money with my programs yet (actually as it turns out it seems I'm paying money to have people play my programs ... I hope they really enjoy them ... well at least one of us does). This suggests that paying a lawyer to produce a privacy statement was a little extravagant. So I did what many others probably do and basically searched the net for other privacy statements and cut and pasted until I had something reasonable, without spelling errors, and that seemed to cover the whole spectrum of things that Hexing users might want to know about. One problem solved.

AsciiDoc:

So, I have the text of a privacy statement but what do I write it in? Scratch Word ... that was a no-go ever since I left the MS Windows world permanently for linux (Ubuntu -- my relief was palpable). There are lots of tools on linux. I contemplated Latex but thought this was a little over the top and since I had being playing with AsciiDoc lately and it had the professional look I wanted I decided to use it. Great!! The document, when auto translated to HTML, looked just like I wanted it to. Now where to put it.

I thought about installing it in Hexing so it would be with the program whenever needed but the maintenance problem of updating it as I updated Hexing and the problem of how to display it from an in-memory resource and the waste of space bothered me so I figured I'd put it up on the internet and just have a button in Hexing to open it up. Turns out that Cocos2d-x has just the call for this and it was a one-liner except for the button code -- which was quite simple too. Another problem solved.

Web Presence:

But I needed a web presence so I could put my privacy statement up. This required me to find a web service somewhere (but again$$$), or a free web service (but I didn't like the lack of control). So I just decided to use my personal machine which is on 24-7. So now it was time to install another host on my Apache server. Fortunately, this was relatively easy compared to the old days ... which made my cry and pull my hair out. Only problem was that my Apache server went away when my machine crashed and I had to re-image the OS. And this not being my first time down this road I had kept notes on what I needed to do (thanks GNote). But of course there was a catch, everything had changed, so I had to re-learn and plod through all the web pages (which are massively interlinked so even though you are hopeful when you start because there is a clear starting position there is no ending page because they are so highly interlinked that you don't know if you've even read the page you are on now ... better read it!

Be Safe MySQL:

Anyway I finally got the Apache server running, my old (hand crafted) web pages back (which was nice) and a place to put all the web pages for Non-Aligned Games that I intend to do in the future. Oh, wait a minute I had a web site for Non-Aligned games before I had to re-image the OS. Now where did I store those pages? Arrrggghhhh! MySQL used in WordPress, on linux, stores the databases on the OS partition -- which goes away when you re-image your OS (thank goodness I wasn't still using MS Windows). At least I was smart enough to move the /home directory off onto it's own partition. So now I needed to figure out how to move a MySQL database area to a safe place (like on my /home partition) for when I bork my OS again. Finally figured that out and recorded the process on GNote and now I could re-install WordPress

Learn WordPress:

WordPress is really nice and for the most part free (some WordPress third party developers add lots of really professional addons for WordPress that they charge for). However, I didn't know anything about WordPress. OK, so I'm going to learn some WordPress. I was starting to wonder if I could still call myself a game programmer.

There was a learning curve with WordPress but once you pick the theme you want to settle on, from the thousands of free themes out there, you can get down to creating your web site. The problem with WordPress themes are is that they only roughly show you what your web site is going to look like. Adding graphics, and logos and text to your chosen theme can make it look completely different than the preview. Once you do get over most of the learning curve then it is pretty easy to do things. That might be partially you know what your limits are now.

AsciiDoc on WordPress:

So now I have a WordPress web site hosted on my own machine and a seed of a web presence. Now for that AsciiDoc privacy statement. WordPress has some plugins that mention AsciiDoc I'll just add one of those plugins and get it to suck up my privacy_policy.adoc and poof my privacy policy is up live. But, nothing is ever simple. These plugins didn't work the way I wanted them to so I eventually just made an external link to my HTML version and left it at that. Not optimal but at lease I don't have to maintain more than one version of the policy.

What was I doing again ... oh yeah something to do with a game ...

Game Mods:

Next was installing the buttons into the game which would display the privacy statement for the game and the Non-Aligned web site which I could announce my progress and new games etc. I started up Android-Studio as usual and it mentioned that there was some sort of update. As usual I just clicked the install button and off it went. That was a mistake. I think there is some corollary to Murphy's law for computer science that states that you shouldn't upgrade software while it is working.

BNFC Quirks

BNFC is a great tool but it has some quirks that have slowed down the process of building a front-end for my fortran2c translator. However, the code generation, especially if you haven't built a compiler before moves you quite a distance forward. Here's what I've found so far...

Position dependent code:

First, in the lexical analyzer (the part that converts from a character stream to a token stream) BNFC is fairly inflexible. In the case of Fortran and other older languages there are position dependent tokens. Some examples come to mind: The comment, the continuation line, label-numbers and the sequence column. These are illustrated in the file segment (Maze.for) below:

C
C   MAZE DESCRIPTION
C
  180   WRITE(6,190) HEIGHT,WIDTH,DEPTH
  190   FORMAT('0',' YOUR MAZE HAS A HEIGHT OF',I5,/,
    1  '             AND A WIDTH OF',I5,/,
    1  '            WITH A DEPTH OF',I5,//,
    2  '  THE DIRECTION COMMANDS FOR MAZE ARE SINGLE LETTERS',/,
    2  '    N(ORTH), U(P),    OR 8 IS UP',/,
    2  '    E(AST) , R(IGHT), OR 6 IS RIGHT',/,
    2  '    S(OUTH), D(OWN),  OR 2 IS DOWN',/,
    2  '    W(EST) , L(EFT),  OR 4 IS LEFT',/,
    2  '    I(N)   ,          OR 9 IS IN TO SCREEN',/,
    2  '    O(UT)  ,          OR 7 IS OUT OF SCREEN',/,

Comments start with a "C" in column one and go to the end-of-line. Continuation lines start at the beginning with a tab or 5 spaces, have a continuation mark (usually 0-9 or '+') then a space and the body of the continuation. Labels are numbers preceded with spaces and ending at column 5.

Unfortunately I don't have a example of code with a sequence column. These were basically 8-digit numbers in columns 73-80. Code including the above continuation/label-number preface to statements was from column 1 to 72 with 73-80 being left over for the sequence number. I believe this sequence number was a holdover from the old punched card days when people would do a 52-card pickup with a program deck (which usually went far beyond 52 cards) and needed a way to sort it back into a program (by machine).

All these things need Flex code that allows for multiple states (i.e. <prefix>, <seqno>, <statement>) which doesn't seem to be a possibility in BNFC.

What I ended up doing was writing a small state-machine program (in C) that converted comments to C-like '//' comments and just joined continuation lines into one long line (since we aren't working on 80-column punch cards anymore). The code below can be compiled with the command (I'm running Ubuntu/linux with the GNU gcc compiler):

g++ -std=c++11 -g fixup.c -o fixup

/*
 * Program to do some preprocessing on a Fortran file to deal with:
 *     "\nC" ==> "\n//"                   -- Comments, and
 *     "[ \t]*\n     [0-9+][ \t]*" ==> "" -- Continuation lines
 *     "[ \t]*\n\t[0-9+][ \t]*"    ==> "" -- Continuation lines
 *
 */


#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <stdarg.h>
   
#define BUF_SZ 1000

#define DEBUG false

char buf[BUF_SZ];
int bufidx=-1;
int state=0;

int CntComments=0;
int CntContinue=0;

void save(int chr){
    buf[++bufidx]=(char)chr;

    if(bufidx==BUF_SZ){
        fprintf(stderr,"ERROR: Buffer Overflow\n");
        exit(1);
    }
}

void unsave(){
    buf[bufidx--]=0;

    if(bufidx<-1){
        fprintf(stderr,"ERROR: Buffer Underflow\n");
        exit(2);
    }
}

void reset(){
    memset(buf,0,BUF_SZ);
    bufidx=-1;
    state=0;
}

void purge(){
    printf("%s",buf);
    reset();
}


void asaprintf( const char * format, ... )
{
    va_list args;
    va_start (args, format);
    if(DEBUG) vprintf (format, args);
    va_end (args);
}

void newstate(int ns){
    state=ns;
    //asaprintf("<%d>",state);
}


int main(int argc,char* argv[]){

    int chr=0;
    int idx=0;

    reset();

    state=2; // Start in state 2 because first line in file may be a comment

    while((chr=getchar())!=EOF){
        asaprintf("%6d) state=%d chr='%c'(0x%02x)\n",idx++,state,chr,chr);
        save(chr);
        if(chr==0){
            reset();
        }else{
            switch(state){
                case 0:
                    switch(chr){
                        case ' ': break;
                        case '\t': break;
                        case '\n': newstate(2); break;
                        default: purge(); break;
                    };
                    break;

                case 2:
                    switch(chr){
                        case ' ': newstate(6); break;
                        case 'C': case 'c':
                            unsave(); purge(); printf("//"); CntComments++; break;
                        case '\t': newstate(10); break;
                        default: purge(); break;
                    };
                    break;
           
                case 6:
                    switch(chr){
                        case ' ': newstate(7); break;
                        default: purge(); break;
                    };
                    break;
           
                case 7:
                    switch(chr){
                        case ' ': newstate(8); break;
                        default: purge(); break;
                    };
                    break;
           
                case 8:
                    switch(chr){
                        case ' ': newstate(9); break;
                        default: purge(); break;
                    };
                    break;
           
                case 9:
                    switch(chr){
                        case ' ': newstate(10); break;
                        default: purge(); break;
                    };
                    break;
           
                case 10:
                    switch(chr){
                        case '0':
                        case '1':
                        case '2':
                        case '3':
                        case '4':
                        case '5':
                        case '6':
                        case '7':
                        case '8':
                        case '9':
                        case '+':
                            newstate(11); break;
                        default: purge(); break;
                    };
                    break;
           
                case 11:
                    switch(chr){
                        case ' ': break;
                        case '\t': break;
                        default: reset(); putchar(chr); CntContinue++; break;
                    };
                    break;
           
            }
        }
    }
    printf("\n");

    fprintf(stderr, "Counts:\n");
    fprintf(stderr, "  Comments:      %5d\n",CntComments);
    fprintf(stderr, "  Continuations: %5d\n",CntContinue);
    return(0);
}

The Maze.for program then became (Maze_pp.for):

//
//  MAZE -  USES A VT100 TO WANDER AROUND.
//      THE VT100 MUST HAVE ADVANCED VIDEO OPTION.
//      ANSI VT100 ESCAPE SEQUENCES ARE USED.
//
//  WRITTEN BY DON MCLEAN
//  OF THE MACNEAL-SCHWENDLER CORP.
//
//  THE PURPOSE OF THIS PROGRAM WAS TO
//      1. LEARN SOMETHING ABOUT THE VT100 GRAPHICS.
//      2. KEEP MY KIDS BUSY ON WEEKENDS. WHILE I TRIED
//         TO GET SOMETHING ELSE DONE.
//
//  USE OF THIS PROGRAM FOR ANY PURPOSE OTHER THAN FUN
//  IS PROHIBITED.
//
    IMPLICIT INTEGER*4 (A-Z)
//
//  MAZE DIMENSIONS
//  HMAX AND WMAX SHOULD NOT BE LARGER THAN 22 AND 80 RESP.
//
    PARAMETER HMAX=22, WMAX=80, DMAX=4
//
    DIMENSION SLEEP(2)
//
//  DIMENSION IS HMAX*WMAX*DMAX
    INTEGER*2  EXIT(HMAX*WMAX*DMAX), MAT(HMAX*WMAX*DMAX)
    INTEGER*2  LCOUNT(DMAX)
//
    BYTE CLEAR(2)
//
    CHARACTER*200 INPUT
//
    COMMON /MAZECM/ STARTH,STARTW,STARTD,ENDH,ENDW,ENDD,NOBELL
//
//  CLEAR IS A VT100 RESET
//
    DATA CLEAR / 27, 'c' /
//
//  START - SEE IF AN OLD GAME IS TO BE USED.
//
    WRITE(6,10)
   10   FORMAT(' WELCOME TO MAZE')
//
   20   WRITE(6,30)
   30   FORMAT(' ARE YOU GOING TO PLAY A SAVED GAME? ',$)
    READ(5,40) NC,INPUT
   40   FORMAT(Q,A)
    IF(INDEX(INPUT(1:NC),'Y').NE.0) GO TO 120
    SAVE = 0
//
//  INPUT DIMENSION OF MAZE
//
   50   WRITE(6,60) HMAX
   60   FORMAT(' PLEASE INPUT HEIGHT OF MAZE - DEFAULT = ',I2,' ',$)
    READ(5,40) NC,INPUT
    READ(INPUT,70,ERR=50) HEIGHT
   70   FORMAT(BNI2)
    IF(HEIGHT.EQ.0) HEIGHT=HMAX
    IF(HEIGHT.LT.2) HEIGHT=2
    IF(HEIGHT.GT.HMAX) HEIGHT=HMAX
   80   WRITE(6,90) WMAX
   90   FORMAT(' PLEASE INPUT WIDTH  OF MAZE - DEFAULT = ',I2,' ',$)
    READ(5,40) NC,INPUT
    READ(INPUT,70,ERR=80) WIDTH
    IF(WIDTH.EQ.0) WIDTH = WMAX
    IF(WIDTH.LT.2) WIDTH=2
    IF(WIDTH.GT.WMAX) WIDTH=WMAX
  100   WRITE(6,110)
  110   FORMAT(' PLEASE INPUT DEPTH  OF MAZE - DEFAULT =  1 ',$)
    READ(5,40) NC,INPUT
    READ(INPUT,70,ERR=100) DEPTH
    IF(DEPTH.LE.0) DEPTH = 1
    IF(DEPTH.GT.DMAX) DEPTH = DMAX
    NTERMS = HEIGHT * WIDTH * DEPTH
...

Symbols:

The next problem that encountered were the symbols in the BNFC lexer/parser, _SYMB_43, for example. Yuck! I would have been shot at a code review for that. Here's what the lexer looked like (Fortran.l.bkp):

/* -*- c -*- This FLex file was machine-generated by the BNF converter */
%option noyywrap
%{
#define yylval Fortranlval
#define YY_BUFFER_APPEND Fortran_BUFFER_APPEND
#define YY_BUFFER_RESET Fortran_BUFFER_RESET
#define initialize_lexer Fortran_initialize_lexer
#include <string.h>
#include "Parser.h"
#define YY_BUFFER_LENGTH 4096
extern int yy_mylinenumber ;
char YY_PARSED_STRING[YY_BUFFER_LENGTH];
void YY_BUFFER_APPEND(char *s)
{
  strcat(YY_PARSED_STRING, s); //Do something better here!
}
void YY_BUFFER_RESET(void)
{
  int x;
  for(x = 0; x < YY_BUFFER_LENGTH; x++)
    YY_PARSED_STRING[x] = 0;
}

%}

LETTER [a-zA-Z]
CAPITAL [A-Z]
SMALL [a-z]
DIGIT [0-9]
IDENT [a-zA-Z0-9'_]
%START YYINITIAL COMMENT CHAR CHARESC CHAREND STRING ESCAPED
%%

<YYINITIAL>"
"        return _SYMB_0;
<YYINITIAL>"("           return _SYMB_1;
<YYINITIAL>"-"           return _SYMB_2;
<YYINITIAL>")"           return _SYMB_3;
<YYINITIAL>"*"           return _SYMB_4;
<YYINITIAL>","           return _SYMB_5;
<YYINITIAL>"="           return _SYMB_6;
<YYINITIAL>"+"           return _SYMB_7;
<YYINITIAL>"/"           return _SYMB_8;
<YYINITIAL>"$"           return _SYMB_9;
<YYINITIAL>".OR."        return _SYMB_10;
<YYINITIAL>".AND."           return _SYMB_11;
<YYINITIAL>".EQ."        return _SYMB_12;
<YYINITIAL>".NE."        return _SYMB_13;
<YYINITIAL>".LT."        return _SYMB_14;
<YYINITIAL>".GT."        return _SYMB_15;
<YYINITIAL>".LE."        return _SYMB_16;
<YYINITIAL>".GE."        return _SYMB_17;
<YYINITIAL>"**"          return _SYMB_18;
<YYINITIAL>":"           return _SYMB_19;
<YYINITIAL>".TRUE."          return _SYMB_20;
<YYINITIAL>".FALSE."         return _SYMB_21;
<YYINITIAL>".NOT."           return _SYMB_22;
<YYINITIAL>"BYTE"        return _SYMB_23;
<YYINITIAL>"CALL"        return _SYMB_24;
<YYINITIAL>"CHARACTER"           return _SYMB_25;
<YYINITIAL>"CLOSE"           return _SYMB_26;
<YYINITIAL>"COMMON"          return _SYMB_27;
<YYINITIAL>"CONTINUE"        return _SYMB_28;
<YYINITIAL>"DATA"        return _SYMB_29;
<YYINITIAL>"DIMENSION"           return _SYMB_30;
<YYINITIAL>"DO"          return _SYMB_31;
<YYINITIAL>"DOUBLE"          return _SYMB_32;
<YYINITIAL>"END"         return _SYMB_33;
<YYINITIAL>"EQUIVALENCE"         return _SYMB_34;
<YYINITIAL>"FORMAT"          return _SYMB_35;
<YYINITIAL>"FUNCTION"        return _SYMB_36;
<YYINITIAL>"GO"          return _SYMB_37;
<YYINITIAL>"IF"          return _SYMB_38;
<YYINITIAL>"IMPLICIT"        return _SYMB_39;
<YYINITIAL>"INTEGER"         return _SYMB_40;
<YYINITIAL>"LOGICAL"         return _SYMB_41;
<YYINITIAL>"OPEN"        return _SYMB_42;
<YYINITIAL>"PARAMETER"           return _SYMB_43;
<YYINITIAL>"READ"        return _SYMB_44;
<YYINITIAL>"REAL"        return _SYMB_45;
<YYINITIAL>"RETURN"          return _SYMB_46;
<YYINITIAL>"STOP"        return _SYMB_47;
<YYINITIAL>"SUBROUTINE"          return _SYMB_48;
<YYINITIAL>"TO"          return _SYMB_49;
<YYINITIAL>"WRITE"           return _SYMB_50;

<YYINITIAL>"//"[^\n]*\n     ++yy_mylinenumber;   /* BNFC single-line comment */;
<YYINITIAL>\%*{CAPITAL}({CAPITAL}|{DIGIT}|\$|\_)*        yylval.string_ = strdup(yytext); return _SYMB_51;
<YYINITIAL>'.+'          yylval.string_ = strdup(yytext); return _SYMB_52;
<YYINITIAL>{DIGIT}+\.{DIGIT}+((e|E)\-?{DIGIT}+)?(f|F)|{DIGIT}+(e|E)\-?{DIGIT}+(f|F)          yylval.string_ = strdup(yytext); return _SYMB_53;
<YYINITIAL>{DIGIT}+          yylval.int_ = atoi(yytext); return _INTEGER_;
\n ++yy_mylinenumber ;
<YYINITIAL>[ \t\r\n\f]           /* ignore white space. */;
<YYINITIAL>.         return _ERROR_;
%%
void initialize_lexer(FILE *inp) { yyrestart(inp); BEGIN YYINITIAL; }

The parser(Fortran.y.bkp) was worse ... I wish they had some way of converting these symbols to something more human readable:

%start Program
%%
Program : ListLblStm { $$ = make_Progr(reverseListLblStm($1)); YY_RESULT_Program_= $$; }
;
ListLblStm : /* empty */ { $$ = 0;  }
  | ListLblStm LblStm _SYMB_0 { $$ = make_ListLblStm($2, $1);  }
;
LblStm : Labeled_stm { $$ = make_SLabel($1); YY_RESULT_LblStm_= $$; }
  | Simple_stm { $$ = make_SSimple($1); YY_RESULT_LblStm_= $$; }
  | /* empty */ { $$ = make_SNill(); YY_RESULT_LblStm_= $$; }
;
Labeled_stm : _INTEGER_ Simple_stm { $$ = make_SLabelOne($1, $2);  }
;
Simple_stm : _SYMB_39 Type_Spec Type_Qual _SYMB_1 _SYMB_51 _SYMB_2 _SYMB_51 _SYMB_3 { $$ = make_SImplicit($2, $3, $5, $7);  }
  | _SYMB_43 ListNameValue { $$ = make_SParameter($2);  }
  | _SYMB_30 ListNameDim { $$ = make_SDiment($2);  }
  | Type_Spec Type_Qual ListNameDim { $$ = make_SDeclQual($1, $2, $3);  }
  | Type_Spec ListNameDim { $$ = make_SDecl($1, $2);  }
  | _SYMB_29 ListDataSeg { $$ = make_SData($2);  }
  | _SYMB_27 _SYMB_8 _SYMB_51 _SYMB_8 ListName { $$ = make_SCommon($3, $5);  }
  | _SYMB_50 _SYMB_1 ListAssignName _SYMB_3 { $$ = make_SWrtEmp($3);  }
  | _SYMB_50 _SYMB_1 ListAssignName _SYMB_3 ListNameOrArray { $$ = make_SWrite($3, $5);  }
  | _SYMB_35 _SYMB_1 ListFmtSpecs _SYMB_3 { $$ = make_SFormat($3);  }
  | _SYMB_44 _SYMB_1 ListAssignName _SYMB_3 ListNameOrArray { $$ = make_SRead($3, $5);  }
  | _SYMB_44 _SYMB_6 LExp { $$ = make_SAsignRead($3);  }
  | _SYMB_38 _SYMB_1 LExp _SYMB_3 IfThenPart { $$ = make_SIf($3, $5);  }
  | _SYMB_51 _SYMB_6 LExp { $$ = make_SAssign($1, $3);  }
  | _SYMB_51 _SYMB_1 ListLExp _SYMB_3 _SYMB_6 LExp { $$ = make_SAsnArr($1, $3, $6);  }
  | _SYMB_24 _SYMB_51 _SYMB_1 ListSpecLExp _SYMB_3 { $$ = make_SFunCall($2, $4);  }
  | _SYMB_24 _SYMB_51 { $$ = make_SFunCallNil($2);  }
  | _SYMB_37 _SYMB_49 _INTEGER_ { $$ = make_SGoto($3);  }
  | _SYMB_42 _SYMB_1 ListAssignName _SYMB_3 { $$ = make_SOpen($3);  }
  | _SYMB_26 _SYMB_1 ListAssignName _SYMB_3 { $$ = make_SClose($3);  }
  | _SYMB_31 _INTEGER_ DoRangePart { $$ = make_SDo($2, $3);  }
  | _SYMB_47 { $$ = make_SStop();  }
  | _SYMB_47 _SYMB_52 { $$ = make_SStopMsg($2);  }
  | _SYMB_33 { $$ = make_SEnd();  }
  | _SYMB_48 _SYMB_51 _SYMB_1 ListSpecLExp _SYMB_3 { $$ = make_SSubr($2, $4);  }
  | _SYMB_48 _SYMB_51 { $$ = make_SSubrNil($2);  }
  | _SYMB_36 _SYMB_51 _SYMB_1 ListSpecLExp _SYMB_3 { $$ = make_SFunct($2, $4);  }
  | _SYMB_36 _SYMB_51 { $$ = make_SFunctNil($2);  }
  | _SYMB_28 { $$ = make_SContinue();  }
  | _SYMB_46 { $$ = make_SReturn();  }
  | _SYMB_34 _SYMB_1 _SYMB_51 _SYMB_5 NameOrArrRef _SYMB_3 { $$ = make_SEquiv($3, $5);  }
;
Type_Qual : _SYMB_4 _INTEGER_ { $$ = make_QType($2);  }
;
ListNameValue : NameValue { $$ = make_ListNameValue($1, 0);  }
  | NameValue _SYMB_5 ListNameValue { $$ = make_ListNameValue($1, $3);  }
;
NameValue : _SYMB_51 _SYMB_6 _INTEGER_ { $$ = make_NVPair($1, $3);  }
;
ListNameDim : NameDim { $$ = make_ListNameDim($1, 0);  }
  | NameDim _SYMB_5 ListNameDim { $$ = make_ListNameDim($1, $3);  }
;
NameDim : _SYMB_51 _SYMB_1 ListDExp _SYMB_3 { $$ = make_PNameDim($1, $3);  }
  | _SYMB_51 { $$ = make_PNameDim2($1);  }
;
ListDExp : DExp { $$ = make_ListDExp($1, 0);  }
  | DExp _SYMB_5 ListDExp { $$ = make_ListDExp($1, $3);  }
;
DExp : DExp _SYMB_7 DExp1 { $$ = make_EDplus($1, $3);  }
  | DExp _SYMB_2 DExp1 { $$ = make_EDminus($1, $3);  }
  | DExp1 { $$ = $1;  }
;
DExp1 : DExp1 _SYMB_4 DExp2 { $$ = make_EDtimes($1, $3);  }
  | DExp1 _SYMB_8 DExp2 { $$ = make_EDdiv($1, $3);  }
  | DExp2 { $$ = $1;  }
;
DExp2 : _SYMB_1 DExp _SYMB_3 { $$ = $2;  }
  | _INTEGER_ { $$ = make_EDInt($1);  }
  | _SYMB_51 { $$ = make_EDName($1);  }
;
ListDataSeg : DataSeg { $$ = make_ListDataSeg($1, 0);  }
  | DataSeg _SYMB_5 ListDataSeg { $$ = make_ListDataSeg($1, $3);  }
;
DataSeg : ListVars _SYMB_8 ListDataVal _SYMB_8 { $$ = make_PDSeg($1, $3);  }
;
ListVars : Vars { $$ = make_ListVars($1, 0);  }
  | Vars _SYMB_5 ListVars { $$ = make_ListVars($1, $3);  }
;
Vars : _SYMB_51 { $$ = make_PVars($1);  }
;
ListDataVal : DataVal { $$ = make_ListDataVal($1, 0);  }
  | DataVal _SYMB_5 ListDataVal { $$ = make_ListDataVal($1, $3);  }
;
DataVal : _SYMB_7 DataValType { $$ = make_PDValPls($2);  }
  | _SYMB_2 DataValType { $$ = make_PDValNeg($2);  }
  | DataValType { $$ = make_PDValNil($1);  }
;
DataValType : _INTEGER_ { $$ = make_PDVInt($1);  }
  | _SYMB_53 { $$ = make_PDVFloat($1);  }
  | _SYMB_52 { $$ = make_PDVChar($1);  }
;
ListName : _SYMB_51 { $$ = make_ListName($1, 0);  }
  | _SYMB_51 _SYMB_5 ListName { $$ = make_ListName($1, $3);  }
;
ListFmtSpecs : FmtSpecs { $$ = make_ListFmtSpecs($1, 0);  }
  | FmtSpecs _SYMB_5 ListFmtSpecs { $$ = make_ListFmtSpecs($1, $3);  }
;
FmtSpecs : _SYMB_52 { $$ = make_FSString($1);  }
  | _SYMB_51 { $$ = make_FSName($1);  }
  | _SYMB_9 { $$ = make_FSINNL();  }
  | _SYMB_8 { $$ = make_FSSlash();  }
;
ListNameOrArray : NameOrArray { $$ = make_ListNameOrArray($1, 0);  }
  | NameOrArray _SYMB_5 ListNameOrArray { $$ = make_ListNameOrArray($1, $3);  }
;
NameOrArray : _SYMB_51 { $$ = make_PNALName($1);  }
  | _SYMB_1 _SYMB_51 _SYMB_1 ListName _SYMB_3 _SYMB_5 DoRangePart _SYMB_3 { $$ = make_PNALArry($2, $4, $7);  }
;
IfThenPart : _SYMB_37 _SYMB_49 _INTEGER_ { $$ = make_PIfGoto($3);  }
  | _SYMB_51 _SYMB_6 LExp { $$ = make_PIfAsgn($1, $3);  }
  | _SYMB_51 _SYMB_1 ListLExp _SYMB_3 _SYMB_6 LExp { $$ = make_PIFAsnArr($1, $3, $6);  }
  | _SYMB_46 { $$ = make_PIfRetn();  }
  | _SYMB_24 _SYMB_51 _SYMB_1 ListSpecLExp _SYMB_3 { $$ = make_PIfCall($2, $4);  }
  | _SYMB_24 _SYMB_51 { $$ = make_PIfCallNil($2);  }
;
LExp : LExp _SYMB_10 LExp2 { $$ = make_Elor($1, $3);  }
  | LExp _SYMB_11 LExp2 { $$ = make_Eland($1, $3);  }
  | LExp2 { $$ = $1;  }
;
LExp2 : LExp2 _SYMB_12 LExp3 { $$ = make_Eeq($1, $3);  }
  | LExp2 _SYMB_13 LExp3 { $$ = make_Eneq($1, $3);  }
  | LExp3 { $$ = $1;  }
;
LExp3 : LExp3 _SYMB_14 LExp4 { $$ = make_Elthen($1, $3);  }
  | LExp3 _SYMB_15 LExp4 { $$ = make_Egrthen($1, $3);  }
  | LExp3 _SYMB_16 LExp4 { $$ = make_Ele($1, $3);  }
  | LExp3 _SYMB_17 LExp4 { $$ = make_Ege($1, $3);  }
  | LExp4 { $$ = $1;  }
;
LExp4 : LExp4 _SYMB_7 LExp5 { $$ = make_Eplus($1, $3);  }
  | LExp4 _SYMB_2 LExp5 { $$ = make_Eminus($1, $3);  }
  | LExp5 { $$ = $1;  }
;
LExp5 : LExp5 _SYMB_4 LExp6 { $$ = make_Etimes($1, $3);  }
  | LExp5 _SYMB_8 LExp6 { $$ = make_Ediv($1, $3);  }
  | LExp6 { $$ = $1;  }
;
LExp6 : Unary_operator LExp8 { $$ = make_Epreop($1, $2);  }
  | LExp8 { $$ = $1;  }
;
LExp8 : LExp5 _SYMB_18 LExp8 { $$ = make_Epower($1, $3);  }
  | LExp8 _SYMB_1 _SYMB_3 { $$ = make_Efunk($1);  }
  | LExp8 _SYMB_1 ListSpecLExp _SYMB_3 { $$ = make_Efunkpar($1, $3);  }
  | LExp9 { $$ = $1;  }
;
LExp9 : TIntVar RangePart { $$ = make_Evar($1, $2);  }
  | _SYMB_52 { $$ = make_Estr($1);  }
  | LExp10 { $$ = $1;  }
;
RangePart : /* empty */ { $$ = make_ERangeNull();  }
  | _SYMB_19 TIntVar { $$ = make_ERange($2);  }
;
TIntVar : _INTEGER_ { $$ = make_ETInt($1);  }
  | _SYMB_20 { $$ = make_ETTrue();  }
  | _SYMB_21 { $$ = make_ETFalse();  }
  | _SYMB_51 { $$ = make_ETNameVar($1);  }
  | _SYMB_44 { $$ = make_ETRead();  }
;
ListLExp : LExp { $$ = make_ListLExp($1, 0);  }
  | LExp _SYMB_5 ListLExp { $$ = make_ListLExp($1, $3);  }
;
LExp10 : LExp11 { $$ = $1;  }
;
LExp11 : _SYMB_1 LExp _SYMB_3 { $$ = $2;  }
;
Unary_operator : _SYMB_7 { $$ = make_OUnaryPlus();  }
  | _SYMB_2 { $$ = make_OUnaryMinus();  }
  | _SYMB_22 { $$ = make_OUnaryNot();  }
;
ListSpecLExp : SpecLExp { $$ = make_ListSpecLExp($1, 0);  }
  | SpecLExp _SYMB_5 ListSpecLExp { $$ = make_ListSpecLExp($1, $3);  }
;
SpecLExp : LExp { $$ = make_SpLExpNot($1);  }
;
ListAssignName : AssignName { $$ = make_ListAssignName($1, 0);  }
  | AssignName _SYMB_5 ListAssignName { $$ = make_ListAssignName($1, $3);  }
;
AssignName : _SYMB_51 { $$ = make_PAsgnNm($1);  }
  | _INTEGER_ { $$ = make_PAsgnInt($1);  }
  | _SYMB_51 _SYMB_6 LExp { $$ = make_PAssign($1, $3);  }
;
DoRangePart : _SYMB_51 _SYMB_6 LExp _SYMB_5 LExp { $$ = make_PDoRange($1, $3, $5);  }
;
NameOrArrRef : _SYMB_51 { $$ = make_PNOAName($1);  }
  | _SYMB_51 _SYMB_1 ListLExp _SYMB_3 { $$ = make_PNOAArr($1, $3);  }
;
Type_Spec : _SYMB_40 { $$ = make_TInt();  }
  | _SYMB_45 { $$ = make_TFloat();  }
  | _SYMB_32 { $$ = make_TDouble();  }
  | _SYMB_25 { $$ = make_TChar();  }
  | _SYMB_23 { $$ = make_TByte();  }
  | _SYMB_41 { $$ = make_TLogi();  }
;

Fortunately, linux helps with that. I built a little script file that changes these cryptic symbols for something a little more tolerable:

# Clean up the symbols in both the parser and lexor
sed -f symbols Fortran.y &gt;Fortran.yy
cp Fortran.y Fortran.y.bkp
cp Fortran.yy Fortran.y

sed -f symbols Fortran.l &gt;Fortran.ll
cp Fortran.l Fortran.l.bkp
cp Fortran.ll Fortran.l

... and the associated 'symbols' file. NOTE the order of the 'symbols' commands. The _SYMB_1 was changed after the _SYMB_1? symbols otherwise the sed editor would have changed partial symbols:

s/_SYMB_10/T_OR/g
s/_SYMB_11/T_AND/g
s/_SYMB_12/T_EQ/g
s/_SYMB_13/T_NE/g
s/_SYMB_14/T_LT/g
s/_SYMB_15/T_GT/g
s/_SYMB_16/T_LE/g
s/_SYMB_17/T_GE/g
s/_SYMB_18/T_POW/g
s/_SYMB_19/T_COLON/g
s/_SYMB_20/T_TRUE/g
s/_SYMB_21/T_FALSE/g
s/_SYMB_22/T_NOT/g
s/_SYMB_23/T_BYTE/g
s/_SYMB_24/T_CALL/g
s/_SYMB_25/T_CHAR/g
s/_SYMB_26/T_CLOSE/g
s/_SYMB_27/T_COMM/g
s/_SYMB_28/T_CONT/g
s/_SYMB_29/T_DATA/g
s/_SYMB_30/T_DIMS/g
s/_SYMB_31/T_DO/g
s/_SYMB_32/T_DBL/g
s/_SYMB_33/T_END/g
s/_SYMB_34/T_EQU/g
s/_SYMB_35/T_FMT/g
s/_SYMB_36/T_FUNC/g
s/_SYMB_37/T_GO/g
s/_SYMB_38/T_IF/g
s/_SYMB_39/T_IMPL/g
s/_SYMB_40/T_INT/g
s/_SYMB_41/T_LOGI/g
s/_SYMB_42/T_OPEN/g
s/_SYMB_43/T_PARM/g
s/_SYMB_44/T_READ/g
s/_SYMB_45/T_REAL/g
s/_SYMB_46/T_RTN/g
s/_SYMB_47/T_STOP/g
s/_SYMB_48/T_SUBR/g
s/_SYMB_49/T_TO/g
s/_SYMB_50/T_WRITE/g
s/_SYMB_51/T_NAME/g
s/_SYMB_52/T_SQSTR/g
s/_SYMB_53/T_CFLT/g

s/_SYMB_0/T_NEWLINE/g
s/_SYMB_1/T_LPAREN/g
s/_SYMB_2/T_MINUS/g
s/_SYMB_3/T_RPAREN/g
s/_SYMB_4/T_MULT/g
s/_SYMB_5/T_COMMA/g
s/_SYMB_6/T_EQUALS/g
s/_SYMB_7/T_PLUS/g
s/_SYMB_8/T_DIV/g
s/_SYMB_9/T_DOLLAR/g

Makefile:

The Makefile was also a problem (Makefile.old). It is auto generated by BNFC which is great but it had no way to turn on parser debugging which is rather important when creating a frontend from scratch. Bison will often complain about shift/reduce and reduce/reduce errors and you need Bison's output file to debug these. So my next little bit of bash script dealt with that ... it just rewrites the Makefile with the appropriate flags set.

if [ "$flag" == "-d" ]; then
    # ----
    # Modify the Makefile to add debug flags so output is more verbose.
    cp Makefile Makefile.old
    cat Makefile \
        | sed "s/-PFortran$/-PFortran --debug/g" \
        | sed "s/-pFortran$/-pFortran --debug -r all -g/g" \
        &gt; Makefile.new
    cp Makefile.new Makefile

    # Show user the difference in the Makefiles
    echo "--- Makefile ---"
    diff Makefile Makefile.old | sed "s/^/    /g"
fi

This then produces the Parser.output file which we use to debug the BNFC input grammar. I'll explain the process of debugging the grammar when there are reduce/reduce and shift/reduce errors in another post:

Terminals unused in grammar

   _ERROR_


State 177 conflicts: 3 reduce/reduce
State 225 conflicts: 3 reduce/reduce
State 226 conflicts: 3 reduce/reduce
State 227 conflicts: 1 shift/reduce, 3 reduce/reduce


Grammar

    0 $accept: Program $end

    1 Program: ListLblStm

    2 ListLblStm: %empty
    3           | ListLblStm LblStm _SYMB_0

    4 LblStm: Labeled_stm
    5       | Simple_stm
    6       | %empty

    7 Labeled_stm: _INTEGER_ Simple_stm

    8 Simple_stm: _SYMB_39 Type_Spec Type_Qual _SYMB_1 _SYMB_51 _SYMB_2 _SYMB_51 _SYMB_3
    9           | _SYMB_43 ListNameValue
   10           | _SYMB_30 ListNameDim
   11           | Type_Spec Type_Qual ListNameDim
   12           | Type_Spec ListNameDim
   13           | _SYMB_29 ListDataSeg
   14           | _SYMB_27 _SYMB_8 _SYMB_51 _SYMB_8 ListName
   15           | _SYMB_50 _SYMB_1 ListAssignName _SYMB_3
   16           | _SYMB_50 _SYMB_1 ListAssignName _SYMB_3 ListNameOrArray
   17           | _SYMB_35 _SYMB_1 ListFmtSpecs _SYMB_3
   18           | _SYMB_44 _SYMB_1 ListAssignName _SYMB_3 ListNameOrArray
   19           | _SYMB_44 _SYMB_6 LExp
...

Generated Lexer fixups:

The generated lexer had a few changes that were needed because I was trying to make it conform to what I wanted to do instead of letting it do it's thing:

<YYINITIAL>"
"        return T_NEWLINE;
<YYINITIAL>"("           return T_LPAREN;
<YYINITIAL>"-"           return T_MINUS;
<YYINITIAL>")"           return T_RPAREN;
...
<YYINITIAL>"TO"          return T_TO;
<YYINITIAL>"WRITE"           return T_WRITE;

<YYINITIAL>"//"[^\n]*\n     ++yy_mylinenumber;   /* BNFC single-line comment */;
<YYINITIAL>\%*{CAPITAL}({CAPITAL}|{DIGIT}|\$|\_)*        yylval.string_ = strdup(yytext); return T_NAME;
<YYINITIAL>'.+'          yylval.string_ = strdup(yytext); return T_SQSTR;
<YYINITIAL>{DIGIT}+\.{DIGIT}+((e|E)\-?{DIGIT}+)?(f|F)|{DIGIT}+(e|E)\-?{DIGIT}+(f|F)          yylval.string_ = strdup(yytext); return T_CFLT;
<YYINITIAL>{DIGIT}+          yylval.int_ = atoi(yytext); return _INTEGER_;
\n ++yy_mylinenumber ;
<YYINITIAL>[ \t\r\n\f]           /* ignore white space. */;
<YYINITIAL>.         return _ERROR_;
%%
void initialize_lexer(FILE *inp) { yyrestart(inp); BEGIN YYINITIAL; }

First BNFC doesn't know what to do with a newline character as a token. So you see in the first two lines a broken Flex statement. These two lines were replaced with a line derived from the file 'l1':

"\n" { ++yy_mylinenumber; return T_NEWLINE; };

which treats the newline better. The other change is to get rid of the line that counts the line numbers (the ++yy_mylinenumber; line) and remove newlines and form-feeds from the "ignore white space" line. The following bash script segment does this:

# Do the other modifications to Fortran.l to fix the above problem.
cp Fortran.l Fortran.l.old
cat Fortran.l \
    | grep -v "^<YYINITIAL>"$" \
   | grep -v "
^..\ ++yy_mylinenumber.;$" \
   | sed "
s/^"[ \t]*return T_NEWLINE;$/${l1}/g" \
    | sed "s/\\\n\\\f]/]+/g" \
    > Fortran.l.new
cp Fortran.l.new Fortran.l
touch Fortran.y

# Show changes to user.
echo "--- Fortran.l ---"
diff Fortran.l Fortran.l.old | sed "s/^/    /g"

This produces the following lexer:

"\n"       { ++yy_mylinenumber; return T_NEWLINE; };
<YYINITIAL>"("           return T_LPAREN;
<YYINITIAL>"-"           return T_MINUS;
<YYINITIAL>")"           return T_RPAREN;
...
<YYINITIAL>"TO"          return T_TO;
<YYINITIAL>"WRITE"           return T_WRITE;

<YYINITIAL>"//"[^\n]*\n     ++yy_mylinenumber;   /* BNFC single-line comment */;
<YYINITIAL>\%*{CAPITAL}({CAPITAL}|{DIGIT}|\$|\_)*        yylval.string_ = strdup(yytext); return T_NAME;
<YYINITIAL>'.+'          yylval.string_ = strdup(yytext); return T_SQSTR;
<YYINITIAL>{DIGIT}+\.{DIGIT}+((e|E)\-?{DIGIT}+)?(f|F)|{DIGIT}+(e|E)\-?{DIGIT}+(f|F)          yylval.string_ = strdup(yytext); return T_CFLT;
<YYINITIAL>{DIGIT}+          yylval.int_ = atoi(yytext); return _INTEGER_;
<YYINITIAL>[ \t\r]+          /* ignore white space. */;
<YYINITIAL>.         return _ERROR_;
%%

Code Generation:

The generation of all the Flex/Bison and the pretty printer code is the saving grace. BNFC gets you most of the way to producing a front-end for your compiler and makes life a lot easier if, like me, you tend to forget how to write a Flex and Bison driver file in between doing other coding.

However, if you are new to building a compiler then BNFC may just make things worse by adding another level of complexity to an already complex problem. For this reason it might be best for novice compiler writers to ignore BNFC and read a good book on Flex/Bison and maybe a text book on compiler writing.

In my next post I will describe the code that is generated by BNFC.

Here are all the files (complete) that I've talked about above.